| 21 | } |
| 22 | |
| 23 | export default function UserAvatar({ currentUser, signOut, api }: Props) { |
| 24 | const userNavigation = [ |
| 25 | { |
| 26 | label: 'Profile', |
| 27 | icon: <FiUser />, |
| 28 | onClick() { |
| 29 | setMode(Mode.Profile); |
| 30 | }, |
| 31 | }, |
| 32 | { |
| 33 | label: 'Sign out', |
| 34 | icon: <FiLogOut />, |
| 35 | onClick() { |
| 36 | signOut(); |
| 37 | }, |
| 38 | }, |
| 39 | ]; |
| 40 | const [mode, setMode] = useState(Mode.Menu); |
| 41 | return ( |
| 42 | <> |
| 43 | <Dropdown |
| 44 | button={ |
| 45 | <> |
| 46 | <span className={styles.srOnly}>Open user menu</span> |
| 47 | <Avatar |
| 48 | shadow="none" |
| 49 | src={currentUser.profileImageUrl} |
| 50 | text={currentUser.displayName} |
| 51 | /> |
| 52 | </> |
| 53 | } |
| 54 | items={userNavigation} |
| 55 | /> |
| 56 | <Modal |
| 57 | open={mode === Mode.Profile} |
| 58 | close={() => setMode(Mode.Menu)} |
| 59 | size="lg" |
| 60 | > |
| 61 | <ProfileForm |
| 62 | currentUser={currentUser} |
| 63 | api={api} |
| 64 | onSubmit={async ({ displayName }) => { |
| 65 | await api.updateProfile({ displayName }).then(() => { |
| 66 | // Potential improvement: |
| 67 | // We could improve the behavior here |
| 68 | // by updating the user information live. |
| 69 | // It is a bit time consuming because |
| 70 | // we would need to make currentUser dynamic |
| 71 | // and update user information in all threads we have. |
| 72 | // We would need to have a centralized store for users |
| 73 | // which we could manipulate. |
| 74 | window.location.reload(); |
| 75 | }); |
| 76 | setMode(Mode.Menu); |
| 77 | }} |
| 78 | onUpload={async (data: FormData, options: any) => { |
| 79 | return api.uploadAvatar(data, options).then(() => { |
| 80 | // same as in the comment above, we could make this dynamic by updating the user in the all user's list |