fix: Sections useEffect circular dependencies and wrong auth redirect…

… url
Loxeris · Jun 10, 2024 · 8ab4af9 · 8ab4af9
1 parent 0591d99
commit 8ab4af9
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 60 deletions.
diff --git 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
@@ -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
@@ -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 (
-    <ApplicationsContext.Provider value={[userSections, setSections, appList]}>
+    <ApplicationsContext.Provider
+      value={[
+        userSections,
+        (section) => {
+          setSections(section);
+          setSectionsParams(section);
+        },
+        appList,
+      ]}
+    >
       {children}
     </ApplicationsContext.Provider>
   );