task/WG-219: Adding GET hook for grabbing the username (#198)

* task/WG-219: Adding GET hook for grabbinig the username * added transform option to useGet hook to help with tranforming API responses * refactoring transform param --------- Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]>
TACC-Cloud · Jan 26, 2024 · 2643e39 · 2643e39
1 parent 9676baf
commit 2643e39
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 20 deletions.
diff --git a/react/src/hooks/user/useAuthenticatedUser.ts 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<AuthenticatedUser> => {
+  return useGet<AuthenticatedUser>({
+    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
@@ -5,28 +5,35 @@ import {
   SectionHeader,
 } from '../../core-components';
 import { useProjects } from '../../hooks';
+import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser';
 
 function MainMenu() {
   const { data, isLoading, error } = useProjects();
-  if (isLoading) {
+  const {
+    data: userData,
+    isLoading: isUserLoading,
+    error: userError,
+  } = useAuthenticatedUser();
+  if (isLoading || isUserLoading) {
     return (
       <>
         <SectionHeader isNestedHeader>Main Menu</SectionHeader>
         <LoadingSpinner />
       </>
     );
   }
-  if (error) {
-    return (
-      <>
-        <SectionHeader isNestedHeader>Main Menu</SectionHeader>
-        <InlineMessage type="error">Unable to retrieve projects.</InlineMessage>
-      </>
-    );
+  if (error || userError) {
+    <>
+      <SectionHeader isNestedHeader>Main Menu</SectionHeader>
+      <InlineMessage type="error">Unable to retrieve projects.</InlineMessage>
+    </>;
   }
   return (
     <>
       <SectionHeader isNestedHeader>Main Menu</SectionHeader>
+      <InlineMessage type="success">
+        Welcome, {userData?.username || 'User'}
+      </InlineMessage>
 
       <table>
         <thead>Projects</thead>

diff --git a/react/src/redux/authSlice.ts b/react/src/redux/authSlice.ts
@@ -46,7 +46,7 @@ const authSlice = createSlice({
       geoapi.endpoints.getGeoapiUserInfo.matchFulfilled,
       (state, action: PayloadAction<any>) => {
         const u: any = {
-          name: action.payload.name,
+          username: action.payload.name,
           email: action.payload.email,
         };
         state.user = u;

diff --git a/react/src/requests.ts b/react/src/requests.ts
@@ -54,6 +54,7 @@ type UseGetParams<ResponseType> = {
     UseQueryOptions<ResponseType, AxiosError>,
     'queryKey' | 'queryFn'
   >;
+  transform?: (data: any) => ResponseType;
   apiService?: ApiService;
 };
 
@@ -62,26 +63,21 @@ export function useGet<ResponseType>({
   key,
   options = {},
   apiService = ApiService.Geoapi,
+  transform,
 }: UseGetParams<ResponseType>) {
   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<ResponseType>(
-      `${baseUrl}${endpoint}`,
-
-      {
-        headers: headers,
-      }
-    );
-    return request.data;
+    const request = await client.get(`${baseUrl}${endpoint}`, { headers });
+    return transform ? transform(request.data) : request.data;
   };
-  return useQuery<ResponseType, AxiosError>(key, () => getUtil(), options);
+
+  return useQuery<ResponseType, AxiosError>(key, getUtil, options);
 }