Remove unnecessary logout Client Component

Since Next.js 13.4.6, calling `cookies().set()` in a Server Action invalidates the client cache: - vercel/next.js#42991 (comment) - PR vercel/next.js#51290 This means that we no longer need the Client Component, because we do not need to call router.refresh() anymore.
upleveled · Jul 1, 2023 · 529a55a · 529a55a
1 parent be1c7ca
commit 529a55a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 38 deletions.
diff --git a/app/LogoutButton.module.scss b/app/LogoutButton.module.scss
diff --git a/app/LogoutButton.tsx b/app/LogoutButton.tsx
diff --git a/app/layout.module.scss b/app/layout.module.scss
@@ -14,3 +14,16 @@
     background-color: transparent;
   }
 }
+
+.logoutButton {
+  border: 1px solid;
+  cursor: pointer;
+  background-color: white;
+  color: rgb(0, 31, 57);
+  border-radius: 5px;
+
+  &:hover {
+    background-color: rgb(0, 31, 57);
+    color: white;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,9 +4,9 @@ import { cookies } from 'next/headers';
 import Link from 'next/link';
 import { ReactNode } from 'react';
 import { getUserBySessionToken } from '../database/users';
+import { logout } from './(auth)/logout/actions';
 import { CookieBanner } from './CookieBanner';
-import style from './layout.module.scss';
-import { LogoutButton } from './LogoutButton';
+import styles from './layout.module.scss';
 
 export const robotoMono = Roboto_Mono({
   subsets: ['latin'],
@@ -35,7 +35,7 @@ export default async function RootLayout({ children }: Props) {
     <html lang="en" className={robotoMono.className}>
       <body style={{ backgroundColor: 'rgb(0, 31, 57)' }}>
         <CookieBanner />
-        <nav className={style.navigator}>
+        <nav className={styles.navigator}>
           <div>
             <Link href="/">home</Link> <Link href="/animals">animals</Link>{' '}
             <Link href="/fruits">fruits</Link>
@@ -47,7 +47,11 @@ export default async function RootLayout({ children }: Props) {
             {user ? (
               <>
                 <div>{user.username}</div>
-                <LogoutButton />
+                <form>
+                  <button className={styles.logoutButton} formAction={logout}>
+                    logout
+                  </button>
+                </form>
               </>
             ) : (
               <>