From 9912b335728bef7c6754975590503d212262a6b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Wed, 4 Aug 2021 22:34:53 +0200
Subject: [PATCH] Use `loggedInUserData` for `Avatar` props

---
 src/Login.tsx      | 27 ++++++++++-----------------
 src/authMachine.ts |  2 +-
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/Login.tsx b/src/Login.tsx
index 032b12f2..5c617c4d 100644
--- 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">
@@ -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');
diff --git a/src/authMachine.ts b/src/authMachine.ts
index e7001347..6c09848d 100644
--- 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: {