sharing logic

frontend/components/editor/index.tsx

@@ -30,12 +30,13 @@ import { processFileType, validateName } from "@/lib/utils"
 import { toast } from "sonner"
 import EditorTerminal from "./terminal"
 import { Button } from "../ui/button"
+import { User } from "@/lib/types"
 
 export default function CodeEditor({
-  userId,
+  userData,
   sandboxId,
 }: {
-  userId: string
+  userData: User
   sandboxId: string
 }) {
   const clerk = useClerk()
@@ -54,7 +55,7 @@ export default function CodeEditor({
   const [terminals, setTerminals] = useState<string[]>([])
 
   const socket = io(
-    `http://localhost:4000?userId=${userId}&sandboxId=${sandboxId}`
+    `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxId}`
   )
 
   useEffect(() => {

frontend/components/editor/navbar/index.tsx

@@ -14,9 +14,14 @@ import ShareSandboxModal from "./share"
 export default function Navbar({
   userData,
   sandboxData,
+  shared,
 }: {
   userData: User
   sandboxData: Sandbox
+  shared: {
+    id: string
+    name: string
+  }[]
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false)
   const [isShareOpen, setIsShareOpen] = useState(false)
@@ -32,6 +37,7 @@ export default function Navbar({
         open={isShareOpen}
         setOpen={setIsShareOpen}
         data={sandboxData}
+        shared={shared}
       />
       <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
         <div className="flex items-center space-x-4">

frontend/components/editor/navbar/share.tsx

@@ -30,8 +30,8 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Loader2, UserPlus, X } from "lucide-react"
-import { useState, useTransition } from "react"
-import { Sandbox } from "@/lib/types"
+import { useEffect, useState, useTransition } from "react"
+import { Sandbox, User } from "@/lib/types"
 import { Button } from "@/components/ui/button"
 import Avatar from "@/components/ui/avatar"
 import { shareSandbox } from "@/lib/actions"
@@ -45,10 +45,15 @@ export default function ShareSandboxModal({
   open,
   setOpen,
   data,
+  shared,
 }: {
   open: boolean
   setOpen: (open: boolean) => void
   data: Sandbox
+  shared: {
+    id: string
+    name: string
+  }[]
 }) {
   const [loading, setLoading] = useState(false)
 
@@ -60,17 +65,12 @@ export default function ShareSandboxModal({
   })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    // if (!user.isSignedIn) return
-    // const sandboxData = { type: selected, userId: user.user.id, ...values }
-    // setLoading(true)
-    // const id = await createSandbox(sandboxData)
-
-    console.log(values)
-
     setLoading(true)
     const res = await shareSandbox(data.id, values.email)
-    if (!res) {
-      toast.error("Failed to share.")
+    if (!res.success) {
+      toast.error(res.message)
+    } else {
+      toast.success("Shared successfully.")
     }
 
     setLoading(false)
@@ -121,15 +121,17 @@ export default function ShareSandboxModal({
             <DialogTitle>Manage Access</DialogTitle>
           </DialogHeader>
           <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <Avatar name="Ishaan Dey" className="mr-2" />
-                Ishaan Dey
+            {shared.map((user) => (
+              <div key={user.id} className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Avatar name={user.name} className="mr-2" />
+                  {user.name}
+                </div>
+                <Button variant="ghost" size="smIcon">
+                  <X className="w-4 h-4" />
+                </Button>
               </div>
-              <Button variant="ghost" size="smIcon">
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
+            ))}
           </div>
         </div>
       </DialogContent>