diff approach. removes buggy behaviour

equinor · Jan 31, 2024 · 036b235 · 036b235
1 parent 7ad235b
commit 036b235
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 35 deletions.
diff --git a/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx b/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
@@ -42,11 +42,18 @@ export function QuickFilter(): JSX.Element {
 type QuickFilterReadyProps = {
   groups: IFilterGroup[];
 };
+
+type FilterGroups = {
+  groupName: string;
+  isVisible: boolean;
+};
+
 const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
   const { query, setUncheckedValues, uncheckedValues } = useFilterContext();
   const [isFilterExpanded, setIsFilterExpanded] = useState(false);
-  const [allFilterGroups, setFilterOrder] = useState<string[]>(groups.map((s) => s.name));
-  const [visibleFilterGroups, setVisibleFilterGroups] = useState<string[]>(groups.map((s) => s.name));
+  const [allFilterGroups, setFilterOrder] = useState<FilterGroups[]>(
+    groups.map((s) => ({ groupName: s.name, isVisible: true }))
+  );
   const [filterGroupOpen, setFilterGroupOpen] = useState<string | null>(null);
   const handleExpandFilterGroup = (groupName: string) =>
     filterGroupOpen === groupName ? setFilterGroupOpen(null) : setFilterGroupOpen(groupName);
@@ -102,14 +109,7 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
         )}
         <StyledButtonWrapper>
           <FiltersAppliedInfo activeFilters={calculateHiddenFiltersApplied()} />
-          {isFilterExpanded && (
-            <ToggleHideFilterPopover
-              allFilters={allFilterGroups}
-              setFilterOrder={setFilterOrder}
-              setVisibleFilters={setVisibleFilterGroups}
-              visibleFilters={visibleFilterGroups}
-            />
-          )}
+          {isFilterExpanded && <ToggleHideFilterPopover allFilters={allFilterGroups} setFilterOrder={setFilterOrder} />}
 
           <StyledButton onClick={() => clearActiveFilters()}>
             <FilterClearIcon isDisabled={uncheckedValues.map((s) => s.values).flat().length === 0} />
@@ -123,7 +123,11 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
       {isFilterExpanded && (
         <FilterView
           isFetching={query.isFetching}
-          groups={visibleFilterGroups.map((x) => groups.find((s) => s.name === x)).filter(Boolean) as IFilterGroup[]}
+          groups={
+            allFilterGroups
+              .map((x) => groups.find((s) => s.name === x.groupName && x.isVisible === true))
+              .filter(Boolean) as IFilterGroup[]
+          }
         />
       )}
     </StyledWrapper>

diff --git a/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx b/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx
@@ -5,35 +5,46 @@ import { ReactSortable } from 'react-sortablejs';
 import { StyledButton, StyledItemWrapper, StyledPopoverList } from './toggleHideFilterPopover.styles';
 
 interface ShowHideFilterButtonProps {
-  allFilters: string[];
-  visibleFilters: string[];
-  setFilterOrder: (val: string[]) => void;
-  setVisibleFilters: (val: string[]) => void;
+  allFilters: FilterType[];
+  setFilterOrder: (val: FilterType[]) => void;
 }
 
-export const ToggleHideFilterPopover = ({
-  setVisibleFilters,
-  setFilterOrder,
-  visibleFilters,
-  allFilters,
-}: ShowHideFilterButtonProps): JSX.Element => {
+type FilterType = {
+  groupName: string;
+  isVisible: boolean;
+};
+
+export const ToggleHideFilterPopover = ({ allFilters, setFilterOrder }: ShowHideFilterButtonProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const DraggableHandleSelector = 'globalDraggableHandle';
+
+  const listRef = useRef(allFilters.map((s) => ({ id: s.groupName, item: s.groupName })));
 
-  const listRef = useRef(allFilters.map((s) => ({ id: s, item: s })));
+  const updateListOrder = () => {
+    const updatedFilterOrder = listRef.current
+      .filter((refItem) => allFilters.some((filter) => filter.groupName === refItem.item))
+      .map((refItem) => {
+        const correspondingFilter = allFilters.find((filter) => filter.groupName === refItem.item);
+        return {
+          groupName: refItem.item,
+          isVisible: correspondingFilter ? correspondingFilter.isVisible : true,
+        } as FilterType;
+      });
 
-  const handleChange = (val: string) => {
-    if (visibleFilters.includes(val)) {
-      setVisibleFilters([...visibleFilters.filter((s) => s !== val)]);
-    } else {
-      setVisibleFilters([...visibleFilters, val]);
-    }
+    setFilterOrder(updatedFilterOrder);
   };
-  const DraggableHandleSelector = 'globalDraggableHandle';
 
-  const updateList = () => {
-    setVisibleFilters(listRef.current.map((s) => s.item).filter((s) => visibleFilters.includes(s)));
-    setFilterOrder(listRef.current.map((s) => s.item));
+  const handleCheckboxClick = (val: string) => {
+    const updatedFilters = allFilters.map((filter) => {
+      if (filter.groupName === val) {
+        return { ...filter, isVisible: !filter.isVisible };
+      }
+
+      return filter;
+    });
+
+    setFilterOrder(updatedFilters);
   };
 
   return (
@@ -59,15 +70,15 @@ export const ToggleHideFilterPopover = ({
                 setList={(e) => {
                   listRef.current = e;
                 }}
-                onEnd={updateList}
+                onEnd={updateListOrder}
               >
                 {listRef.current.map(({ item }) => (
                   <StyledItemWrapper className={DraggableHandleSelector} key={item}>
                     <Checkbox
                       size={2}
-                      checked={visibleFilters.includes(item)}
+                      checked={allFilters.some((filter) => filter.groupName === item && filter.isVisible === true)}
                       onChange={() => {
-                        handleChange(item);
+                        handleCheckboxClick(item);
                       }}
                     />
                     <div style={{ textTransform: 'capitalize' }}>{item}</div>