fix: filters not applied are cleared when changing the sections

i.e. when opening or closing a group + some optimization to some useEffect dependencies
Loxeris · May 27, 2024 · 2a78427 · 2a78427
1 parent 0a5d10b
commit 2a78427
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 34 deletions.
diff --git a/packages/diracx-web-components/src/components/ui/DataTable.tsx b/packages/diracx-web-components/src/components/ui/DataTable.tsx
@@ -408,35 +408,19 @@ export function DataTable(props: DataTableProps) {
     updateSectionFilters(filters);
   };
 
-  React.useEffect(() => {
-    // Function to parse the filters from the URL search params
-    const parseFiltersFromUrl = () => {
-      const filterStrings = searchParams.getAll("filter");
-      return filterStrings.map((filterString: string) => {
-        const [id, column, operator, value] = filterString.split("_");
-        return { id: Number(id), column, operator, value };
-      });
-    };
+  const SectionItem = React.useMemo(
+    () =>
+      sections
+        .find((section) => section.items.some((item) => item.id === appId))
+        ?.items.find((item) => item.id === appId),
+    [appId, sections],
+  );
 
-    const item = sections
-      .find((section) => section.items.some((item) => item.id === appId))
-      ?.items.find((item) => item.id === appId);
-
-    if (searchParams.has("filter")) {
-      // Parse the filters when the component mounts or when the searchParams change
-      const initialFilters = parseFiltersFromUrl();
-      // Set the filters (they will be displayed in the UI)
-      setFilters(initialFilters);
-      // Apply the filters to get the filtered data
-      const jsonFilters = initialFilters.map((filter) => ({
-        parameter: filter.column,
-        operator: filter.operator,
-        value: filter.value,
-      }));
-      setSearchBody({ search: jsonFilters });
-    } else if (item?.data?.filters) {
-      setFilters(item.data.filters);
-      const jsonFilters = item.data.filters.map(
+  React.useEffect(() => {
+    if (SectionItem?.data?.filters) {
+      setFilters(SectionItem.data.filters);
+      setAppliedFilters(SectionItem.data.filters);
+      const jsonFilters = SectionItem.data.filters.map(
         (filter: {
           id: number;
           column: string;
@@ -453,7 +437,7 @@ export function DataTable(props: DataTableProps) {
       setFilters([]);
       setSearchBody({ search: [] });
     }
-  }, [appId, searchParams, sections, setFilters, setSearchBody]);
+  }, [SectionItem?.data?.filters, setFilters, setSearchBody]);
 
   // Manage sorting
   const handleRequestSort = (

diff --git a/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx b/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx
@@ -1,5 +1,5 @@
 import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material";
-import React, { createContext, useEffect, useState } from "react";
+import React, { createContext, useEffect, useMemo, useState } from "react";
 import JSONCrush from "jsoncrush";
 import { useOidc } from "@axa-fr/react-oidc";
 import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
@@ -25,9 +25,11 @@ export const ApplicationsProvider = ({
   const { configuration } = useOIDCContext();
   const { isAuthenticated } = useOidc(configuration?.scope);
 
+  // get user sections from searchParams
+  const sectionsParams = useMemo(() => getParam("sections"), [getParam]);
+
   useEffect(() => {
-    // get user sections from searchParams
-    const sectionsParams = getParam("sections");
+    if (userSections.length > 0) return;
     if (sectionsParams) {
       const uncrushed = JSONCrush.uncrush(sectionsParams);
       try {
@@ -75,14 +77,14 @@ export const ApplicationsProvider = ({
             {
               title: "File Catalog",
               type: "File Catalog",
-              id: "FileCatatlog0",
+              id: "FileCatalog0",
               icon: FolderCopy,
             },
           ],
         },
       ]);
     }
-  }, [getParam]);
+  }, [sectionsParams, userSections]);
 
   useEffect(() => {
     if (!isAuthenticated) {