Replace GQL with Prisma

src/components/Header.astro

@@ -1,6 +1,4 @@
 ---
-import { gql } from '@/graphql/__generated__/client/index.js'
-import { getApolloClient } from '@/graphql/apolloClientSSR.js'
 import { Image, Picture } from 'astro:assets'
 import * as m from '../paraglide/messages.js'
 
@@ -12,29 +10,18 @@ import DropdownItem from './header/DropdownItem.astro'
 import Toggler from './header/Toggler.astro'
 import NavButton from './header/NavButton.astro'
 import LoginNav from './header/LoginNav.astro'
+import prismaClient from 'utils/prisma-client.js'
 
-const headerQuery = gql(`
-    query HeaderInfo {
-      banner: config(name: "banner") {
-        value
-      }
-      bannerPosition: config(name: "banner-position") {
-        value
-      }
-    }
-  `)
-
-const client = await getApolloClient()
-const { data: headerInfo } = await client.query({ query: headerQuery })
-const { banner, bannerPosition } = headerInfo
+const { value: bannerId } = (await prismaClient.config.findUnique({ where: { name: 'banner' } })) ?? {}
+const { value: bannerPosition } = (await prismaClient.config.findUnique({ where: { name: 'banner-position' } })) ?? {}
 ---
 
 <header class='relative'>
   <div class='relative h-[150px] bg-top bg-no-repeat bg-cover'>
     <div class='absolute size-full'>
       <Picture
-        class={`size-full object-cover object-${bannerPosition?.value || 'top'}`}
-        src={`https://cdn.sittingonclouds.net/live/${banner?.value}.png`}
+        class={`size-full object-cover object-${bannerPosition || 'top'}`}
+        src={`https://cdn.sittingonclouds.net/live/${bannerId}.png`}
         alt=''
         width={2560}
         height={150}

src/components/header/LoginButton.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-import { gql } from '@/graphql/__generated__/client'
-import { useMutation } from '@apollo/client/react/hooks'
+import { useState, type FormEvent, type SyntheticEvent } from 'react'
 
 import Button from 'components/Button'
 import * as m from 'paraglide/messages.js'
@@ -16,9 +14,9 @@ const loginMutation = gql(`
 
 export default function LoginBtn() {
   const [modalOpen, setModalOpen] = useState(false)
-  const [mutate, { loading }] = useMutation(loginMutation, { client: apolloClient })
+  const [loading, setLoading] = useState(false)
 
-  const handleSubmit = (ev) => {
+  const handleSubmit = (ev: FormEvent) => {
     ev.preventDefault()
     const formData = new FormData(ev.target)
     const variables = Object.fromEntries(formData)

src/components/header/LoginNav.astro

@@ -3,10 +3,18 @@ import RegisterBtn from './RegisterButton'
 import LoginBtn from './LoginButton'
 import LogoutBtn from './LogoutButton'
 
-const { user } = Astro.locals
+const session = Astro.locals.session
 ---
 
 <div class='absolute top-0 right-0 space-x-2 mr-10'>
-  {!user ? <LoginBtn client:only='react' /> : <LogoutBtn client:only='react' />}
-  {!user ? <RegisterBtn client:only='react' /> : null}
+  {
+    session ? (
+      <LogoutBtn client:only='react' />
+    ) : (
+      <>
+        <LoginBtn client:only='react' />
+        <RegisterBtn client:only='react' />
+      </>
+    )
+  }
 </div>

src/components/header/LogoutButton.tsx

@@ -1,34 +1,23 @@
-import { gql } from '@/graphql/__generated__/client'
-import { useMutation } from '@apollo/client/react/hooks'
+// import toast from 'react-hot-toast'
 
 import Button from 'components/Button'
 import * as m from 'paraglide/messages.js'
-import apolloClient from '@/graphql/apolloClient'
-import toast from 'react-hot-toast'
-
-const loginMutation = gql(`
-  mutation Logout {
-    logout
-  }
-`)
 
 export default function LogoutBtn() {
-  const [mutate, { loading }] = useMutation(loginMutation, { client: apolloClient })
-
-  const handleSubmit = (ev) => {
+  const handleClick = (ev) => {
     ev.preventDefault()
 
-    mutate()
+    /* mutate()
       .then(() => {
         window.refresh()
       })
       .catch((err) => {
         toast.error(err.message)
-      })
+      }) */
   }
 
   return (
-    <Button className='rounded-t-none' loading={loading} onClick={handleSubmit}>
+    <Button className='rounded-t-none' onClick={handleClick}>
       {m.logout()}
     </Button>
   )

src/components/header/RegisterButton.tsx

@@ -1,36 +1,26 @@
 import { useState } from 'react'
-import { gql } from '@/graphql/__generated__/client'
-import { useMutation } from '@apollo/client/react/hooks'
+// import toast from 'react-hot-toast'
 
-import Button from 'components/Button'
 import * as m from 'paraglide/messages.js'
+import Button from 'components/Button'
 import Modal from 'components/Modal'
-import apolloClient from '@/graphql/apolloClient'
-import toast from 'react-hot-toast'
-
-const registerMutation = gql(`
-  mutation Register($username: String!, $email: String!, $pfp: File) {
-    registerUser(username: $username, email: $email, pfp: $pfp)
-  }
-`)
 
 export default function RegisterBtn() {
   const [modalOpen, setModalOpen] = useState(false)
-  const [mutate, { loading }] = useMutation(registerMutation, { client: apolloClient, ignoreResults: true })
 
   const handleSubmit = (ev) => {
     ev.preventDefault()
     const formData = new FormData(ev.target)
     const variables = Object.fromEntries(formData)
 
-    mutate({ variables })
+    /*     mutate({ variables })
       .then(() => {
         toast.success(m.emailSuccess())
         setModalOpen(false)
       })
       .catch((err) => {
         toast.error(err.message)
-      })
+      }) */
   }
 
   return (
@@ -70,9 +60,9 @@ export default function RegisterBtn() {
             </div>
             <div className='bg-zinc-200 px-4 py-3 text-right gap-x-2 flex justify-end'>
               <Button className='bg-zinc-500 hover:bg-zinc-600'>{m.close()}</Button>
-              <Button loading={loading} disabled={loading}>
+              {/*      <Button loading={loading} disabled={loading}>
                 {m.register()}
-              </Button>
+              </Button> */}
             </div>
           </form>
         </Modal>