- Factors out user hook to only HeaderNavBar

- Adds refetch to hook to get username after login
- Changes auth slice to store the user to state in a way that gets picked up by userData

react/src/components/HeaderNavBar/HeaderNavBar.tsx

@@ -1,9 +1,42 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Layout } from 'antd';
+import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
+import { useNavigate } from 'react-router-dom';
+import { Button, InlineMessage, LoadingSpinner } from '@tacc/core-components';
 import styles from './HeaderNavBar.module.css';
 
-export const HeaderNavBar: React.FC<{ user: string }> = ({ user }) => {
+export const HeaderNavBar: React.FC = () => {
   const { Header } = Layout;
+  const navigate = useNavigate();
+
+  const {
+    data: userData,
+    isLoading: isUserLoading,
+    error: isUserError,
+    refetch,
+  } = useAuthenticatedUser();
+
+  const handleLogin = () => {
+    const url = `/login?to=${encodeURIComponent(location.pathname)}`;
+    navigate(url);
+  };
+
+  useEffect(() => {
+    if (userData) refetch();
+  }, [userData, refetch]);
+
+  if (isUserLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!isUserError) {
+    return (
+      <InlineMessage type="error">
+        {' '}
+        There was an error loading your username.
+      </InlineMessage>
+    );
+  }
 
   return (
     <Header className={styles.root}>
@@ -12,7 +45,13 @@ export const HeaderNavBar: React.FC<{ user: string }> = ({ user }) => {
         src="./src/assets/hazmapper-header-logo.png"
         alt="Hazmapper Logo"
       />
-      <div className={styles.userName}>{user}</div>
+      {userData && userData.username ? (
+        <div className={styles.userName}>{userData.username}</div>
+      ) : (
+        <Button type="link" className={styles.userName} onClick={handleLogin}>
+          Login
+        </Button>
+      )}
     </Header>
   );
 };

react/src/hooks/user/useAuthenticatedUser.ts

@@ -1,22 +1,28 @@
 import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
 import { AuthenticatedUser } from '@hazmapper/types';
+import { useState } from 'react';
 
 type SuccessResult<T> = {
   data: T;
   isLoading: false;
   error: null;
+  refetch: () => void;
 };
 
 // TODO remove this placeholder hook
 const useAuthenticatedUser = (): SuccessResult<AuthenticatedUser> => {
+  const [, forceRerender] = useState({});
   let username = useSelector((state: RootState) => state.auth.user?.username);
 
   if (!username) {
     username = '';
   }
+  const refetch = () => {
+    forceRerender({});
+  };
 
-  return { data: { username }, isLoading: false, error: null };
+  return { data: { username }, isLoading: false, error: null, refetch };
 };
 
 export default useAuthenticatedUser;

react/src/pages/MainMenu/MainMenu.tsx

@@ -1,37 +1,12 @@
 import React from 'react';
-import { LoadingSpinner, InlineMessage } from '@tacc/core-components';
-import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
 import ProjectListing from '@hazmapper/components/Projects/ProjectListing';
 import styles from './layout.module.css';
 import HeaderNavBar from '@hazmapper/components/HeaderNavBar';
 
 const MainMenu = () => {
-  const {
-    data: userData,
-    isLoading: isUserLoading,
-    error: userError,
-  } = useAuthenticatedUser();
-
-  if (isUserLoading) {
-    return (
-      <>
-        <HeaderNavBar user={''} />
-        <LoadingSpinner />
-      </>
-    );
-  }
-  if (userError) {
-    return (
-      <>
-        <HeaderNavBar user={''} />
-        <InlineMessage type="error">Unable to retrieve projects.</InlineMessage>
-      </>
-    );
-  }
-
   return (
     <div className={styles.root}>
-      <HeaderNavBar user={userData.username} />
+      <HeaderNavBar />
       <div className={styles.listingContainer}>
         <ProjectListing />
       </div>

react/src/pages/MapProject/MapProject.tsx

@@ -5,12 +5,7 @@ import Map from '@hazmapper/components/Map';
 import AssetsPanel from '@hazmapper/components/AssetsPanel';
 import ManageMapProjectModal from '@hazmapper/components/ManageMapProjectModal';
 import { queryPanelKey, Panel } from '@hazmapper/utils/panels';
-import {
-  useAuthenticatedUser,
-  useFeatures,
-  useProject,
-  useTileServers,
-} from '@hazmapper/hooks';
+import { useFeatures, useProject, useTileServers } from '@hazmapper/hooks';
 import { useParams } from 'react-router-dom';
 import styles from './MapProject.module.css';
 import MapProjectNavBar from '@hazmapper/components/MapProjectNavBar';
@@ -94,7 +89,6 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
   activeProject,
   isPublicView,
 }) => {
-  const { data: userData } = useAuthenticatedUser();
   const [selectedAssetTypes, setSelectedAssetTypes] = useState<string[]>(
     Object.keys(assetTypeOptions)
   );
@@ -158,7 +152,7 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
 
   return (
     <div className={styles.root}>
-      <HeaderNavBar user={userData ? userData.username : ''} />
+      <HeaderNavBar />
       <div className={styles.mapControlBar}>
         MapTopControlBar
         {loading && <div> loading</div>}

react/src/redux/authSlice.ts

@@ -17,10 +17,8 @@ const authSlice = createSlice({
       state,
       action: PayloadAction<{ user: AuthenticatedUser; authToken: AuthToken }>
     ) {
-      state = {
-        user: action.payload.user,
-        authToken: action.payload.authToken,
-      };
+      state.user = action.payload.user;
+      state.authToken = action.payload.authToken;
 
       // save to local storage
       setAuthenticatedUserFromLocalStorage(state);