Merge branch 'master' into task/WG-74-react-map-modal

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;

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,21 +57,19 @@ function MainMenu() {
     });
   };
 
-  if (isLoading) {
+ 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 (
     <>
@@ -85,6 +89,9 @@ function MainMenu() {
         onSubmit={handleCreateProject}
         isCreating={isCreatingProject}
       />
+      <InlineMessage type="success">
+        Welcome, {userData?.username || 'User'}
+      </InlineMessage>
 
       <table>
         <thead>Projects</thead>

react/src/requests.ts

@@ -60,6 +60,7 @@ type UseGetParams<ResponseType> = {
     UseQueryOptions<ResponseType, AxiosError>,
     'queryKey' | 'queryFn'
   >;
+  transform?: (data: any) => ResponseType;
   apiService?: ApiService;
 };
 
@@ -74,28 +75,23 @@ 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);
 }
 
 export function usePost<RequestType, ResponseType>({