feat: code cleanup filter

dhis2 · Jan 17, 2025 · 5d2d788 · 5d2d788
1 parent c9f30c0
commit 5d2d788
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 20 deletions.
diff --git a/..._modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.constants.js b/..._modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.constants.js
@@ -22,6 +22,17 @@ export const COLUMN_TO_SORT_BY = Object.freeze({
     DATA_ITEM: 'change',
 });
 
+export const FIELD_TYPES = Object.freeze({
+    OCCURRED_AT: 'occurredAt',
+    SCHEDULED_AT: 'scheduledAt',
+    GEOMETRY: 'geometry',
+});
+
+export const FILTER_FIELD = Object.freeze({
+    FIELD: 'field',
+    DATA_ELEMENT: 'dataElement',
+});
+
 export const DEFAULT_PAGE_SIZE = 10;
 
 export const QUERY_KEYS_BY_ENTITY_TYPE = Object.freeze({

diff --git a/...pture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilter.types.js b/...pture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilter.types.js
@@ -1,5 +1,5 @@
 // @flow
-export type FilterValueType = 'SHOW_ALL' | { id: string, name: string };
+export type FilterValueType = { id: string, name: string } | null;
 
 export type DataItemDefinition = {
     id: string,

diff --git a/.../capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilterBar.js b/.../capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/ChangelogFilterBar.js
@@ -5,17 +5,17 @@ import { withStyles } from '@material-ui/core/styles';
 import { spacers } from '@dhis2/ui';
 import type { ChangelogFilterProps, FilterValueType } from './ChangelogFilter.types';
 import { DropdownFilter } from './DropdownFilter';
+import { FIELD_TYPES, FILTER_FIELD } from '../Changelog/Changelog.constants';
 
 const styles = {
     container: {
         padding: `0 0 ${spacers.dp8} 0`,
     },
 };
 
-const getFilterColumn = (id: string) =>
-    (['occurredAt', 'scheduledAt', 'geometry'].includes(id)
-        ? 'field'
-        : 'dataElement');
+const getFilterField = (id: string) =>
+    (Object.values(FIELD_TYPES).includes(id) ? FILTER_FIELD.FIELD : FILTER_FIELD.DATA_ELEMENT);
+
 
 const ChangelogFilterBarPlain = ({
     classes,
@@ -25,22 +25,21 @@ const ChangelogFilterBarPlain = ({
     setAttributeToFilterBy,
     dataItemDefinitions,
 }: ChangelogFilterProps) => {
-    const [openMenu, setOpenMenu] = useState<string | null>(null);
+    const [openMenu, setOpenMenu] = useState <string | null>(null);
 
     const toggleMenu = useCallback((menuName: string) => {
         setOpenMenu(prev => (prev === menuName ? null : menuName));
     }, []);
 
     const handleItemSelected = useCallback(
         (value: FilterValueType) => {
-            setOpenMenu(null);
-            if (value === 'SHOW_ALL') {
-                setFilterValue('SHOW_ALL');
+            if (value === null) {
+                setFilterValue(null);
                 setAttributeToFilterBy(null);
             } else {
-                const column = getFilterColumn(value.id);
+                const filterField = getFilterField(value.id);
                 setFilterValue(value);
-                setAttributeToFilterBy(column);
+                setAttributeToFilterBy(filterField);
             }
         },
         [setFilterValue, setAttributeToFilterBy],
@@ -55,7 +54,7 @@ const ChangelogFilterBarPlain = ({
         [dataItemDefinitions],
     );
 
-    const selectedFilterValue = attributeToFilterBy ? filterValue : 'SHOW_ALL';
+    const selectedFilterValue = attributeToFilterBy ? filterValue : null;
 
     return (
         <div className={classes.container}>

diff --git a/...ules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/DropdownFilter.js b/...ules/capture-core/components/WidgetsChangelog/common/ChangelogFilterBar/DropdownFilter.js
@@ -40,13 +40,12 @@ const DropdownFilterPlain = ({
     const isMenuOpen = openMenuName === filterColumn;
 
     const handleShowAll = useCallback(() => {
-        onItemSelected('SHOW_ALL', filterColumn);
+        onItemSelected(null, filterColumn);
     }, [onItemSelected, filterColumn]);
 
-    const filterValue =
-        selectedFilterValue !== 'SHOW_ALL' && typeof selectedFilterValue === 'object'
-            ? selectedFilterValue.name
-            : i18n.t('Show all');
+    const filterValue = selectedFilterValue
+        ? selectedFilterValue.name
+        : i18n.t('Show all');
 
     return (
         <DropdownButton
@@ -56,7 +55,7 @@ const DropdownFilterPlain = ({
                 isMenuOpen && (
                     <FlyoutMenu role="menu" dataTest={`changelog-filter-${filterColumn}`} maxHeight="300px">
                         <MenuItem
-                            key="all-filter"
+                            key={'showAll'}
                             onClick={handleShowAll}
                             label={i18n.t('Show all')}
                         />

diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js
@@ -21,7 +21,7 @@ export const useChangelogData = ({ entityId, entityType, programId }: Props) =>
     const [sortDirection, setSortDirection] = useState<SortDirection>(SORT_DIRECTION.DEFAULT);
 
     const [attributeToFilterBy, setAttributeToFilterBy] = useState<string | null>(null);
-    const [filterValue, setFilterValue] = useState<Object>('SHOW_ALL');
+    const [filterValue, setFilterValue] = useState<Object>(null);
 
     const [page, setPage] = useState<number>(1);
     const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
@@ -32,7 +32,7 @@ export const useChangelogData = ({ entityId, entityType, programId }: Props) =>
     };
 
     const filterParam =
-        filterValue !== 'SHOW_ALL' && attributeToFilterBy
+        filterValue === filterValue && attributeToFilterBy
             ? `${attributeToFilterBy}:eq:${filterValue.id}`
             : undefined;