From 2643e394ff55db1c349cb6b55cfdff525ad6aec9 Mon Sep 17 00:00:00 2001
From: Taylor Grafft <tjgrafft@me.com>
Date: Fri, 26 Jan 2024 16:04:48 -0600
Subject: [PATCH] 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 <tgrafft@wireless-10-147-45-228.public.utexas.edu>
Co-authored-by: Taylor Grafft <tgrafft@TACCs-MBP.attlocal.net>
Co-authored-by: Taylor Grafft <tgrafft@TACCs-MacBook-Pro.local>
---
 react/src/hooks/user/useAuthenticatedUser.ts | 17 +++++++++++++++
 react/src/pages/MainMenu/MainMenu.tsx        | 23 +++++++++++++-------
 react/src/redux/authSlice.ts                 |  2 +-
 react/src/requests.ts                        | 18 ++++++---------
 4 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 react/src/hooks/user/useAuthenticatedUser.ts

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<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
index 234566e1..ff22f89e 100644
--- a/react/src/pages/MainMenu/MainMenu.tsx
+++ b/react/src/pages/MainMenu/MainMenu.tsx
@@ -5,10 +5,16 @@ 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>
@@ -16,17 +22,18 @@ function MainMenu() {
       </>
     );
   }
-  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
index 532d3a5e..7df24dad 100644
--- 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
index a46fc42b..df87dc84 100644
--- 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);
 }