shared with me page logic

frontend/app/(app)/dashboard/page.tsx

@@ -14,10 +14,21 @@ export default async function DashboardPage() {
   const userRes = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
   const userData = (await userRes.json()) as User
 
+  const sharedRes = await fetch(
+    `http://localhost:8787/api/sandbox/share?id=${user.id}`
+  )
+  const shared = (await sharedRes.json()) as {
+    id: string
+    name: string
+    type: "react" | "node"
+    author: string
+    sharedOn: Date
+  }[]
+
   return (
     <div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
       <Navbar userData={userData} />
-      <Dashboard sandboxes={userData.sandbox} />
+      <Dashboard sandboxes={userData.sandbox} shared={shared} />
     </div>
   )
 }

frontend/components/dashboard/index.tsx

@@ -3,28 +3,34 @@
 import CustomButton from "@/components/ui/customButton"
 import { Button } from "@/components/ui/button"
 import {
-  Clock,
   Code2,
-  Ellipsis,
   FolderDot,
-  Globe,
   HelpCircle,
   Plus,
   Settings,
   Users,
 } from "lucide-react"
 import { useState } from "react"
-import ProjectCard from "./projectCard"
 import { Sandbox } from "@/lib/types"
-import Image from "next/image"
-import ProjectCardDropdown from "./projectCard/dropdown"
 import DashboardProjects from "./projects"
 import DashboardSharedWithMe from "./shared"
 import NewProjectModal from "./newProject"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
-export default function Dashboard({ sandboxes }: { sandboxes: Sandbox[] }) {
+export default function Dashboard({
+  sandboxes,
+  shared,
+}: {
+  sandboxes: Sandbox[]
+  shared: {
+    id: string
+    name: string
+    type: "react" | "node"
+    author: string
+    sharedOn: Date
+  }[]
+}) {
   const [screen, setScreen] = useState<TScreen>("projects")
 
   const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
@@ -95,7 +101,7 @@ export default function Dashboard({ sandboxes }: { sandboxes: Sandbox[] }) {
         {screen === "projects" ? (
           <DashboardProjects sandboxes={sandboxes} />
         ) : screen === "shared" ? (
-          <DashboardSharedWithMe sandboxes={sandboxes} />
+          <DashboardSharedWithMe shared={shared} />
         ) : screen === "settings" ? null : null}
       </div>
     </>

frontend/components/dashboard/shared.tsx

@@ -14,9 +14,15 @@ import { ChevronRight } from "lucide-react"
 import Avatar from "../ui/avatar"
 
 export default function DashboardSharedWithMe({
-  sandboxes,
+  shared,
 }: {
-  sandboxes: Sandbox[]
+  shared: {
+    id: string
+    name: string
+    type: "react" | "node"
+    author: string
+    sharedOn: Date
+  }[]
 }) {
   return (
     <div className="grow p-4 flex flex-col">
@@ -32,7 +38,7 @@ export default function DashboardSharedWithMe({
             </TableRow>
           </TableHeader>
           <TableBody>
-            {sandboxes.map((sandbox) => (
+            {shared.map((sandbox) => (
               <TableRow>
                 <TableCell>
                   <div className="font-medium flex items-center">
@@ -52,11 +58,11 @@ export default function DashboardSharedWithMe({
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center">
-                    <Avatar name="Ishaan Dey" className="mr-2" />
-                    Ishaan Dey
+                    <Avatar name={sandbox.author} className="mr-2" />
+                    {sandbox.author}
                   </div>
                 </TableCell>
-                <TableCell>{new Date().toLocaleDateString()}</TableCell>
+                <TableCell>{sandbox.sharedOn.toLocaleDateString()}</TableCell>
                 <TableCell className="text-right">
                   <Button>
                     Open <ChevronRight className="w-4 h-4 ml-2" />