refactor: use swr

package.json

@@ -34,6 +34,7 @@
     "remark-gfm": "^4.0.0",
     "sonner": "^1.7.3",
     "sqlocal": "^0.13.0",
+    "swr": "^2.3.0",
     "uuid": "^11.0.5",
     "virtua": "^0.39.3"
   },

src/hooks/use-character.ts

@@ -0,0 +1,18 @@
+import { eq } from 'drizzle-orm'
+import useSWR from 'swr'
+
+import { db } from '../db'
+import { charactersTable } from '../db/schema'
+
+export const useCharacter = (uuid: string) => {
+  const { data, isLoading } = useSWR('/db/characters', async () => db
+    .select()
+    .from(charactersTable)
+    .where(eq(charactersTable.id, uuid))
+    .get())
+
+  return {
+    character: data,
+    isLoading,
+  }
+}

src/pages/room/[uuid]/index.tsx

@@ -1,35 +1,18 @@
 import { Flex } from '@radix-ui/themes'
-import { eq } from 'drizzle-orm'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { Header } from '../../../components/header'
 import { InputArea } from '../../../components/input-area'
 import { Messages } from '../../../components/messages'
 import { useSetMessages } from '../../../context/messages'
-import { db } from '../../../db'
-import { charactersTable } from '../../../db/schema'
+import { useCharacter } from '../../../hooks/use-character'
 import { useParams } from '../../../router'
 import { loadCharacterCard } from '../../../utils/ccv3/load'
 
 const Room = () => {
   const { uuid } = useParams('/room/:uuid')
-  const [character, setCharacter] = useState<typeof charactersTable.$inferSelect | undefined>()
   const setMessages = useSetMessages()
-
-  useEffect(() => {
-    const getCharacter = async () => {
-      const character = await db
-        .select()
-        .from(charactersTable)
-        .where(eq(charactersTable.id, uuid))
-        .get()
-
-      if (character)
-        setCharacter(character)
-    }
-
-    void getCharacter()
-  }, [uuid])
+  const { character } = useCharacter(uuid)
 
   useEffect(() => {
     if (character)