fix: perform log out server action with state (#23)

* feat: sign out server action

* fix: logout action

Author: stabldev

src/actions.ts

@@ -0,0 +1,8 @@
+'use server';
+
+import { signOut } from '@/auth';
+import { SignOutParams } from 'next-auth/react';
+
+export async function signOutAction(params: SignOutParams) {
+  await signOut({ ...params });
+}

src/app/(app)/[repo]/page.tsx

@@ -22,7 +22,6 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function Page({ params }: Props) {
   const { repo: rawRepo } = await params;
   const repo = decodeURIComponent(rawRepo);
-  console.log(repo);
 
   // check if it has prefix '@'
   // otherwise call notFount

src/app/(app)/_components/header/user-dropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { signOutAction } from '@/actions';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import {
   DropdownMenu,
@@ -9,13 +10,17 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Spinner } from '@/components/ui/spinner';
 import { ExternalLink, LogOutIcon } from 'lucide-react';
 import { useSession } from 'next-auth/react';
+import { useState } from 'react';
 
 export default function UserDropdown() {
   const { data: session } = useSession();
   const { username, name, email, image } = session?.user ?? {};
 
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -40,10 +45,21 @@ export default function UserDropdown() {
           </DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="cursor-pointer">
+        <DropdownMenuItem
+          className="cursor-pointer"
+          disabled={isLoggingOut}
+          onClick={async () => {
+            setIsLoggingOut(true);
+            await signOutAction({ redirectTo: '/login' });
+          }}
+        >
           Log out
           <DropdownMenuShortcut>
-            <LogOutIcon className="size-4" />
+            {isLoggingOut ? (
+              <Spinner className="bg-foreground size-4" />
+            ) : (
+              <LogOutIcon className="size-4" />
+            )}
           </DropdownMenuShortcut>
         </DropdownMenuItem>
       </DropdownMenuContent>

src/app/(app)/new/_components/repo-list.tsx

@@ -58,7 +58,7 @@ export default function RepoList() {
   const { data: session, status } = useSession();
   const accessToken = session?.accessToken;
   const username = session?.user?.username;
-  console.log(session?.user);
+
   const [search, setSearch] = useState('');
   const debouncedSearch = useDebounce(search, 500);