refactor(workspace): persist community and diagrams in supabase

DongDuong2001 · DongDuong2001 · commit c5892de1c373 · 2026-05-20T13:04:02.000+07:00
diff --git a/app/dashboard/community/page.tsx b/app/dashboard/community/page.tsx
@@ -4,8 +4,9 @@ import { useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { MessageSquare, X, Search, Filter } from "lucide-react"
-import { getCurrentUser } from "@/lib/features/auth"
+import { getCurrentUserAsync } from "@/lib/features/auth"
 import { getTranslations, getUserLanguage, type Language } from "@/lib/config"
+import { createClient, createDiscussion, getDiscussions } from "@/lib/database"
 
 interface Discussion {
   id: string
@@ -34,43 +35,54 @@ export default function CommunityPage() {
   const [language, setLanguage] = useState<Language>("en")
   const t = getTranslations(language)
 
-  const loadDiscussions = () => {
-    const saved = localStorage.getItem("lab68_discussions")
-    if (saved) {
-      setDiscussions(JSON.parse(saved))
-    }
+  const loadDiscussions = async () => {
+    const supabase = createClient()
+    const rows = await getDiscussions()
+    const userIds = Array.from(new Set(rows.map((row) => row.user_id).filter(Boolean)))
+    const { data: profiles } = userIds.length
+      ? await supabase.from("profiles").select("id, name, email").in("id", userIds)
+      : { data: [] }
+    const profileMap = new Map((profiles || []).map((profile) => [profile.id, profile]))
+
+    setDiscussions(
+      rows.map((row) => {
+        const profile = profileMap.get(row.user_id)
+        return {
+          id: row.id,
+          title: row.title,
+          content: row.content,
+          category: row.category || "general",
+          author: profile?.name || profile?.email || "Member",
+          authorEmail: profile?.email || "",
+          replies: row.replies || 0,
+          createdAt: row.created_at,
+        }
+      }),
+    )
   }
 
   useEffect(() => {
     setLanguage(getUserLanguage())
-    loadDiscussions()
+    void loadDiscussions()
   }, [])
 
-  const saveDiscussions = (updatedDiscussions: Discussion[]) => {
-    localStorage.setItem("lab68_discussions", JSON.stringify(updatedDiscussions))
-    setDiscussions(updatedDiscussions)
-  }
-
-  const handleCreateDiscussion = () => {
-    const user = getCurrentUser()
+  const handleCreateDiscussion = async () => {
+    const user = await getCurrentUserAsync()
     if (!user) return
 
     const finalCategory = newDiscussion.category === "custom" ? newDiscussion.customCategory : newDiscussion.category
 
     if (!newDiscussion.title || !newDiscussion.content || !finalCategory) return
 
-    const discussion: Discussion = {
-      id: Date.now().toString(),
-      title: newDiscussion.title,
-      content: newDiscussion.content,
-      category: finalCategory,
-      author: user.name,
-      authorEmail: user.email,
-      replies: 0,
-      createdAt: new Date().toISOString(),
-    }
+    await createDiscussion({
+      user_id: user.id,
+      title: newDiscussion.title.trim(),
+      content: newDiscussion.content.trim(),
+      category: finalCategory.trim(),
+      tags: [],
+    })
 
-    saveDiscussions([discussion, ...discussions])
+    await loadDiscussions()
     setNewDiscussion({ title: "", content: "", category: "", customCategory: "" })
     setShowNewDiscussionModal(false)
   }
diff --git a/app/dashboard/diagrams/[id]/page.tsx b/app/dashboard/diagrams/[id]/page.tsx
@@ -4,7 +4,7 @@ import type React from "react"
 
 import { useEffect, useState, useRef } from "react"
 import { useRouter, useParams } from "next/navigation"
-import { getCurrentUser } from "@/lib/features/auth"
+import { getCurrentUserAsync } from "@/lib/features/auth"
 import { useLanguage } from "@/lib/config"
 import {
   Save,
@@ -25,6 +25,7 @@ import {
   Type,
   Minus,
 } from "lucide-react"
+import { getDiagrams, updateDiagram, type Diagram as DBDiagram } from "@/lib/database"
 
 interface Node {
   id: string
@@ -89,6 +90,17 @@ export default function DiagramEditorPage() {
   const [connectionWidth, setConnectionWidth] = useState(2)
   const [connectionStyle, setConnectionStyle] = useState<"solid" | "dashed" | "dotted">("solid")
 
+  function toViewDiagram(row: DBDiagram) {
+    return {
+      id: row.id,
+      name: row.title,
+      description: row.description || "",
+      userId: row.user_id,
+      updatedAt: row.updated_at,
+      data: row.data || { nodes: [], connections: [] },
+    }
+  }
+
   const getConnectionHandles = (node: Node): ConnectionHandle[] => {
     return [
       { nodeId: node.id, position: "top", x: node.x + node.width / 2, y: node.y },
@@ -287,8 +299,8 @@ export default function DiagramEditorPage() {
 
   // Load diagram data on mount
   useEffect(() => {
-    queueMicrotask(() => {
-      const currentUser = getCurrentUser()
+    void (async () => {
+      const currentUser = await getCurrentUserAsync()
       if (!currentUser) {
         router.push("/login")
         return
@@ -299,17 +311,18 @@ export default function DiagramEditorPage() {
         return
       }
 
-      const allDiagrams = JSON.parse(localStorage.getItem("lab68_diagrams") || "[]")
-      const foundDiagram = allDiagrams.find((d: any) => d.id === diagramId)
+      const allDiagrams = await getDiagrams(currentUser.id)
+      const foundDiagram = allDiagrams.find((d) => d.id === diagramId)
 
-      if (!foundDiagram || foundDiagram.userId !== currentUser.id) {
+      if (!foundDiagram || foundDiagram.user_id !== currentUser.id) {
         router.push("/dashboard/diagrams")
         return
       }
 
-      setDiagram(foundDiagram)
-      setData(foundDiagram.data || { nodes: [], connections: [] })
-    })
+      const viewDiagram = toViewDiagram(foundDiagram)
+      setDiagram(viewDiagram)
+      setData((viewDiagram.data as DiagramData) || { nodes: [], connections: [] })
+    })()
   }, [diagramId, router])
 
   const getNodeAtPosition = (x: number, y: number): Node | null => {
@@ -482,20 +495,10 @@ export default function DiagramEditorPage() {
     }
   }
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (!diagram) return
-
-    const allDiagrams = JSON.parse(localStorage.getItem("lab68_diagrams") || "[]")
-    const index = allDiagrams.findIndex((d: any) => d.id === diagram.id)
-    if (index !== -1) {
-      allDiagrams[index] = {
-        ...diagram,
-        data,
-        updatedAt: new Date().toISOString(),
-      }
-      localStorage.setItem("lab68_diagrams", JSON.stringify(allDiagrams))
-      alert((t.diagrams as any).saved || "Diagram saved successfully!")
-    }
+    await updateDiagram(diagram.id, { data, updated_at: new Date().toISOString() })
+    alert((t.diagrams as any).saved || "Diagram saved successfully!")
   }
 
   const handleExportImage = () => {
diff --git a/app/dashboard/diagrams/page.tsx b/app/dashboard/diagrams/page.tsx
@@ -2,11 +2,12 @@
 
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
-import { getCurrentUser } from "@/lib/features/auth"
+import { getCurrentUserAsync } from "@/lib/features/auth"
 import { Input } from "@/components/ui/input"
 import { Plus, Edit, Trash2, Search, Filter } from "lucide-react"
 import { useLanguage } from "@/lib/config"
 import Link from "next/link"
+import { createDiagram, deleteDiagram, getDiagrams, updateDiagram, type Diagram as DBDiagram } from "@/lib/database"
 
 interface Diagram {
   id: string
@@ -21,6 +22,22 @@ interface Diagram {
   category?: string // e.g., "c4", "flowchart", "sequence", "class", "er"
 }
 
+function toViewDiagram(row: DBDiagram): Diagram {
+  const payload = row.data && typeof row.data === "object" ? row.data : {}
+  return {
+    id: row.id,
+    name: row.title,
+    description: row.description || "",
+    userId: row.user_id,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+    data: payload,
+    diagramType: row.type === "visual" ? "visual" : "text",
+    textContent: typeof payload.textContent === "string" ? payload.textContent : "",
+    category: typeof payload.category === "string" ? payload.category : undefined,
+  }
+}
+
 export default function DiagramsPage() {
   const router = useRouter()
   const { t } = useLanguage()
@@ -35,45 +52,42 @@ export default function DiagramsPage() {
   const [user, setUser] = useState<any>(null)
   const [searchQuery, setSearchQuery] = useState("")
 
-  const loadDiagrams = (userId: string) => {
-    const allDiagrams = JSON.parse(localStorage.getItem("lab68_diagrams") || "[]")
-    const userDiagrams = allDiagrams.filter((d: Diagram) => d.userId === userId)
-    setDiagrams(userDiagrams)
+  const loadDiagrams = async (userId: string) => {
+    const rows = await getDiagrams(userId)
+    setDiagrams(rows.map(toViewDiagram))
   }
 
   useEffect(() => {
-    queueMicrotask(() => {
-      const currentUser = getCurrentUser()
+    void (async () => {
+      const currentUser = await getCurrentUserAsync()
       if (!currentUser) {
         router.push("/login")
         return
       }
       setUser(currentUser)
-      loadDiagrams(currentUser.id)
-    })
+      await loadDiagrams(currentUser.id)
+    })()
   }, [router])
 
-  const handleCreateDiagram = () => {
+  const handleCreateDiagram = async () => {
     if (!newDiagram.name.trim() || !user) return
 
-    const diagram: Diagram = {
-      id: crypto.randomUUID(),
-      name: newDiagram.name,
-      description: newDiagram.description,
-      userId: user.id,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      data: newDiagram.diagramType === "visual" ? { nodes: [], connections: [] } : {},
-      diagramType: newDiagram.diagramType,
-      category: newDiagram.diagramType === "text" ? newDiagram.category : undefined,
-      textContent: newDiagram.diagramType === "text" ? getDefaultTemplate(newDiagram.category) : "",
-    }
-
-    const allDiagrams = JSON.parse(localStorage.getItem("lab68_diagrams") || "[]")
-    allDiagrams.push(diagram)
-    localStorage.setItem("lab68_diagrams", JSON.stringify(allDiagrams))
+    await createDiagram({
+      user_id: user.id,
+      title: newDiagram.name.trim(),
+      description: newDiagram.description.trim(),
+      type: newDiagram.diagramType,
+      data:
+        newDiagram.diagramType === "visual"
+          ? { nodes: [], connections: [], diagramType: "visual" }
+          : {
+              diagramType: "text",
+              category: newDiagram.category,
+              textContent: getDefaultTemplate(newDiagram.category),
+            },
+    })
 
-    setDiagrams([...diagrams, diagram])
+    await loadDiagrams(user.id)
     setNewDiagram({ name: "", description: "", diagramType: "text", category: "c4" })
     setShowCreateModal(false)
   }
@@ -177,12 +191,10 @@ Rel(banking_system, mainframe, "Uses")`,
     return templates[category] || templates.c4
   }
 
-  const handleDeleteDiagram = (id: string) => {
+  const handleDeleteDiagram = async (id: string) => {
     if (!confirm(t.diagrams.confirmDelete)) return
 
-    const allDiagrams = JSON.parse(localStorage.getItem("lab68_diagrams") || "[]")
-    const filtered = allDiagrams.filter((d: Diagram) => d.id !== id)
-    localStorage.setItem("lab68_diagrams", JSON.stringify(filtered))
+    await deleteDiagram(id)
     setDiagrams(diagrams.filter((d) => d.id !== id))
   }
 
diff --git a/app/dashboard/diagrams/text/[id]/page.tsx b/app/dashboard/diagrams/text/[id]/page.tsx
