From dda6abc080d8ed70478165a4565cb7c7ebe8e117 Mon Sep 17 00:00:00 2001
From: Loxeris <30194187+Loxeris@users.noreply.github.com>
Date: Wed, 21 Aug 2024 16:40:00 +0200
Subject: [PATCH] fix: filters not applied are cleared when changing the
 sections

i.e. when opening or closing a group

+ some optimization to some useEffect dependencies
---
 .../components/shared/DataTable.tsx           | 42 ++++++-------------
 .../contexts/ApplicationsProvider.tsx         | 14 +++++--
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/packages/diracx-web-components/components/shared/DataTable.tsx b/packages/diracx-web-components/components/shared/DataTable.tsx
index 303a2efc..15d29d9a 100644
--- a/packages/diracx-web-components/components/shared/DataTable.tsx
+++ b/packages/diracx-web-components/components/shared/DataTable.tsx
@@ -374,35 +374,19 @@ export function DataTable(props: DataTableProps) {
     updateSectionFilters(filters);
   };
 
+  const SectionItem = React.useMemo(
+    () =>
+      sections
+        .find((section) => section.items.some((item) => item.id === appId))
+        ?.items.find((item) => item.id === appId),
+    [appId, sections],
+  );
+
   React.useEffect(() => {
-    // Function to parse the filters from the URL search params
-    const parseFiltersFromUrl = () => {
-      const filterStrings = getAllParam("filter");
-      return filterStrings.map((filterString: string) => {
-        const [id, column, operator, value] = filterString.split("_");
-        return { id: Number(id), column, operator, value };
-      });
-    };
-
-    const item = sections
-      .find((section) => section.items.some((item) => item.id === appId))
-      ?.items.find((item) => item.id === appId);
-
-    if (getParam("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(
+    if (SectionItem?.data?.filters) {
+      setFilters(SectionItem.data.filters);
+      setAppliedFilters(SectionItem.data.filters);
+      const jsonFilters = SectionItem.data.filters.map(
         (filter: {
           id: number;
           column: string;
@@ -419,7 +403,7 @@ export function DataTable(props: DataTableProps) {
       setFilters([]);
       setSearchBody({ search: [] });
     }
-  }, [appId, getAllParam, getParam, sections, setFilters, setSearchBody]);
+  }, [SectionItem?.data?.filters, setFilters, setSearchBody]);
 
   // Manage sorting
   const handleRequestSort = (
diff --git a/packages/diracx-web-components/contexts/ApplicationsProvider.tsx b/packages/diracx-web-components/contexts/ApplicationsProvider.tsx
index 65ce51e0..5dd46d51 100644
--- a/packages/diracx-web-components/contexts/ApplicationsProvider.tsx
+++ b/packages/diracx-web-components/contexts/ApplicationsProvider.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, useCallback, useEffect, useState } from "react";
+import React, {
+  createContext,
+  useCallback,
+  useMemo,
+  useEffect,
+  useState,
+} from "react";
 import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material";
 import JSONCrush from "jsoncrush";
 import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
@@ -36,9 +42,6 @@ export const ApplicationsProvider = ({
 
   const { getParam, setParam } = useSearchParamsUtils();
 
-  // get user sections from searchParams
-  const sectionsParams = getParam("sections");
-
   // save user sections to searchParams (but not icons)
   const setSectionsParams = useCallback(
     (sections: UserSection[] | ((prev: UserSection[]) => UserSection[])) => {
@@ -61,6 +64,9 @@ export const ApplicationsProvider = ({
     [setParam, userSections],
   );
 
+  // get user sections from searchParams
+  const sectionsParams = useMemo(() => getParam("sections"), [getParam]);
+
   useEffect(() => {
     if (userSections.length !== 0) return;
     if (sectionsParams) {