CRDCDH-621 Restore current URL on login

CBIIT · Nov 21, 2023 · 91cbdd4 · 91cbdd4
1 parent e7b8e53
commit 91cbdd4
Show file tree

Hide file tree

Showing 2 changed files with 37 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';
@@ -148,7 +148,7 @@ const MenuArea = styled.div`
     .clickable {
         cursor: pointer;
     }
-    
+
     .action {
         cursor: pointer;
     }
@@ -169,10 +169,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();
@@ -228,6 +230,15 @@ const Header = () => {
     setNavbarMobileList(navbarSublists[clickTitle]);
   };
 
+  useEffect(() => {
+    if (!location?.pathname || location?.pathname === "/") {
+      setRestorePath(null);
+      return;
+    }
+
+    setRestorePath(location?.pathname);
+  }, [location]);
+
   return (
     <>
       <GenericAlert open={showLogoutAlert}>
@@ -393,15 +404,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';
@@ -374,8 +374,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);
@@ -430,6 +433,16 @@ const NavBar = () => {
   useEffect(() => {
     setClickedTitle("");
   }, []);
+
+  useEffect(() => {
+    if (!location?.pathname || location?.pathname === "/") {
+      setRestorePath(null);
+      return;
+    }
+
+    setRestorePath(location?.pathname);
+  }, [location]);
+
   return (
     <Nav>
       <GenericAlert open={showLogoutAlert}>
@@ -497,9 +510,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>
             )}