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) {