sharing logic

frontend/app/(app)/code/[id]/page.tsx

@@ -1,5 +1,5 @@
 import Navbar from "@/components/editor/navbar"
-import { Sandbox, User } from "@/lib/types"
+import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
 import { redirect } from "next/navigation"
@@ -20,6 +20,20 @@ const getSandboxData = async (id: string) => {
   return sandboxData
 }
 
+const getSharedUsers = async (usersToSandboxes: UsersToSandboxes[]) => {
+  const shared = await Promise.all(
+    usersToSandboxes.map(async (user) => {
+      const userRes = await fetch(
+        `http://localhost:8787/api/user?id=${user.userId}`
+      )
+      const userData: User = await userRes.json()
+      return { id: userData.id, name: userData.name }
+    })
+  )
+
+  return shared
+}
+
 export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
   const sandboxId = params.id
@@ -30,12 +44,13 @@ export default async function CodePage({ params }: { params: { id: string } }) {
 
   const userData = await getUserData(user.id)
   const sandboxData = await getSandboxData(sandboxId)
+  const shared = await getSharedUsers(sandboxData.usersToSandboxes)
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <Navbar userData={userData} sandboxData={sandboxData} />
+      <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
       <div className="w-screen flex grow">
-        <CodeEditor userId={user.id} sandboxId={sandboxId} />
+        <CodeEditor userData={userData} sandboxId={sandboxId} />
       </div>
     </div>
   )