Add UserAvatarMenu component and update layout

This commit adds the UserAvatarMenu component to the application's components directory. It also updates the layout by replacing the AppUserProfile component with the UserAvatarMenu component.
coji · Jan 13, 2024 · d1b2e0c · d1b2e0c
1 parent 03499c5
commit d1b2e0c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 23 deletions.
diff --git a/app/components/AppUserProfile.tsx → app/components/UserAvatarMenu.tsx b/app/components/AppUserProfile.tsx → app/components/UserAvatarMenu.tsx
@@ -1,33 +1,32 @@
-import { Form, Link } from '@remix-run/react'
+import { useFetcher } from '@remix-run/react'
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '~/components/ui'
 import { useAuthUser } from '~/services/auth'
 
-export const AppUserProfile = () => {
+export const UserAvatarMenu = () => {
   const user = useAuthUser()
   const isLoading = user === undefined
 
+  const fetcher = useFetcher()
+  const handleSelectSignOut = () => {
+    fetcher.submit({}, { method: 'POST', action: '/sign_out' })
+  }
+
   if (isLoading) {
     return <div>Loading...</div>
   }
 
   if (!user) {
-    return (
-      <Form method="POST" action="/sign_in">
-        <Button variant="outline" size="sm">
-          サインイン
-        </Button>
-      </Form>
-    )
+    return <div>no user</div>
   }
 
   return (
@@ -46,12 +45,9 @@ export const AppUserProfile = () => {
           <div>{user.displayName}</div>
           <div>{user.email}</div>
         </DropdownMenuLabel>
-        <DropdownMenuItem asChild>
-          <Form method="POST" action="/sign_out">
-            <Button type="submit" variant="default" size="sm">
-              サインアウト
-            </Button>
-          </Form>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onSelect={() => handleSelectSignOut()}>
+          サインアウト
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

diff --git a/app/routes/app+/_index.tsx b/app/routes/app+/_index.tsx
@@ -74,11 +74,6 @@ export default function Index() {
         <Button disabled={navigation.state !== 'idle'}>submit</Button>
       </Form>
 
-      <div>
-        <Link to="/sign_in">サインイン</Link>
-        <Link to="/sign_out">サインアウト</Link>
-      </div>
-
       <div>
         <Table>
           <TableHeader>

diff --git a/app/routes/app+/_layout.tsx b/app/routes/app+/_layout.tsx
@@ -1,5 +1,5 @@
 import { Link, type MetaFunction, Outlet } from '@remix-run/react'
-import { AppUserProfile } from '~/components/AppUserProfile'
+import { UserAvatarMenu } from '~/components/UserAvatarMenu'
 import { authenticate, useAuthUser } from '~/services/auth'
 
 export const meta: MetaFunction = () => {
@@ -22,7 +22,7 @@ export default function AppLayout() {
           <Link to="/app">Remix SPA Example</Link>
         </h1>
         <div className="flex-1" />
-        <AppUserProfile />
+        <UserAvatarMenu />
       </header>
 
       <main className="px-2">