Use loggedInUserData for Avatar props

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">
@@ -46,26 +46,19 @@ export const Login: React.FC = () => {
  <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 || 'Anonymous'}
  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');

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: {