fix: signin/signout server actions

ndom91 · Dec 17, 2023 · 85ef1d9 · 85ef1d9
1 parent b4aa7b3
commit 85ef1d9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 43 deletions.
diff --git a/src/app/auth/signin/page.jsx b/src/app/auth/signin/page.jsx
@@ -50,7 +50,7 @@ const AuthPage = async () => {
                   key={p.id}
                   action={async () => {
                     "use server"
-                    await signIn(p.id)
+                    await signIn(p.id, { redirectTo: "/" })
                   }}
                 >
                   <button

diff --git a/src/app/categories/actions.jsx b/src/app/categories/actions.jsx
@@ -20,7 +20,7 @@ const createCategory = async (userId, formData) => {
     name: formData.get("name"),
     description: formData.get("description"),
   })
-  
+
   // Return early if the form data is invalid
   if (!validatedFields.success) {
     return {
@@ -29,10 +29,6 @@ const createCategory = async (userId, formData) => {
   }
 
   try {
-    // if (categoryName.length > 190 || categoryDesc.length > 190) {
-    //   toast(toastTypes.WARNING, "Category or name too long")
-    //   return
-    // }
     const addRes = await fetch("/api/categories", {
       method: "POST",
       headers: {
@@ -44,15 +40,13 @@ const createCategory = async (userId, formData) => {
       }),
     })
     if (addRes.ok) {
-      const addData = await addRes.json()
-      // addCategory({ ...addData.data, desc: addData.data.description })
-      // setCategoryName("")
-      // setCategoryDesc("")
-      // toast(toastTypes.SUCCESS, `Successfully saved "${categoryName}"`)
+      return addRes.json()
     }
   } catch (error) {
     console.error(error)
-    // toast(toastTypes.ERROR, `Error saving ${categoryName}`)
+    return {
+      message: "Error saving new category",
+    }
   }
 }
 

diff --git a/src/components/actions.js b/src/components/actions.js
@@ -0,0 +1,7 @@
+"use server"
+
+import { signOut } from "../../auth"
+
+export const SignOutAction = async () => {
+  await signOut({ redirectTo: "/auth/signin" })
+}
diff --git a/src/components/sidebar.jsx b/src/components/sidebar.jsx
@@ -3,11 +3,11 @@
 import Link from "next/link"
 import { Menu, Transition } from "@headlessui/react"
 import { useLocalStorage } from "react-use"
-// import { useRouter } from "next/router"
-import { useSession, signOut } from "next-auth/react"
+import { useSession } from "next-auth/react"
 import { useState, useRef, Fragment } from "react"
 import { useToast, toastTypes } from "@/lib/hooks"
 import { useStore } from "@/lib/store"
+import { SignOut } from "@/components/signOut"
 
 const types = {
   CATEGORY: "category",
@@ -36,7 +36,6 @@ export default function Sidebar() {
   const toast = useToast(5000)
   const quickAddTagRef = useRef()
   const quickAddCategoryRef = useRef()
-  // const router = useRouter()
 
   const toggleQuickAdd = (type) => {
     if (type === types.CATEGORY) {
@@ -488,7 +487,7 @@ export default function Sidebar() {
                   <Menu.Item>
                     {({ active }) => (
                       <button
-                        onClick={() => router.push("/settings")}
+                        // onClick={() => router.push("/settings")}
                         className={`${
                           active ? "bg-slate-500 text-white" : "text-gray-900"
                         } group flex w-full items-center justify-start space-x-2 rounded-md px-2 py-2 text-sm`}
@@ -514,33 +513,7 @@ export default function Sidebar() {
                   </Menu.Item>
                 </div>
                 <div className="px-1 py-1">
-                  <Menu.Item>
-                    {({ active }) => (
-                      <button
-                        onClick={signOut}
-                        className={`${
-                          active ? "bg-slate-500 text-white" : "text-gray-900"
-                        } group flex w-full items-center justify-start space-x-2 rounded-md px-2 py-2 text-sm`}
-                      >
-                        <svg
-                          className={`h-5 w-5 ${active ? "text-slate-200" : "text-slate-600"}`}
-                          aria-hidden="true"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                          />
-                        </svg>
-                        <span>Logout</span>
-                      </button>
-                    )}
-                  </Menu.Item>
+                  <Menu.Item>{({ active }) => <SignOut active={active} />}</Menu.Item>
                 </div>
               </Menu.Items>
             </Transition>

diff --git a/src/components/signOut.jsx b/src/components/signOut.jsx
@@ -0,0 +1,30 @@
+import { SignOutAction } from "./actions"
+
+export function SignOut({ active }) {
+  return (
+    <form action={SignOutAction} className="w-full">
+      <button
+        className={`${
+          active ? "bg-slate-500 text-white" : "text-gray-900"
+        } group flex w-full items-center justify-start space-x-2 rounded-md px-2 py-2 text-sm`}
+      >
+        <svg
+          className={`h-5 w-5 ${active ? "text-slate-200" : "text-slate-600"}`}
+          aria-hidden="true"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          />
+        </svg>
+        <span>Logout</span>
+      </button>
+    </form>
+  )
+}