Merge pull request #221 from CBIIT/amattu2/CRDCDH-621

CRDCDH-621 Restore current URL on login
CBIIT · Nov 22, 2023 · 67e8c11 · 67e8c11
2 parents d758e66 + fcda9f6
commit 67e8c11
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/src/components/Header/HeaderTabletAndMobile.tsx b/src/components/Header/HeaderTabletAndMobile.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { NavLink, Link, useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import Logo from "./components/LogoMobile";
 import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';
@@ -171,10 +171,12 @@ const Header = () => {
   const navbarMobileList: NavbarMobileList = navMobileListHookResult[0];
   const setNavbarMobileList = navMobileListHookResult[1];
   const [showLogoutAlert, setShowLogoutAlert] = useState<boolean>(false);
+  const [restorePath, setRestorePath] = useState<string>(null);
 
   const authData = useAuthContext();
   const displayName = authData?.user?.firstName || "N/A";
   const navigate = useNavigate();
+  const location = useLocation();
 
   const handleLogout = async () => {
     const logoutStatus = await authData.logout();
@@ -236,6 +238,15 @@ const Header = () => {
     setNavbarMobileList(navbarSublists[clickTitle]);
   };
 
+  useEffect(() => {
+    if (!location?.pathname || location?.pathname === "/") {
+      setRestorePath(null);
+      return;
+    }
+
+    setRestorePath(location?.pathname);
+  }, [location]);
+
   return (
     <>
       <GenericAlert open={showLogoutAlert}>
@@ -401,15 +412,13 @@ const Header = () => {
                   >
                     {displayName}
                   </div>
-                )
-                  : (
-                    <Link id="navbar-link-login" to="/login">
-                      <div role="button" tabIndex={0} className="navMobileItem" onKeyDown={(e) => { if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}>
-                        Login
-                      </div>
-                    </Link>
-
-                  )) : null}
+                ) : (
+                  <Link id="navbar-link-login" to="/login" state={{ redirectURLOnLoginSuccess: restorePath }}>
+                    <div role="button" tabIndex={0} className="navMobileItem" onKeyDown={(e) => { if (e.key === "Enter") { setNavMobileDisplay('none'); } }} onClick={() => setNavMobileDisplay('none')}>
+                      Login
+                    </div>
+                  </Link>
+                )) : null}
             </div>
           </div>
           <div

diff --git a/src/components/Header/components/NavbarDesktop.tsx b/src/components/Header/components/NavbarDesktop.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { NavLink, Link, useNavigate } from 'react-router-dom';
+import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom';
 import { Button } from '@mui/material';
 import styled from 'styled-components';
 import { useAuthContext } from '../../Contexts/AuthContext';
@@ -376,8 +376,11 @@ const NavBar = () => {
   const clickableTitle = clickableObject.map((item) => item.name);
   const navigate = useNavigate();
   const authData = useAuthContext();
+  const location = useLocation();
   const displayName = authData?.user?.firstName?.toUpperCase() || "N/A";
   const [showLogoutAlert, setShowLogoutAlert] = useState<boolean>(false);
+  const [restorePath, setRestorePath] = useState<string>(null);
+
   clickableTitle.push(displayName);
 
   useOutsideAlerter(dropdownSelection, nameDropdownSelection);
@@ -432,6 +435,16 @@ const NavBar = () => {
   useEffect(() => {
     setClickedTitle("");
   }, []);
+
+  useEffect(() => {
+    if (!location?.pathname || location?.pathname === "/") {
+      setRestorePath(null);
+      return;
+    }
+
+    setRestorePath(location?.pathname);
+  }, [location]);
+
   return (
     <Nav>
       <GenericAlert open={showLogoutAlert}>
@@ -499,9 +512,8 @@ const NavBar = () => {
                   </div>
                 </div>
               </LiSection>
-            )
-            : (
-              <StyledLoginLink id="header-navbar-login-button" to="/login">
+            ) : (
+              <StyledLoginLink id="header-navbar-login-button" to="/login" state={{ redirectURLOnLoginSuccess: restorePath }}>
                 Login
               </StyledLoginLink>
             )}

diff --git a/src/config/globalHeaderData.tsx b/src/config/globalHeaderData.tsx
@@ -51,10 +51,12 @@ export const navbarSublists = {
   //     className: 'navMobileSubTitle',
   //   },
   // ],
+  //
+  // To make it a link, the className has to be navMobileSubItem
   "Model Navigator": DataCommons.map((dc) => ({
     name: `${dc.name} Model`,
     link: `/model-navigator/${dc.name}`,
     text: '',
-    className: 'navMobileSubTitle',
+    className: 'navMobileSubItem',
   })),
 };