Server actions don't work in pages router (#114)

Snaacky · Dec 9, 2024 · 7fe6916 · 7fe6916
1 parent caaced0
commit 7fe6916
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 61 deletions.
diff --git a/components/buttons/LoginOrOutButton.tsx b/components/buttons/LoginOrOutButton.tsx
@@ -1,6 +1,5 @@
 import { isLogin } from '../../lib/session'
-import { useSession } from 'next-auth/react'
-import { signIn, signOut } from '../../auth'
+import { signIn, signOut, useSession } from 'next-auth/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { FC } from 'react'
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt'
@@ -11,30 +10,28 @@ const LoginOrOutButton: FC = () => {
 
   if (isLogin(session)) {
     return (
-      <form
-        action={async () => {
-          'use server'
+      <button
+        type='button'
+        className={'btn w-100 btn-outline-danger'}
+        onClick={async () => {
           await signOut()
         }}
       >
-        <button type='submit' className={'btn w-100 btn-outline-danger'}>
-          Sign out <FontAwesomeIcon icon={faSignOutAlt} />
-        </button>
-      </form>
+        Sign out <FontAwesomeIcon icon={faSignOutAlt} />
+      </button>
     )
   }
 
   return (
-    <form
-      action={async () => {
-        'use server'
+    <button
+      type='button'
+      className={'btn w-100 btn-outline-success'}
+      onClick={async () => {
         await signIn('discord')
       }}
     >
-      <button type='submit' className={'btn w-100 btn-outline-success'}>
-        <FontAwesomeIcon icon={faSignInAlt} /> Sign In
-      </button>
-    </form>
+      <FontAwesomeIcon icon={faSignInAlt} /> Sign In
+    </button>
   )
 }
 

diff --git a/lib/db/cache.ts b/lib/db/cache.ts
@@ -104,7 +104,7 @@ export async function getCache(key: string): Promise<object | object[] | null> {
 /**
  * only returns null if requested component does not exist
  */
-export function setCache(key: string, data: string | object) {
+export async function setCache(key: string, data: string | object) {
   if (typeof data === 'undefined' || data === null) {
     console.error('Updating cache', key, 'with invalid value', data)
   }

diff --git a/lib/db/db.ts b/lib/db/db.ts
@@ -1,6 +1,7 @@
 // docker run --name index-db -d -p 27017:27017 mongo
-import { MongoClient, ObjectId } from 'mongodb'
+import { MongoClient } from 'mongodb'
 import { hasOwnProperty } from '../utils'
+import { cleanId, polluteId } from './utils'
 
 const uri =
   'DATABASE_URL' in process.env
@@ -32,39 +33,6 @@ export async function exportData(isAdmin = false) {
   }
 }
 
-export function cleanId(data: Record<string, any>) {
-  if (typeof data !== 'undefined' && data !== null) {
-    if (Array.isArray(data)) {
-      return data.map((d) => cleanId(d))
-    }
-    if (hasOwnProperty(data, '_id')) {
-      data._id = (data._id as number).toString()
-    }
-    if (hasOwnProperty(data, 'lastModified')) {
-      data.lastModified = (data.lastModified as Date).toString()
-    }
-    if (hasOwnProperty(data, 'createdAt')) {
-      data.createdAt = (data.createdAt as Date).toString()
-    }
-  }
-  return data
-}
-
-export function polluteId(query: Record<string, any>) {
-  if (typeof query !== 'undefined') {
-    if (hasOwnProperty(query, '_id') && typeof query._id === 'string') {
-      query._id = new ObjectId(query._id)
-    }
-    if (
-      hasOwnProperty(query, 'lastModified') &&
-      typeof query.lastModified === 'string'
-    ) {
-      query.lastModified = new Date(query.lastModified)
-    }
-  }
-  return query
-}
-
 export async function getAll(collection: string): Promise<object[]> {
   const db = (await dbClient).db('index')
   let data = await db.collection(collection).find().toArray()

diff --git a/lib/db/utils.ts b/lib/db/utils.ts
@@ -0,0 +1,34 @@
+import { ObjectId } from 'mongodb'
+import { hasOwnProperty } from '../utils'
+
+export function cleanId(data: Record<string, any>) {
+  if (typeof data !== 'undefined' && data !== null) {
+    if (Array.isArray(data)) {
+      return data.map((d) => cleanId(d))
+    }
+    if (hasOwnProperty(data, '_id')) {
+      data._id = (data._id as number).toString()
+    }
+    if (hasOwnProperty(data, 'lastModified')) {
+      data.lastModified = (data.lastModified as Date).toString()
+    }
+    if (hasOwnProperty(data, 'createdAt')) {
+      data.createdAt = (data.createdAt as Date).toString()
+    }
+  }
+  return data
+}
+export function polluteId(query: Record<string, any>) {
+  if (typeof query !== 'undefined') {
+    if (hasOwnProperty(query, '_id') && typeof query._id === 'string') {
+      query._id = new ObjectId(query._id)
+    }
+    if (
+      hasOwnProperty(query, 'lastModified') &&
+      typeof query.lastModified === 'string'
+    ) {
+      query.lastModified = new Date(query.lastModified)
+    }
+  }
+  return query
+}
diff --git a/lib/db/views.ts b/lib/db/views.ts
@@ -1,13 +1,5 @@
-import {
-  cleanId,
-  count,
-  dbClient,
-  deleteOne,
-  find,
-  findOne,
-  getAll,
-  insert,
-} from './db'
+import { count, dbClient, deleteOne, find, findOne, getAll, insert } from './db'
+import { cleanId } from './utils'
 import { Types } from '../../types/Components'
 import { findOneTyped } from './dbTyped'