🐛 fix: Logout button not shown on mobile view when using nextauth (lo…

…behub#3561) * 🐛 fix: logout button not shown on mobile view when using nextauth * 🧪 test: show status for signout button
bentwnghk · Aug 22, 2024 · 0c4efe4 · 0c4efe4
1 parent 7a83cf9
commit 0c4efe4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/app/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx b/src/app/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx
@@ -96,6 +96,7 @@ describe('useCategory', () => {
       expect(items.some((item) => item.key === 'docs')).toBe(true);
       expect(items.some((item) => item.key === 'feedback')).toBe(true);
       expect(items.some((item) => item.key === 'discord')).toBe(true);
+      expect(items.some((item) => item.key === 'nextauthSignout')).toBe(true);
     });
   });
 
@@ -114,6 +115,7 @@ describe('useCategory', () => {
       expect(items.some((item) => item.key === 'docs')).toBe(true);
       expect(items.some((item) => item.key === 'feedback')).toBe(true);
       expect(items.some((item) => item.key === 'discord')).toBe(true);
+      expect(items.some((item) => item.key === 'nextauthSignout')).toBe(false);
     });
   });
 

diff --git a/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx b/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx
@@ -1,5 +1,13 @@
 import { DiscordIcon } from '@lobehub/ui';
-import { Book, CircleUserRound, Database, Download, Feather, Settings2 } from 'lucide-react';
+import {
+  Book,
+  CircleUserRound,
+  Database,
+  Download,
+  Feather,
+  LogOut,
+  Settings2,
+} from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
@@ -16,12 +24,15 @@ export const useCategory = () => {
   const router = useRouter();
   const { canInstall, install } = usePWAInstall();
   const { t } = useTranslation(['common', 'setting', 'auth']);
-  const [isLogin, isLoginWithAuth, isLoginWithClerk, enableAuth] = useUserStore((s) => [
-    authSelectors.isLogin(s),
-    authSelectors.isLoginWithAuth(s),
-    authSelectors.isLoginWithClerk(s),
-    authSelectors.enabledAuth(s),
-  ]);
+  const [isLogin, isLoginWithAuth, isLoginWithClerk, enableAuth, signOut, isLoginWithNextAuth] =
+    useUserStore((s) => [
+      authSelectors.isLogin(s),
+      authSelectors.isLoginWithAuth(s),
+      authSelectors.isLoginWithClerk(s),
+      authSelectors.enabledAuth(s),
+      s.logout,
+      authSelectors.isLoginWithNextAuth(s),
+    ]);
 
   const profile: CellProps[] = [
     {
@@ -100,6 +111,15 @@ export const useCategory = () => {
     },
   ];
 
+  const nextAuthSignOut: CellProps[] = [
+    {
+      icon: LogOut,
+      key: 'nextauthSignout',
+      label: t('auth:signout'),
+      onClick: signOut,
+    },
+  ];
+
   const mainItems = [
     {
       type: 'divider',
@@ -112,6 +132,7 @@ export const useCategory = () => {
     ...(canInstall ? pwa : []),
     ...(isLogin && !isServerMode ? data : []),
     ...helps,
+    ...(enableAuth && isLoginWithNextAuth ? nextAuthSignOut : []),
   ].filter(Boolean) as CellProps[];
 
   return mainItems;

diff --git a/src/store/user/slices/auth/selectors.ts b/src/store/user/slices/auth/selectors.ts
@@ -47,4 +47,5 @@ export const authSelectors = {
   isLogin,
   isLoginWithAuth: (s: UserStore) => s.isSignedIn,
   isLoginWithClerk: (s: UserStore): boolean => (s.isSignedIn && enableClerk) || false,
+  isLoginWithNextAuth: (s: UserStore): boolean => (s.isSignedIn && !!s.enabledNextAuth) || false,
 };