Skip to content
This repository has been archived by the owner on Feb 25, 2024. It is now read-only.

Use loggedInUserData for Avatar props #149

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Use loggedInUserData for Avatar props #149

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
19da0fe
Use `loggedInUserData` for `Avatar` props
Andarist Aug 4, 2021
e6f8bd9
Merge branch 'dev' of github.com:statelyai/xstate-viz into andarist/u…
mattpocock Sep 1, 2021
fc254bd
Merge branch 'dev' into andarist/use-logged-in-user-data
davidkpiano Jan 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 11 additions & 18 deletions src/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}
Comment on lines +52 to +53
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've checked the implementation of Avatar.

  1. src is not required - "initials" are rendered if you don't provide src
  2. initials require name though - if it's not provided a default icon is used instead

I would actually probably prefer using a fallback icon at all times, wdyt?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fallback icon is fine 👍

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');
Expand Down
2 changes: 1 addition & 1 deletion src/authMachine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down