client ws connection

frontend/components/editor/index.tsx

@@ -2,7 +2,7 @@
 
 import Editor, { OnMount } from "@monaco-editor/react"
 import monaco from "monaco-editor"
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 // import theme from "./theme.json"
 
 import {
@@ -21,13 +21,50 @@ import Sidebar from "./sidebar"
 import { useClerk } from "@clerk/nextjs"
 import { TFile, TFolder } from "./sidebar/types"
 
-export default function CodeEditor({ files }: { files: (TFile | TFolder)[] }) {
+import { io } from "socket.io-client"
+
+export default function CodeEditor({
+  userId,
+  sandboxId,
+}: {
+  userId: string
+  sandboxId: string
+}) {
   // const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
 
   // const handleEditorMount: OnMount = (editor, monaco) => {
   //   editorRef.current = editor
   // }
 
+  const [files, setFiles] = useState<(TFolder | TFile)[]>([])
+
+  const socket = io(
+    `http://localhost:4000?userId=${userId}&sandboxId=${sandboxId}`
+  )
+
+  // connection/disconnection effect
+  useEffect(() => {
+    socket.connect()
+
+    return () => {
+      socket.disconnect()
+    }
+  }, [])
+
+  // event listener effect
+  useEffect(() => {
+    function onLoadedEvent(files: (TFolder | TFile)[]) {
+      setFiles(files)
+    }
+
+    socket.on("loaded", onLoadedEvent)
+
+    return () => {
+      socket.off("loaded", onLoadedEvent)
+    }
+  }, [])
+  // use the dependency array!
+
   const clerk = useClerk()
 
   const [tabs, setTabs] = useState<TFile[]>([])

frontend/components/editor/sidebar/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FilePlus, FolderPlus, Search } from "lucide-react"
+import { FilePlus, FolderPlus, Loader2, Search } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import { TFile, TFolder } from "./types"
@@ -34,15 +34,25 @@ export default function Sidebar({
         </div>
       </div>
       <div className="w-full mt-1 flex flex-col">
-        {files.map((child) =>
-          child.type === "file" ? (
-            <SidebarFile key={child.id} data={child} selectFile={selectFile} />
-          ) : (
-            <SidebarFolder
-              key={child.id}
-              data={child}
-              selectFile={selectFile}
-            />
+        {files.length === 0 ? (
+          <div className="w-full flex justify-center">
+            <Loader2 className="w-4 h-4 animate-spin" />
+          </div>
+        ) : (
+          files.map((child) =>
+            child.type === "file" ? (
+              <SidebarFile
+                key={child.id}
+                data={child}
+                selectFile={selectFile}
+              />
+            ) : (
+              <SidebarFolder
+                key={child.id}
+                data={child}
+                selectFile={selectFile}
+              />
+            )
           )
         )}
       </div>