chore(url): remove everything from the url

Author: TheauW

packages/diracx-web-components/src/components/DashboardLayout/DashboardDrawer.tsx

@@ -77,7 +77,8 @@ export default function DashboardDrawer({
 
   // Define the applications that are accessible to users.
   // Each application has an associated icon and path.
-  const [userDashboard, setUserDashboard] = useContext(ApplicationsContext);
+  const [userDashboard, setUserDashboard, , , setCurrentAppId] =
+    useContext(ApplicationsContext);
 
   const theme = useTheme();
 
@@ -247,6 +248,7 @@ export default function DashboardDrawer({
         userDashboard.map((g) => (g.title === group.title ? group : g)),
       );
     }
+    setCurrentAppId(newApp.id);
   };
 
   let isContextStateStable = true;

packages/diracx-web-components/src/components/DashboardLayout/DrawerItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import {
   ListItemButton,
@@ -24,8 +24,7 @@ import {
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { ThemeProvider } from "../../contexts/ThemeProvider";
-import { useSearchParamsUtils } from "../../hooks/searchParamsUtils";
-import { useApplicationId } from "../../hooks/application";
+import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { DashboardGroup } from "../../types";
 
 interface DrawerItemProps {
@@ -67,11 +66,10 @@ export default function DrawerItem({
   // Ref to use for the handle of the draggable element, must be a child of the draggable element
   const handleRef = useRef(null);
   const theme = useTheme();
-  const { setParam } = useSearchParamsUtils();
   // Represents the closest edge to the mouse cursor
   const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
 
-  const appId = useApplicationId();
+  const [, , , appId, setCurrentAppId] = useContext(ApplicationsContext);
 
   useEffect(() => {
     if (!dragRef.current || !handleRef.current) return;
@@ -186,7 +184,7 @@ export default function DrawerItem({
       <ListItemButton
         disableGutters
         key={title}
-        onClick={() => setParam("appId", id)}
+        onClick={() => setCurrentAppId(id)} //setParam("appId", id)}
         sx={{ pl: 2, borderRadius: 2, pr: 1 }}
         ref={dragRef}
         selected={appId === id}

packages/diracx-web-components/src/components/Login/LoginForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import FormControl from "@mui/material/FormControl";
@@ -15,8 +15,6 @@ import { useOidc } from "@axa-fr/react-oidc";
 import { useMetadata, Metadata } from "../../hooks/metadata";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
 
-import { useSearchParamsUtils } from "../../hooks/searchParamsUtils";
-import { NavigationContext } from "../../contexts/NavigationProvider";
 import { useDiracxUrl } from "../../hooks";
 
 interface LoginFormProps {
@@ -32,16 +30,13 @@ interface LoginFormProps {
 export function LoginForm({
   logoURL = "/DIRAC-logo-minimal.png",
 }: LoginFormProps) {
-  const { setPath } = useContext(NavigationContext);
   const diracxUrl = useDiracxUrl();
   const { metadata, error, isLoading } = useMetadata(diracxUrl);
   const [selectedVO, setSelectedVO] = useState<string | null>(null);
   const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
   const { configuration, setConfiguration } = useOIDCContext();
   const { isAuthenticated, login } = useOidc(configuration?.scope);
 
-  const { getParam } = useSearchParamsUtils();
-
   // Login if not authenticated
   useEffect(() => {
     if (configuration && configuration.scope && isAuthenticated === false) {
@@ -50,18 +45,18 @@ export function LoginForm({
     }
   }, [configuration, isAuthenticated, login]);
 
-  useEffect(() => {
-    // Redirect to dashboard if already authenticated
-    if (isAuthenticated) {
-      const redirect = getParam("redirect");
-      console.log("Redirecting to:", redirect);
-      if (redirect) {
-        setPath(redirect);
-      } else {
-        setPath("/");
-      }
-    }
-  }, [getParam, isAuthenticated, setPath]);
+  // useEffect(() => {
+  //   // Redirect to dashboard if already authenticated
+  //   if (isAuthenticated) {
+  //     const redirect = getParam("redirect");
+  //     console.log("Redirecting to:", redirect);
+  //     if (redirect) {
+  //       setPath(redirect);
+  //     } else {
+  //       setPath("/");
+  //     }
+  //   }
+  // }, [getParam, isAuthenticated, setPath]);
 
   // Get default group
   const getDefaultGroup = (

packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx

@@ -1,28 +1,21 @@
 "use client";
 
-import React, {
-  createContext,
-  useCallback,
-  useMemo,
-  useEffect,
-  useState,
-} from "react";
+import React, { createContext, useEffect, useState } from "react";
 import { Monitor } from "@mui/icons-material";
-import JSONCrush from "jsoncrush";
-import { useSearchParamsUtils } from "../hooks/searchParamsUtils";
 import { applicationList } from "../components/ApplicationList";
 import { DashboardGroup } from "../types/DashboardGroup";
 import ApplicationMetadata from "../types/ApplicationMetadata";
-import { DashboardItem } from "../types/DashboardItem";
 
 // Create a context for the UserDashboard state
 export const ApplicationsContext = createContext<
   [
     DashboardGroup[],
     React.Dispatch<React.SetStateAction<DashboardGroup[]>>,
     ApplicationMetadata[],
+    string, // Id of the current application
+    React.Dispatch<React.SetStateAction<string>>,
   ]
->([[], () => {}, []]);
+>([[], () => {}, [], "", () => {}]);
 
 interface ApplicationsProviderProps {
   children: React.ReactNode;
@@ -45,88 +38,39 @@ export const ApplicationsProvider = ({
 }: ApplicationsProviderProps) => {
   const [userDashboard, setUserDashboard] = useState<DashboardGroup[]>([]);
 
-  const { getParam, setParam } = useSearchParamsUtils();
-
-  // save user dashboard to searchParams (but not icons)
-  const setUserDashboardParams = useCallback(
-    (
-      groups: DashboardGroup[] | ((prev: DashboardGroup[]) => DashboardGroup[]),
-    ) => {
-      if (typeof groups === "function") {
-        groups = groups(userDashboard);
-      }
-      const newSections = groups.map((group) => {
-        return {
-          ...group,
-          items: group.items.map((item) => {
-            return {
-              ...item,
-              icon: () => null,
-            };
-          }),
-        };
-      });
-      setParam("dashboard", JSONCrush.crush(JSON.stringify(newSections)));
-    },
-    [setParam, userDashboard],
-  );
-
-  // get user sections from searchParams
-  const groupsParams = useMemo(() => getParam("dashboard"), [getParam]);
+  const [currentAppId, setCurrentAppId] = useState<string>("");
 
   useEffect(() => {
     if (userDashboard.length !== 0) return;
-    if (groupsParams) {
-      const uncrushed = JSONCrush.uncrush(groupsParams);
-      try {
-        const newSections: DashboardGroup[] = JSON.parse(uncrushed).map(
-          (group: DashboardGroup) => {
-            group.items = group.items.map((item: DashboardItem) => {
-              return {
-                ...item,
-                //get icon from appList
-                icon:
-                  appList.find((app) => app.name === item.type)?.icon || null,
-              };
-            });
-            return group;
-          },
-        );
-        if (newSections !== userDashboard) {
-          setUserDashboard(newSections);
-        }
-      } catch (e) {
-        console.error("Error parsing user dashboard : ", uncrushed, e);
-      }
-    } else {
-      setUserDashboard(
-        defaultUserDashboard || [
-          {
-            title: "My dashboard",
-            extended: true,
-            items: [
-              {
-                title: "My Jobs",
-                type: "Job Monitor",
-                id: "JobMonitor0",
-                icon: Monitor,
-              },
-            ],
-          },
-        ],
-      );
-    }
-  }, [appList, defaultUserDashboard, groupsParams]);
+
+    setUserDashboard(
+      defaultUserDashboard || [
+        {
+          title: "My dashboard",
+          extended: true,
+          items: [
+            {
+              title: "My Jobs",
+              type: "Job Monitor",
+              id: "JobMonitor0",
+              icon: Monitor,
+            },
+          ],
+        },
+      ],
+    );
+  }, [appList, defaultUserDashboard]);
 
   return (
     <ApplicationsContext.Provider
       value={[
         userDashboard,
         (group) => {
           setUserDashboard(group);
-          setUserDashboardParams(group);
         },
         appList,
+        currentAppId,
+        setCurrentAppId,
       ]}
     >
       {children}

packages/diracx-web-components/src/hooks/application.tsx

@@ -2,27 +2,22 @@
 
 import { useContext, useMemo } from "react";
 import { ApplicationsContext } from "../contexts/ApplicationsProvider";
-import { useSearchParamsUtils } from "./searchParamsUtils";
 
 /**
- * Custom hook to access the application id from the URL
+ * Custom hook to access the application id from the context
  * @returns the application id
  */
 export function useApplicationId() {
-  const { getParam } = useSearchParamsUtils();
-
-  return useMemo(() => {
-    return getParam("appId");
-  }, [getParam]);
+  const [, , , appId] = useContext(ApplicationsContext);
+  return appId;
 }
 
 /**
  * Custom hook to access the application title based on the application id
  * @returns the application title
  */
 export function useApplicationTitle() {
-  const [userDashboard] = useContext(ApplicationsContext);
-  const appId = useApplicationId();
+  const [userDashboard, , , appId] = useContext(ApplicationsContext);
 
   return useMemo(() => {
     if (!userDashboard || !appId) return null;
@@ -40,7 +35,7 @@ export function useApplicationTitle() {
 
 /**
  * Custom hook to access the application title based on the application id
- * @returns the application title
+ * @returns the application type
  */
 export function useApplicationType() {
   const [userDashboard] = useContext(ApplicationsContext);

packages/diracx-web-components/src/hooks/index.ts

@@ -3,4 +3,3 @@ export * from "./oidcConfiguration";
 export * from "./searchParamsUtils";
 export * from "./theme";
 export * from "./utils";
-export * from "./application";

packages/diracx-web-components/test/LoginForm.test.tsx

@@ -1,5 +1,4 @@
 import { render, fireEvent, screen } from "@testing-library/react";
-import React from "react";
 import { LoginForm } from "../src/components/Login/LoginForm";
 import { ThemeProvider } from "../src/contexts/ThemeProvider";
 import { useMetadata } from "../src/hooks/metadata";

packages/diracx-web/src/app/(dashboard)/page.tsx

@@ -1,16 +1,13 @@
 "use client";
 import { useContext, useMemo } from "react";
-import { useSearchParams } from "next/navigation";
 import {
   BaseApp,
   applicationList,
 } from "@dirac-grid/diracx-web-components/components";
 import { ApplicationsContext } from "@dirac-grid/diracx-web-components/contexts";
 
 export default function Page() {
-  const searchParams = useSearchParams();
-  const appId = searchParams.get("appId");
-  const [userDashboard] = useContext(ApplicationsContext);
+  const [userDashboard, , , appId] = useContext(ApplicationsContext);
 
   const appType = useMemo(() => {
     const group = userDashboard.find((group) =>
@@ -23,5 +20,5 @@ export default function Page() {
     return applicationList.find((app) => app.name === appType)?.component;
   }, [appType]);
 
-  return Component ? <Component /> : <BaseApp />;
+  return Component ? <Component key={appId} /> : <BaseApp />;
 }