b0426e3f94
* Create a global appMachine
* Strip authMachine of side-effects
* Replace react-bound authMachine use with XState actor use
* Fix import goof
* Register auth commands directly!
* @lf94 feedback: conver `AuthNavigationHandler` to `useAuthNavigation`
* Uh, fix signing out thank you @lf94
* Fix tsc
* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)
* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)"
This reverts commit 8dc50b6a26.
---------
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { OnboardingButtons, useDismiss, useNextClick } from '.'
|
|
import { onboardingPaths } from 'routes/Onboarding/paths'
|
|
import { useEffect, useState } from 'react'
|
|
import { useUser } from 'machines/appMachine'
|
|
|
|
export default function UserMenu() {
|
|
const user = useUser()
|
|
const dismiss = useDismiss()
|
|
const next = useNextClick(onboardingPaths.PROJECT_MENU)
|
|
const [avatarErrored, setAvatarErrored] = useState(false)
|
|
|
|
const errorOrNoImage = !user?.image || avatarErrored
|
|
const buttonDescription = errorOrNoImage ? 'the menu button' : 'your avatar'
|
|
|
|
// Set up error handling for the user's avatar image,
|
|
// so the onboarding text can be updated if it fails to load.
|
|
useEffect(() => {
|
|
const element = globalThis.document.querySelector(
|
|
'[data-testid="user-sidebar-toggle"] img'
|
|
)
|
|
|
|
const onError = () => setAvatarErrored(true)
|
|
if (element?.tagName === 'IMG') {
|
|
element?.addEventListener('error', onError)
|
|
}
|
|
return () => {
|
|
element?.removeEventListener('error', onError)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="fixed grid justify-center items-start inset-0 z-50 pointer-events-none">
|
|
<div
|
|
className={
|
|
'pointer-events-auto max-w-xl flex flex-col border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded'
|
|
}
|
|
>
|
|
<section className="flex-1">
|
|
<h2 className="text-2xl font-bold">User Menu</h2>
|
|
<p className="my-4">
|
|
Click {buttonDescription} in the upper right to open the user menu.
|
|
You can change your user-level settings, sign out, report a bug,
|
|
manage your account, request a feature, and more.
|
|
</p>
|
|
<p className="my-4">
|
|
Many settings can be set either a user or per-project level. User
|
|
settings will apply to all projects, while project settings will
|
|
only apply to the current project.
|
|
</p>
|
|
</section>
|
|
<OnboardingButtons
|
|
currentSlug={onboardingPaths.USER_MENU}
|
|
dismiss={dismiss}
|
|
next={next}
|
|
nextText="Next: Project Menu"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|