diff --git a/react/src/hooks/user/useAuthenticatedUser.ts b/react/src/hooks/user/useAuthenticatedUser.ts new file mode 100644 index 00000000..46754c8e --- /dev/null +++ b/react/src/hooks/user/useAuthenticatedUser.ts @@ -0,0 +1,17 @@ +import { UseQueryResult } from 'react-query'; +import { ApiService, AuthenticatedUser } from '../../types'; +import { useGet } from '../../requests'; + +const useAuthenticatedUser = (): UseQueryResult => { + return useGet({ + endpoint: '/oauth2/userinfo?schema=openid', + key: ['username'], + apiService: ApiService.Tapis, + transform: (data) => ({ + username: data.name, + email: data.email, + }), + }); +}; + +export default useAuthenticatedUser; diff --git a/react/src/pages/MainMenu/MainMenu.tsx b/react/src/pages/MainMenu/MainMenu.tsx index fe187765..78d4b6ac 100644 --- a/react/src/pages/MainMenu/MainMenu.tsx +++ b/react/src/pages/MainMenu/MainMenu.tsx @@ -10,9 +10,15 @@ import { useNavigate } from 'react-router-dom'; import { Project } from '../../types'; import CreateMapModal from '../../components/CreateMapModal/CreateMapModal'; import useCreateProject from '../../hooks/projects/useCreateProject'; +import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser'; function MainMenu() { const { data, isLoading, error } = useProjects(); + const { + data: userData, + isLoading: isUserLoading, + error: userError, + } = useAuthenticatedUser(); const { mutate: createProject, isLoading: isCreatingProject } = useCreateProject(); const [isModalOpen, setIsModalOpen] = useState(false); @@ -51,7 +57,7 @@ function MainMenu() { }); }; - if (isLoading) { + if (isLoading || isUserLoading) { return ( <> Main Menu @@ -59,13 +65,11 @@ function MainMenu() { ); } - if (error) { - return ( - <> - Main Menu - Unable to retrieve projects. - - ); + if (error || userError) { + <> + Main Menu + Unable to retrieve projects. + ; } return ( <> @@ -85,6 +89,9 @@ function MainMenu() { onSubmit={handleCreateProject} isCreating={isCreatingProject} /> + + Welcome, {userData?.username || 'User'} + Projects diff --git a/react/src/requests.ts b/react/src/requests.ts index 16b3752e..1a56a719 100644 --- a/react/src/requests.ts +++ b/react/src/requests.ts @@ -60,6 +60,7 @@ type UseGetParams = { UseQueryOptions, 'queryKey' | 'queryFn' >; + transform?: (data: any) => ResponseType; apiService?: ApiService; }; @@ -74,28 +75,23 @@ export function useGet({ key, options = {}, apiService = ApiService.Geoapi, + transform, }: UseGetParams) { const client = axios; const state = store.getState(); const configuration = useAppConfiguration(); - const baseUrl = getBaseApiUrl(apiService, configuration); const headers = getHeaders(apiService, configuration, state.auth); /* TODO_REACT Send analytics-related params to projects endpoint only (until we use headers - again in https://tacc-main.atlassian.net/browse/WG-192) */ + again in https://tacc-main.atlassian.net/browse/WG-192) */ const getUtil = async () => { - const request = await client.get( - `${baseUrl}${endpoint}`, - - { - headers: headers, - } - ); - return request.data; + const request = await client.get(`${baseUrl}${endpoint}`, { headers }); + return transform ? transform(request.data) : request.data; }; - return useQuery(key, () => getUtil(), options); + + return useQuery(key, getUtil, options); } export function usePost({