feat: Add user-specific data fetching and initialization

- Added getAllCompleted action to fetch all completed tasks for a user.
- Added getCompletedCount action to fetch the count of completed tasks for a user.
- Updated

src/actions/getAllCompleted.tsx

@@ -0,0 +1,9 @@
+import { prisma } from '@/lib/prisma'
+import type { User } from '@/types/prisma'
+
+export async function getAllCompleted(user: User) {
+  return prisma.completed.findMany({
+    where: { userId: user?.id },
+    include: { category: true },
+  })
+}

src/actions/getCompletedCount.tsx

@@ -0,0 +1,8 @@
+import { prisma } from '@/lib/prisma'
+import type { User } from '@/types/prisma'
+
+export async function getCompletedCount(user: User) {
+  return prisma.completed.count({
+    where: { userId: user?.id },
+  })
+}

src/app/dashboard/EditorView.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/redux/categorySlice'
 import { useAppDispatch, useAppSelector } from '@/redux/hooks'
 import { setUser } from '@/redux/userSlice'
+import type { Category, User } from '@/types/prisma'
 
 const SimpleEditor = dynamic(
   async () => import('@/app/dashboard/SimpleEditor'),
@@ -40,25 +41,19 @@ const SimpleEditor = dynamic(
   },
 )
 
-interface Props {}
+interface Props {
+  user: User
+  categories: Category[]
+}
 
-export const EditorView: React.FC<Props> = () => {
+export const EditorView: React.FC<Props> = ({ user, categories }) => {
   const dispatch = useAppDispatch()
   const editorMode = useAppSelector(selectEditorMode)
-  const currentCategory = useAppSelector(selectCurrentCategory)
+  dispatch(setUser(user))
+  dispatch(setCategories(categories))
+
   useEffect(() => {
     dispatch({ type: 'Emit/InitializeListener' })
-    const fetchUserAndCategories = async () => {
-      const user = await getLoginUser()
-      const categories = await getCategories(user.id)
-      if (categories.length === 0) {
-        const defaultCategory = await createCategory(user.id, currentCategory)
-        categories.push(defaultCategory)
-      }
-      dispatch(setUser(user))
-      dispatch(setCategories(categories))
-    }
-    fetchUserAndCategories()
   }, [])
 
   return match(editorMode)

src/app/dashboard/page.tsx

@@ -1,42 +1,45 @@
-import { auth } from '@clerk/nextjs/server'
 import dynamic from 'next/dynamic'
 import React from 'react'
 
-import { prisma } from '@/lib/prisma'
+import { createCategory } from '@/actions/createCategory'
+import { getAllCompleted } from '@/actions/getAllCompleted'
+import { getCategories } from '@/actions/getCategories'
+import { getCompletedCount } from '@/actions/getCompletedCount'
+import { getLoginUser } from '@/actions/getLoginUser'
+import { Spinner } from '@/components/Spinner'
 
 import { CompletedView } from './CompletedView'
 import { EditorView } from './EditorView'
 
 const HeatmapView = dynamic(async () => import('./HeatmapView'), {
   ssr: false,
-  loading: () => <span className="loading loading-spinner loading-lg"></span>,
+  loading: () => <Spinner />,
 })
 
 const Page = async () => {
-  const userRecord = await prisma.user.findFirst({
-    where: { clerkId: auth().userId! },
-  })
-
-  const [completedTasks, count] = await Promise.all([
-    prisma.completed.findMany({
-      where: { userId: userRecord?.id },
-      include: { category: true },
-    }),
-    prisma.completed.count({
-      where: { userId: userRecord?.id },
-    }),
+  const user = await getLoginUser()
+
+  const [completed, count, categories] = await Promise.all([
+    getAllCompleted(user),
+    getCompletedCount(user),
+    getCategories(user.id),
   ])
 
+  if (categories.length === 0) {
+    const defaultCategory = await createCategory(user.id, 'General')
+    categories.push(defaultCategory)
+  }
+
   return (
     <div className="grid min-h-screen grid-cols-1 gap-4 lg:grid-cols-2">
       <section className="h-[49vh]">
-        <EditorView />
+        <EditorView user={user} categories={categories} />
       </section>
       <section className="prose prose-xl grid h-[49vh] place-content-center rounded-md border border-neutral-content p-4">
         <h1>{count} EXP</h1>
       </section>
       <section className="prose prose-xl flex h-[48vh] flex-col items-center overflow-scroll rounded-md bg-neutral-content p-4">
-        <CompletedView completedTasks={completedTasks} />
+        <CompletedView completedTasks={completed} />
       </section>
       <section className="grid h-[48vh] place-content-center overflow-scroll rounded-md border-neutral-content p-4">
         <HeatmapView />

src/components/Spinner.tsx

@@ -0,0 +1,3 @@
+export function Spinner() {
+  return <span className="loading loading-spinner loading-lg"></span>
+}

src/redux/categorySlice.ts

@@ -12,7 +12,7 @@ export interface CategorySlice {
 
 const initialState: CategorySlice = {
   mode: 'Simple',
-  currentCategory: 'general',
+  currentCategory: '',
   currentText: '',
   categories: [],
 }