diff --git a/react/src/components/HeaderNavBar/HeaderNavBar.tsx b/react/src/components/HeaderNavBar/HeaderNavBar.tsx index 6b7279ce..4a50e3f4 100644 --- a/react/src/components/HeaderNavBar/HeaderNavBar.tsx +++ b/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 ; + } + + if (!isUserError) { + return ( + + {' '} + There was an error loading your username. + + ); + } return (
@@ -12,7 +45,13 @@ export const HeaderNavBar: React.FC<{ user: string }> = ({ user }) => { src="./src/assets/hazmapper-header-logo.png" alt="Hazmapper Logo" /> -
{user}
+ {userData && userData.username ? ( +
{userData.username}
+ ) : ( + + )}
); }; diff --git a/react/src/hooks/user/useAuthenticatedUser.ts b/react/src/hooks/user/useAuthenticatedUser.ts index 43067df4..d1691ca7 100644 --- a/react/src/hooks/user/useAuthenticatedUser.ts +++ b/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 = { data: T; isLoading: false; error: null; + refetch: () => void; }; // TODO remove this placeholder hook const useAuthenticatedUser = (): SuccessResult => { + 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; diff --git a/react/src/pages/MainMenu/MainMenu.tsx b/react/src/pages/MainMenu/MainMenu.tsx index bf76a721..d94283cf 100644 --- a/react/src/pages/MainMenu/MainMenu.tsx +++ b/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 ( - <> - - - - ); - } - if (userError) { - return ( - <> - - Unable to retrieve projects. - - ); - } - return (
- +
diff --git a/react/src/pages/MapProject/MapProject.tsx b/react/src/pages/MapProject/MapProject.tsx index 7130c1cd..455865c8 100644 --- a/react/src/pages/MapProject/MapProject.tsx +++ b/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 = ({ activeProject, isPublicView, }) => { - const { data: userData } = useAuthenticatedUser(); const [selectedAssetTypes, setSelectedAssetTypes] = useState( Object.keys(assetTypeOptions) ); @@ -158,7 +152,7 @@ const LoadedMapProject: React.FC = ({ return (
- +
MapTopControlBar {loading &&
loading
} diff --git a/react/src/redux/authSlice.ts b/react/src/redux/authSlice.ts index 9988eec3..6bd2dc3c 100644 --- a/react/src/redux/authSlice.ts +++ b/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);