fix: files not loading when creating a new project

This push contains console logs at various places where the server is emitting the event and the client is receiving the event. Please remove those before merging with production.

backend/server/src/index.ts

@@ -143,6 +143,8 @@ io.on("connection", async (socket) => {
       isOwner: boolean;
     };
 
+    console.log("user:",data)
+
     if (data.isOwner) {
       isOwnerConnected = true;
       connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1;
@@ -183,6 +185,7 @@ io.on("connection", async (socket) => {
     fixPermissions();
 
     socket.emit("loaded", sandboxFiles.files);
+    console.log("files got", sandboxFiles.files)
 
     socket.on("getFile", (fileId: string, callback) => {
       console.log(fileId);

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

@@ -6,7 +6,6 @@ import { notFound, redirect } from "next/navigation"
 import Loading from "@/components/editor/loading"
 import dynamic from "next/dynamic"
 import fs from "fs"
-import { TerminalProvider } from "@/context/TerminalContext"
 
 export const revalidate = 0
 
@@ -88,10 +87,8 @@ export default async function CodePage({ params }: { params: { id: string } }) {
   }
 
   return (
-    <>
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>
-        <TerminalProvider>
         <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
         <div className="w-screen flex grow">
           <CodeEditor
@@ -99,9 +96,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
             sandboxData={sandboxData}
           />
         </div>
-        </TerminalProvider>
       </Room>
     </div>
-    </>
   )
 }

frontend/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/layout/themeProvider"
 import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
 import { Analytics } from "@vercel/analytics/react"
+import { TerminalProvider } from '@/context/TerminalContext';
 import { PreviewProvider } from "@/context/PreviewContext";
 import { SocketProvider } from '@/context/SocketContext'
 
@@ -31,7 +32,9 @@ export default function RootLayout({
           >
             <SocketProvider>
             <PreviewProvider>
+            <TerminalProvider>
             {children}
+            </TerminalProvider>
             </PreviewProvider>
             </SocketProvider>
             <Analytics />

frontend/components/dashboard/index.tsx

@@ -49,9 +49,11 @@ export default function Dashboard({
   const q = searchParams.get("q")
   const router = useRouter()
 
-  useEffect(() => { // update the dashboard to show a new project
-      router.refresh() 
-  }, [])
+  useEffect(() => {
+    // if (!sandboxes) {
+      router.refresh() // fix: update the dashboard to show the new project
+    // }
+  }, [sandboxes])
 
   return (
     <>

frontend/components/editor/index.tsx

@@ -1,48 +1,37 @@
 "use client"
 
 import { SetStateAction, useCallback, useEffect, useRef, useState } from "react"
-
-import { Sandbox, User, TFile, TFolder, TTab } from "@/lib/types"
-
-// Authentication
+import monaco from "monaco-editor"
+import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
+import { toast } from "sonner"
 import { useClerk } from "@clerk/nextjs"
 
-// Liveblocks
 import * as Y from "yjs"
 import LiveblocksProvider from "@liveblocks/yjs"
 import { MonacoBinding } from "y-monaco"
 import { Awareness } from "y-protocols/awareness"
 import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
 
-// Icons
-import { FileJson, Loader2, TerminalSquare } from "lucide-react"
-
-// Contexts
-import { PreviewProvider, usePreview } from '@/context/PreviewContext';
-import { useSocket } from "@/context/SocketContext"
-
-// External Components
-import monaco from "monaco-editor"
-import { Terminal } from "@xterm/xterm"
-import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
-import { toast } from "sonner"
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { ImperativePanelHandle } from "react-resizable-panels"
-
-// Editor Components
+import { FileJson, Loader2, TerminalSquare } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import GenerateInput from "./generate"
+import { Sandbox, User, TFile, TFolder, TTab } from "@/lib/types"
 import { addNew, processFileType, validateName, debounce } from "@/lib/utils"
 import { Cursors } from "./live/cursors"
+import { Terminal } from "@xterm/xterm"
 import DisableAccessModal from "./live/disableModal"
 import Loading from "./loading"
 import PreviewWindow from "./preview"
 import Terminals from "./terminals"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import { PreviewProvider, usePreview } from '@/context/PreviewContext';
+import { useSocket } from "@/context/SocketContext"
 
 export default function CodeEditor({
   userData,
@@ -52,17 +41,24 @@ export default function CodeEditor({
   sandboxData: Sandbox
 }) {
 
-  // Socket to the backend server
+  //SocketContext functions and effects
   const { socket, setUserAndSandboxId } = useSocket();
+
   useEffect(() => {
-    // Pass the user and sandbox ID to the socket, causing the socket to be created and to connect.
-    setUserAndSandboxId(userData.id, sandboxData.id);
-  }, []);
+    console.log('Effect triggered:', { socket, userData, sandboxData });
+    // Ensure userData.id and sandboxData.id are available before attempting to connect
+    if (userData.id && sandboxData.id) {
+      // Check if the socket is not initialized or not connected
+      if (!socket || (socket && !socket.connected)) {
+        // Initialize socket connection
+        console.log('Initializing socket...');
+        setUserAndSandboxId(userData.id, sandboxData.id);
+      }
+    }
+  }, [socket, userData.id, sandboxData.id, setUserAndSandboxId]);
 
-  // Preview panel state
+  //Preview Button state
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
-
-  // When the owner closes the project, isDisabled gets set for the other users.
   const [disableAccess, setDisableAccess] = useState({
     isDisabled: false,
     message: "",
@@ -437,7 +433,7 @@ export default function CodeEditor({
     return () => {
       socket?.disconnect()
     }
-  }, [socket])
+  }, [])
 
   // Socket event listener effect
   useEffect(() => {
@@ -449,6 +445,7 @@ export default function CodeEditor({
 
     const onLoadedEvent = (files: (TFolder | TFile)[]) => {
       setFiles(files)
+      console.log("loaded", files)
     }
 
     const onError = (message: string) => {
@@ -487,6 +484,7 @@ export default function CodeEditor({
       socket?.off("disableAccess", onDisableAccess)
       socket?.off("previewURL", loadPreviewURL)
     }
+    // }, []);
   }, [socket, terminals, setTerminals, setFiles, toast, setDisableAccess, isOwner, loadPreviewURL]);
 
   // Helper functions for tabs:
@@ -497,13 +495,14 @@ export default function CodeEditor({
   const fileCache = useRef(new Map());
 
   // Debounced function to get file content
-  const debouncedGetFile = 
-  (tabId: any, callback: any) => {
-    socket?.emit('getFile', tabId, callback);
-  } // 300ms debounce delay, adjust as needed
-
-  const selectFile = (tab: TTab) => {
+  const debouncedGetFile = useCallback(
+    debounce((tabId, callback) => {
+      socket?.emit('getFile', tabId, callback);
+    }, 300), // 300ms debounce delay, adjust as needed
+    []
+  );
 
+  const selectFile = useCallback((tab: TTab) => {
     if (tab.id === activeFileId) return;
 
     setGenerate((prev) => ({ ...prev, show: false }));
@@ -528,7 +527,7 @@ export default function CodeEditor({
 
     setEditorLanguage(processFileType(tab.name));
     setActiveFileId(tab.id);
-  };
+  }, [activeFileId, tabs, debouncedGetFile]);
 
   // Close tab and remove from tabs
   const closeTab = (id: string) => {

frontend/components/editor/navbar/index.tsx

@@ -27,7 +27,7 @@ export default function Navbar({
   const [isShareOpen, setIsShareOpen] = useState(false);
   const [isRunning, setIsRunning] = useState(false);
 
-  const isOwner = sandboxData.userId === userData.id;
+  const isOwner = sandboxData.userId === userData.id;;
 
   return (
     <>

frontend/components/editor/navbar/run.tsx

@@ -44,7 +44,7 @@ export default function RunButtonModal({
             "pip install -r requirements.txt && streamlit run main.py --server.runOnSave true"
           );
         } else {
-          createNewTerminal("yarn install && yarn dev");
+          createNewTerminal("yarn install && yarn dev"); 
         }
       } else {
         toast.error("You reached the maximum # of terminals.");