From ae467ab20de766144b15c08fceb7d92401e27465 Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Thu, 31 Oct 2024 11:15:17 +1000
Subject: [PATCH] feat: updated authentication pending status (#178)

---
 .../Authentication/authentication.tsx         | 19 +++++++--
 .../authenticationMenu.styles.ts              |  4 +-
 .../AuthenticationMenu/authenticationMenu.tsx |  4 +-
 .../components/Button/button.styles.ts        |  5 ++-
 .../Layout/components/Header/header.tsx       |  2 +-
 .../SessionTimeout/sessionTimeout.tsx         |  2 +-
 src/hooks/authentication/profile/types.ts     |  1 +
 .../authentication/profile/useProfile.ts      |  8 +++-
 .../session/useSessionActive.ts               |  2 +-
 .../session/useSessionCallbackUrl.ts          | 23 ++--------
 .../session/useSessionIdleTimer.ts            | 10 +++++
 .../session/useSessionTimeout.ts              | 42 ++++++++++++++++---
 src/hooks/useRouteHistory.ts                  | 14 ++++---
 src/hooks/useRouteRoot.ts                     | 11 +++++
 src/hooks/useSessionTimeout.ts                | 40 ------------------
 .../googleSignInAuthentication/provider.tsx   |  4 +-
 .../service/service.ts                        |  2 +-
 .../nextAuthAuthentication/provider.tsx       |  4 +-
 18 files changed, 108 insertions(+), 89 deletions(-)
 create mode 100644 src/hooks/authentication/session/useSessionIdleTimer.ts
 create mode 100644 src/hooks/useRouteRoot.ts
 delete mode 100644 src/hooks/useSessionTimeout.ts

diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx
index ad0b2b03..453b595d 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx
@@ -3,11 +3,13 @@ import {
   ButtonProps as MButtonProps,
   IconButton as MIconButton,
   IconButtonProps as MIconButtonProps,
+  Skeleton,
 } from "@mui/material";
 import Router from "next/router";
 import React, { ElementType } from "react";
 import { useProfile } from "../../../../../../../../../../hooks/authentication/profile/useProfile";
 import { ROUTE } from "../../../../../../../../../../routes/constants";
+import { isNavigationLinkSelected } from "../../../Navigation/common/utils";
 import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
 import { StyledButton } from "./components/Button/button.styles";
 
@@ -22,8 +24,9 @@ export const Authentication = ({
   Button,
   closeMenu,
 }: AuthenticationProps): JSX.Element | null => {
-  const { profile } = useProfile();
+  const { isLoading, profile } = useProfile();
   if (!authenticationEnabled) return null;
+  if (isLoading) return <Skeleton height={32} variant="circular" width={32} />;
   if (profile) return <AuthenticationMenu profile={profile} />;
   return (
     <Button
@@ -38,11 +41,21 @@ export const Authentication = ({
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export function renderButton(props: MButtonProps): JSX.Element {
+export function renderButton(
+  props: MButtonProps,
+  pathname: string
+): JSX.Element {
   return (
-    <StyledButton startIcon={<LoginRoundedIcon />} variant="nav" {...props}>
+    <StyledButton
+      startIcon={<LoginRoundedIcon />}
+      variant={
+        isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav"
+      }
+      {...props}
+    >
       Sign in
     </StyledButton>
   );
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts
index 5ed149e6..5989fe9f 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import {
-  Avatar as MAvatar,
+  Avatar,
   IconButton as MIconButton,
   Menu as MMenu,
   MenuItem,
@@ -33,7 +33,7 @@ export const UserNames = styled(Typography)`
   max-width: 200px;
 `;
 
-export const Avatar = styled(MAvatar)`
+export const StyledAvatar = styled(Avatar)`
   height: 32px;
   width: 32px;
 `;
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx
index 4e61d5be..5ec10e85 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx
@@ -4,8 +4,8 @@ import { useAuth } from "../../../../../../../../../../../../providers/authentic
 import { UserProfile } from "../../../../../../../../../../../../providers/authentication/authentication/types";
 import { useMenu } from "../../../../../../../../../../../common/Menu/hooks/useMenu";
 import {
-  Avatar,
   AuthenticationMenu as Menu,
+  StyledAvatar,
   UserIcon,
   UserNames,
   UserSummary,
@@ -24,7 +24,7 @@ export const AuthenticationMenu = ({
   return (
     <Fragment>
       <UserIcon onClick={onOpen}>
-        <Avatar alt={profile.name} src={profile.image} />
+        <StyledAvatar alt={profile.name} src={profile.image} />
       </UserIcon>
       <Menu {...MENU_PROPS} anchorEl={anchorEl} onClose={onClose} open={open}>
         <UserSummary>
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts
index f06bdf7f..b6517cfe 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts
@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
+import { Button } from "@mui/material";
 
-export const StyledButton = styled(MButton)`
+export const StyledButton = styled(Button)`
+  &.MuiButton-activeNav,
   &.MuiButton-nav {
     padding: 6px 12px;
   }
diff --git a/src/components/Layout/components/Header/header.tsx b/src/components/Layout/components/Header/header.tsx
index a78d0b0b..ea4ae078 100644
--- a/src/components/Layout/components/Header/header.tsx
+++ b/src/components/Layout/components/Header/header.tsx
@@ -129,7 +129,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
                   Button={({ ...props }): JSX.Element =>
                     isIn.isMenuIn
                       ? renderAuthenticationIconButton(props)
-                      : renderAuthenticationButton(props)
+                      : renderAuthenticationButton(props, pathname)
                   }
                   authenticationEnabled={authenticationEnabled}
                   closeMenu={onClose}
diff --git a/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx b/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx
index 3b3dee65..d56ffb05 100644
--- a/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx
+++ b/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx
@@ -1,6 +1,6 @@
 import { AlertProps as MAlertProps } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
-import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
+import { useSessionTimeout } from "../../../../../hooks/authentication/session/useSessionTimeout";
 import { Banner } from "./sessionTimeout.styles";
 
 export interface SessionTimeoutProps extends Omit<MAlertProps, "title"> {
diff --git a/src/hooks/authentication/profile/types.ts b/src/hooks/authentication/profile/types.ts
index 01909283..5595432c 100644
--- a/src/hooks/authentication/profile/types.ts
+++ b/src/hooks/authentication/profile/types.ts
@@ -4,5 +4,6 @@ import {
 } from "../../../providers/authentication/authentication/types";
 
 export interface UseProfile {
+  isLoading: boolean;
   profile: Profile<UserProfile>;
 }
diff --git a/src/hooks/authentication/profile/useProfile.ts b/src/hooks/authentication/profile/useProfile.ts
index be70c0f9..17081427 100644
--- a/src/hooks/authentication/profile/useProfile.ts
+++ b/src/hooks/authentication/profile/useProfile.ts
@@ -1,3 +1,5 @@
+import { useAuth } from "../../../providers/authentication/auth/hook";
+import { AUTH_STATUS } from "../../../providers/authentication/auth/types";
 import { useAuthentication } from "../../../providers/authentication/authentication/hook";
 import { UseProfile } from "./types";
 
@@ -6,10 +8,14 @@ import { UseProfile } from "./types";
  * @returns authentication context.
  */
 export const useProfile = (): UseProfile => {
+  const {
+    authState: { status },
+  } = useAuth();
   const {
     authenticationState: { profile },
   } = useAuthentication();
   return {
-    profile,
+    isLoading: status === AUTH_STATUS.PENDING,
+    profile: profile,
   };
 };
diff --git a/src/hooks/authentication/session/useSessionActive.ts b/src/hooks/authentication/session/useSessionActive.ts
index 21b2f9e5..cd5ab692 100644
--- a/src/hooks/authentication/session/useSessionActive.ts
+++ b/src/hooks/authentication/session/useSessionActive.ts
@@ -6,7 +6,7 @@ import {
 } from "../../../providers/authentication/auth/types";
 import { ROUTE } from "../../../routes/constants";
 import { useRouteHistory } from "../../useRouteHistory";
-import { INACTIVITY_PARAM } from "../../useSessionTimeout";
+import { INACTIVITY_PARAM } from "./useSessionTimeout";
 
 export const useSessionActive = (authState: AuthState): void => {
   const { status } = authState;
diff --git a/src/hooks/authentication/session/useSessionCallbackUrl.ts b/src/hooks/authentication/session/useSessionCallbackUrl.ts
index 373dc712..91f686ec 100644
--- a/src/hooks/authentication/session/useSessionCallbackUrl.ts
+++ b/src/hooks/authentication/session/useSessionCallbackUrl.ts
@@ -1,32 +1,17 @@
-import { useRouter } from "next/router";
 import { useMemo } from "react";
-import { useConfig } from "../../useConfig";
-import { INACTIVITY_PARAM } from "../../useSessionTimeout";
+import { useRouteRoot } from "../../useRouteRoot";
+import { INACTIVITY_PARAM } from "./useSessionTimeout";
 
 export interface UseSessionCallbackUrl {
   callbackUrl: string | undefined;
 }
 
 export const useSessionCallbackUrl = (): UseSessionCallbackUrl => {
-  const {
-    config: { redirectRootToPath: path },
-  } = useConfig();
-  const { basePath } = useRouter();
-  const pathname = getPathname(basePath, path);
-  const callbackUrl = useMemo(() => getUrl(pathname), [pathname]);
+  const route = useRouteRoot();
+  const callbackUrl = useMemo(() => getUrl(route), [route]);
   return { callbackUrl };
 };
 
-/**
- * Returns the pathname.
- * @param basePath - Base path.
- * @param path - Path.
- * @returns pathname.
- */
-function getPathname(basePath: string, path: string): string {
-  return `${basePath}${path}`;
-}
-
 /**
  * Returns the URL with the inactivity query parameter set to true.
  * @param url - URL.
diff --git a/src/hooks/authentication/session/useSessionIdleTimer.ts b/src/hooks/authentication/session/useSessionIdleTimer.ts
new file mode 100644
index 00000000..6d566175
--- /dev/null
+++ b/src/hooks/authentication/session/useSessionIdleTimer.ts
@@ -0,0 +1,10 @@
+import { useIdleTimer } from "react-idle-timer";
+import { IIdleTimerProps } from "react-idle-timer/dist/types/IIdleTimerProps";
+
+/**
+ * Sets a session timeout that triggers when the user has been idle for the specified duration.
+ * @param idleTimerProps - The parameters for the session timeout.
+ */
+export const useSessionIdleTimer = (idleTimerProps: IIdleTimerProps): void => {
+  useIdleTimer(idleTimerProps);
+};
diff --git a/src/hooks/authentication/session/useSessionTimeout.ts b/src/hooks/authentication/session/useSessionTimeout.ts
index 612d3c3a..db1f75f3 100644
--- a/src/hooks/authentication/session/useSessionTimeout.ts
+++ b/src/hooks/authentication/session/useSessionTimeout.ts
@@ -1,10 +1,40 @@
-import { useIdleTimer } from "react-idle-timer";
-import { IIdleTimerProps } from "react-idle-timer/dist/types/IIdleTimerProps";
+import Router from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import { useConfig } from "../../useConfig";
+import { useLocation } from "../../useLocation";
+
+export const INACTIVITY_PARAM = "inactivityTimeout";
+
+interface UseSessionTimeout {
+  clearSessionTimeout: () => void;
+  isSessionTimeout: boolean;
+}
 
 /**
- * Sets a session timeout that triggers when the user has been idle for the specified duration.
- * @param idleTimerProps - The parameters for the session timeout.
+ * Session timeout hook.
+ * @returns flag indicating if the session has timed out.
  */
-export const useSessionTimeout = (idleTimerProps: IIdleTimerProps): void => {
-  useIdleTimer(idleTimerProps);
+export const useSessionTimeout = (): UseSessionTimeout => {
+  const {
+    config: { redirectRootToPath },
+  } = useConfig();
+  const [isSessionTimeout, setIsSessionTimeout] = useState<boolean>(false);
+  // Get the session timeout from URL parameters.
+  const { search } = useLocation() || {};
+  const sessionTimeout = search?.get(INACTIVITY_PARAM);
+
+  // Clears session timeout state.
+  const clearSessionTimeout = useCallback((): void => {
+    setIsSessionTimeout(false);
+    Router.replace(redirectRootToPath);
+  }, [redirectRootToPath]);
+
+  useEffect(() => {
+    setIsSessionTimeout(sessionTimeout === "true");
+  }, [sessionTimeout]);
+
+  return {
+    clearSessionTimeout,
+    isSessionTimeout,
+  };
 };
diff --git a/src/hooks/useRouteHistory.ts b/src/hooks/useRouteHistory.ts
index 7ebed272..e2a5aa3d 100644
--- a/src/hooks/useRouteHistory.ts
+++ b/src/hooks/useRouteHistory.ts
@@ -1,5 +1,6 @@
 import Router, { useRouter } from "next/router";
 import { useCallback, useEffect, useRef } from "react";
+import { useRouteRoot } from "./useRouteRoot";
 
 const ROUTE_CHANGE_EVENT = "routeChangeComplete";
 const MAX_HISTORY_LENGTH = 4;
@@ -14,8 +15,8 @@ export interface UseRouteHistory {
 export function useRouteHistory(
   maxHistory = MAX_HISTORY_LENGTH
 ): UseRouteHistory {
-  const { asPath, basePath } = useRouter();
-  const rootPath = basePath.trim() || "/";
+  const { asPath } = useRouter();
+  const rootPath = useRouteRoot();
   const historyRef = useRef<string[]>([asPath]);
 
   const onRouteChange = useCallback(
@@ -38,11 +39,12 @@ export function useRouteHistory(
 
   const callbackUrl = useCallback(
     (transformFn?: TransformRouteFn): string | undefined => {
-      return (
-        transformFn?.(historyRef.current) || getHistoryAt(historyRef.current, 1)
-      );
+      if (transformFn) {
+        return transformFn(historyRef.current) || rootPath;
+      }
+      return getHistoryAt(historyRef.current, 1) || rootPath;
     },
-    []
+    [rootPath]
   );
 
   const goBack = useCallback(
diff --git a/src/hooks/useRouteRoot.ts b/src/hooks/useRouteRoot.ts
new file mode 100644
index 00000000..5cae4a66
--- /dev/null
+++ b/src/hooks/useRouteRoot.ts
@@ -0,0 +1,11 @@
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import { useConfig } from "./useConfig";
+
+export function useRouteRoot(): string {
+  const {
+    config: { redirectRootToPath: path },
+  } = useConfig();
+  const { basePath } = useRouter();
+  return useMemo(() => `${basePath}${path}`, [basePath, path]);
+}
diff --git a/src/hooks/useSessionTimeout.ts b/src/hooks/useSessionTimeout.ts
deleted file mode 100644
index b87d97a3..00000000
--- a/src/hooks/useSessionTimeout.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import Router from "next/router";
-import { useCallback, useEffect, useState } from "react";
-import { useConfig } from "./useConfig";
-import { useLocation } from "./useLocation";
-
-export const INACTIVITY_PARAM = "inactivityTimeout";
-
-interface UseSessionTimeout {
-  clearSessionTimeout: () => void;
-  isSessionTimeout: boolean;
-}
-
-/**
- * Session timeout hook.
- * @returns flag indicating if the session has timed out.
- */
-export const useSessionTimeout = (): UseSessionTimeout => {
-  const {
-    config: { redirectRootToPath },
-  } = useConfig();
-  const [isSessionTimeout, setIsSessionTimeout] = useState<boolean>(false);
-  // Get the session timeout from URL parameters.
-  const { search } = useLocation() || {};
-  const sessionTimeout = search?.get(INACTIVITY_PARAM);
-
-  // Clears session timeout state.
-  const clearSessionTimeout = useCallback((): void => {
-    setIsSessionTimeout(false);
-    Router.replace(redirectRootToPath);
-  }, [redirectRootToPath]);
-
-  useEffect(() => {
-    setIsSessionTimeout(sessionTimeout === "true");
-  }, [sessionTimeout]);
-
-  return {
-    clearSessionTimeout,
-    isSessionTimeout,
-  };
-};
diff --git a/src/providers/googleSignInAuthentication/provider.tsx b/src/providers/googleSignInAuthentication/provider.tsx
index 7778ac72..565df7a1 100644
--- a/src/providers/googleSignInAuthentication/provider.tsx
+++ b/src/providers/googleSignInAuthentication/provider.tsx
@@ -5,7 +5,7 @@ import { useCredentialsReducer } from "../../hooks/authentication/credentials/us
 import { useSessionActive } from "../../hooks/authentication/session/useSessionActive";
 import { useSessionAuth } from "../../hooks/authentication/session/useSessionAuth";
 import { useSessionCallbackUrl } from "../../hooks/authentication/session/useSessionCallbackUrl";
-import { useSessionTimeout } from "../../hooks/authentication/session/useSessionTimeout";
+import { useSessionIdleTimer } from "../../hooks/authentication/session/useSessionIdleTimer";
 import { useTokenReducer } from "../../hooks/authentication/token/useTokenReducer";
 import { AuthContext } from "../authentication/auth/context";
 import { AuthenticationContext } from "../authentication/authentication/context";
@@ -32,7 +32,7 @@ export function GoogleSignInAuthenticationProvider({
   const { authDispatch, authState } = authReducer;
   const { isAuthenticated } = authState;
   useSessionActive(authState);
-  useSessionTimeout({
+  useSessionIdleTimer({
     disabled: !isAuthenticated,
     onIdle: () => service.requestLogout({ callbackUrl }),
     timeout,
diff --git a/src/providers/googleSignInAuthentication/service/service.ts b/src/providers/googleSignInAuthentication/service/service.ts
index d85c0a12..15195b30 100644
--- a/src/providers/googleSignInAuthentication/service/service.ts
+++ b/src/providers/googleSignInAuthentication/service/service.ts
@@ -27,6 +27,7 @@ export const service = {
       callback: (response: TokenSetParameters) => {
         const { id, profile, userinfo } = provider;
         const { access_token: token } = response;
+        dispatch.authenticationDispatch?.(requestAuthentication());
         dispatch.tokenDispatch?.(updateToken({ providerId: id, token }));
         fetchProfile(userinfo, getAuthenticationRequestOptions(token), {
           onError: () =>
@@ -48,7 +49,6 @@ export const service = {
       client_id: provider.clientId,
       scope: provider.authorization.params.scope,
     });
-    dispatch.authenticationDispatch?.(requestAuthentication());
     client.requestAccessToken();
   },
   logout: (dispatch: SessionDispatch): void => {
diff --git a/src/providers/nextAuthAuthentication/provider.tsx b/src/providers/nextAuthAuthentication/provider.tsx
index 15d450a2..3f37ab31 100644
--- a/src/providers/nextAuthAuthentication/provider.tsx
+++ b/src/providers/nextAuthAuthentication/provider.tsx
@@ -5,7 +5,7 @@ import { useAuthReducer } from "../../hooks/authentication/auth/useAuthReducer";
 import { useAuthenticationReducer } from "../../hooks/authentication/authentication/useAuthenticationReducer";
 import { useSessionAuth } from "../../hooks/authentication/session/useSessionAuth";
 import { useSessionCallbackUrl } from "../../hooks/authentication/session/useSessionCallbackUrl";
-import { useSessionTimeout } from "../../hooks/authentication/session/useSessionTimeout";
+import { useSessionIdleTimer } from "../../hooks/authentication/session/useSessionIdleTimer";
 import { AuthContext } from "../authentication/auth/context";
 import { AuthenticationContext } from "../authentication/authentication/context";
 import { useNextAuthService } from "./hooks/useNextAuthService";
@@ -22,7 +22,7 @@ export function NextAuthAuthenticationProvider({
   const { authDispatch, authState } = authReducer;
   const { isAuthenticated } = authState;
   const { callbackUrl } = useSessionCallbackUrl();
-  useSessionTimeout({
+  useSessionIdleTimer({
     disabled: !isAuthenticated,
     onIdle: () => {
       service.requestLogout({ callbackUrl, redirect: true });