fix/ Filter types order does not reflect current order.

#569
equinor · Jan 30, 2024 · fee43d7 · fee43d7
1 parent bc2992f
commit fee43d7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx b/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
@@ -45,14 +45,14 @@ type QuickFilterReadyProps = {
 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 [filterGroupOpen, setFilterGroupOpen] = useState<string | null>(null);
   const handleExpandFilterGroup = (groupName: string) =>
     filterGroupOpen === groupName ? setFilterGroupOpen(null) : setFilterGroupOpen(groupName);
 
   const quickFilterGroups = groups?.filter(({ isQuickFilter }) => isQuickFilter);
 
-  const filterGroups = groups?.map((s) => s.name);
   const toggleFilterIsExpanded = () => {
     setIsFilterExpanded(!isFilterExpanded);
     setFilterGroupOpen(null);
@@ -104,7 +104,8 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
           <FiltersAppliedInfo activeFilters={calculateHiddenFiltersApplied()} />
           {isFilterExpanded && (
             <ToggleHideFilterPopover
-              allFilters={filterGroups}
+              allFilters={allFilterGroups}
+              setFilterOrder={setFilterOrder}
               setVisibleFilters={setVisibleFilterGroups}
               visibleFilters={visibleFilterGroups}
             />

diff --git a/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx b/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx
@@ -7,11 +7,13 @@ import { StyledButton, StyledItemWrapper, StyledPopoverList } from './toggleHide
 interface ShowHideFilterButtonProps {
   allFilters: string[];
   visibleFilters: string[];
+  setFilterOrder: (val: string[]) => void;
   setVisibleFilters: (val: string[]) => void;
 }
 
 export const ToggleHideFilterPopover = ({
   setVisibleFilters,
+  setFilterOrder,
   visibleFilters,
   allFilters,
 }: ShowHideFilterButtonProps): JSX.Element => {
@@ -29,8 +31,10 @@ export const ToggleHideFilterPopover = ({
   };
   const DraggableHandleSelector = 'globalDraggableHandle';
 
-  const updateList = () =>
+  const updateList = () => {
     setVisibleFilters(listRef.current.map((s) => s.item).filter((s) => visibleFilters.includes(s)));
+    setFilterOrder(listRef.current.map((s) => s.item));
+  };
 
   return (
     <>