diff --git a/packages/diracx-web-components/src/components/ui/DataTable.tsx b/packages/diracx-web-components/src/components/ui/DataTable.tsx index 3bcca217..33d077a2 100644 --- 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 index 195bcf6c..8a5e7ae2 100644 --- 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) {