Use loggedInUserData for Avatar props

statelyai · Aug 4, 2021 · 19da0fe · 19da0fe
1 parent 7460002
commit 19da0fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 19 deletions.
diff --git a/src/Login.tsx b/src/Login.tsx
@@ -17,13 +17,13 @@ import {
 } from '@chakra-ui/react';
 import { useActor } from '@xstate/react';
 import React from 'react';
-import { useAuth } from './authContext';
+import { useAuth, useLoggedInUserData } from './authContext';
 import { registryLinks } from './registryLinks';
 
 export const Login: React.FC = () => {
   const authService = useAuth();
+  const loggedInUserData = useLoggedInUserData();
   const [state] = useActor(authService);
-  const session = state.context!.client.auth.session();
 
   return (
     <Box zIndex="1" height="42" display="flex">
@@ -41,31 +41,24 @@ export const Login: React.FC = () => {
         </Button>
       )}
 
-      {state.hasTag('authorized') && (
+      {state.hasTag('authorized') && loggedInUserData && (
         <Menu closeOnSelect={true}>
           <MenuButton>
             <Avatar
               marginRight="2"
-              src={session?.user?.user_metadata?.avatar_url || ''}
-              name={
-                session?.user?.user_metadata?.full_name ||
-                session?.user?.user_metadata?.user_name
-              }
+              src={loggedInUserData.avatarUrl || undefined}
+              name={loggedInUserData.displayName || undefined}
               height="30px"
               width="30px"
             />
           </MenuButton>
           <MenuList>
-            {state.context.loggedInUserData && (
-              <MenuItem
-                as="a"
-                href={registryLinks.viewUserById(
-                  state.context.loggedInUserData.id,
-                )}
-              >
-                View Machines
-              </MenuItem>
-            )}
+            <MenuItem
+              as="a"
+              href={registryLinks.viewUserById(loggedInUserData.id)}
+            >
+              View Machines
+            </MenuItem>
             <MenuItem
               onClick={() => {
                 authService.send('SIGN_OUT');

diff --git a/src/authMachine.ts b/src/authMachine.ts
@@ -34,7 +34,7 @@ const authModel = createModel(
     client: null! as SupabaseClient,
     notifRef: null! as ActorRefFrom<typeof notifMachine>,
     sourceRef: null as SourceMachineActorRef | null,
-    loggedInUserData: null as null | LoggedInUserFragment,
+    loggedInUserData: null as LoggedInUserFragment | null,
   },
   {
     events: {