diff --git a/packages/diracx-web-components/src/components/layout/OIDCSecure.tsx b/packages/diracx-web-components/src/components/layout/OIDCSecure.tsx index 6431f439..12b6418a 100644 --- a/packages/diracx-web-components/src/components/layout/OIDCSecure.tsx +++ b/packages/diracx-web-components/src/components/layout/OIDCSecure.tsx @@ -24,7 +24,9 @@ export function OIDCSecure({ children }: OIDCProps) { setPath( "/auth?" + // URLSearchParams to ensure that auth redirects users to the URL they came from - new URLSearchParams({ redirect: window.location.href }).toString(), + new URLSearchParams({ + redirect: window.location.pathname + window.location.search, + }).toString(), ); } }, [isAuthenticated, setPath]); diff --git a/packages/diracx-web-components/src/components/ui/DashboardDrawer.tsx b/packages/diracx-web-components/src/components/ui/DashboardDrawer.tsx index 7d6ed6d1..0e2338d3 100644 --- a/packages/diracx-web-components/src/components/ui/DashboardDrawer.tsx +++ b/packages/diracx-web-components/src/components/ui/DashboardDrawer.tsx @@ -233,9 +233,9 @@ export default function DashboardDrawer(props: DashboardDrawerProps) { }; group.items.push(newApp); if (empty) { - setSections([...userSections, group]); + setSections((userSections) => [...userSections, group]); } else { - setSections( + setSections((userSections) => userSections.map((g) => (g.title === group.title ? group : g)), ); } @@ -277,24 +277,24 @@ export default function DashboardDrawer(props: DashboardDrawerProps) { newGroup.title = `Group ${parseInt(newGroup.title.split(" ")[1]) + 1}`; } - setSections([...userSections, newGroup]); + setSections((userSections) => [...userSections, newGroup]); handleCloseContextMenu(); }; const handleDelete = () => { if (contextState.type === "group") { - const newSections = userSections.filter( - (group) => group.title !== contextState.id, + setSections((userSections) => + userSections.filter((group) => group.title !== contextState.id), ); - setSections(newSections); } else if (contextState.type === "item") { - const newSections = userSections.map((group) => { - const newItems = group.items.filter( - (item) => item.id !== contextState.id, - ); - return { ...group, items: newItems }; - }); - setSections(newSections); + setSections((userSections) => + userSections.map((group) => { + const newItems = group.items.filter( + (item) => item.id !== contextState.id, + ); + return { ...group, items: newItems }; + }), + ); } handleCloseContextMenu(); }; @@ -315,24 +315,26 @@ export default function DashboardDrawer(props: DashboardDrawerProps) { return; } //rename the group - const newSections = userSections.map((group) => { - if (group.title === contextState.id) { - return { ...group, title: renameValue }; - } - return group; - }); - setSections(newSections); - } else if (contextState.type === "item") { - const newSections = userSections.map((group) => { - const newItems = group.items.map((item) => { - if (item.id === contextState.id) { - return { ...item, title: renameValue }; + setSections((userSections) => + userSections.map((group) => { + if (group.title === contextState.id) { + return { ...group, title: renameValue }; } - return item; - }); - return { ...group, items: newItems }; - }); - setSections(newSections); + return group; + }), + ); + } else if (contextState.type === "item") { + setSections((userSections) => + userSections.map((group) => { + const newItems = group.items.map((item) => { + if (item.id === contextState.id) { + return { ...item, title: renameValue }; + } + return item; + }); + return { ...group, items: newItems }; + }), + ); } popClose(); diff --git a/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx b/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx index 17be24be..3b2d7037 100644 --- a/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx +++ b/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx @@ -1,11 +1,9 @@ -import React, { createContext, useEffect, useState } from "react"; +import React, { createContext, useCallback, useEffect, useState } from "react"; import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material"; import JSONCrush from "jsoncrush"; -import { useOidc } from "@axa-fr/react-oidc"; import { useSearchParamsUtils } from "@/hooks/searchParamsUtils"; import { applicationList } from "@/components/applications/ApplicationList"; import { UserSection } from "@/types/UserSection"; -import { useOIDCContext } from "@/hooks/oidcConfiguration"; import ApplicationConfig from "@/types/ApplicationConfig"; // Create a context for the userSections state @@ -38,12 +36,33 @@ export const ApplicationsProvider = ({ const { getParam, setParam } = useSearchParamsUtils(); - const { configuration } = useOIDCContext(); - const { isAuthenticated } = useOidc(configuration?.scope); + // 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[])) => { + if (typeof sections === "function") { + sections = sections(userSections); + } + const newSections = sections.map((section) => { + return { + ...section, + items: section.items.map((item) => { + return { + ...item, + icon: () => null, + }; + }), + }; + }); + setParam("sections", JSONCrush.crush(JSON.stringify(newSections))); + }, + [setParam, userSections], + ); useEffect(() => { - // get user sections from searchParams - const sectionsParams = getParam("sections"); + if (userSections.length !== 0) return; if (sectionsParams) { const uncrushed = JSONCrush.uncrush(sectionsParams); try { @@ -59,7 +78,9 @@ export const ApplicationsProvider = ({ return section; }, ); - setSections(newSections); + if (newSections !== userSections) { + setSections(newSections); + } } catch (e) { console.error("Error parsing user sections : ", uncrushed, e); } @@ -99,29 +120,19 @@ export const ApplicationsProvider = ({ ], ); } - }, [getParam, appList, defaultSections]); - - useEffect(() => { - if (!isAuthenticated) { - return; - } - // save user sections to searchParams (but not icons) - const newSections = userSections.map((section) => { - return { - ...section, - items: section.items.map((item) => { - return { - ...item, - icon: () => null, - }; - }), - }; - }); - setParam("sections", JSONCrush.crush(JSON.stringify(newSections))); - }, [isAuthenticated, setParam, userSections]); + }, [appList, defaultSections, sectionsParams]); return ( - + { + setSections(section); + setSectionsParams(section); + }, + appList, + ]} + > {children} );