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/components/dashboard/index.tsx

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

frontend/components/editor/index.tsx

@@ -45,11 +45,13 @@ export default function CodeEditor({
   const { socket, setUserAndSandboxId } = useSocket();
 
   useEffect(() => {
+    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);
       }
     }
@@ -431,7 +433,7 @@ export default function CodeEditor({
     return () => {
       socket?.disconnect()
     }
-  }, [socket])
+  }, [])
 
   // Socket event listener effect
   useEffect(() => {
@@ -443,6 +445,7 @@ export default function CodeEditor({
 
     const onLoadedEvent = (files: (TFolder | TFile)[]) => {
       setFiles(files)
+      console.log("loaded", files)
     }
 
     const onError = (message: string) => {
@@ -481,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:
@@ -491,13 +495,14 @@ export default function CodeEditor({
   const fileCache = useRef(new Map());
 
   // Debounced function to get file content
-  const debouncedGetFile = 
+  const debouncedGetFile = useCallback(
-  (tabId: any, callback: any) => {
+    debounce((tabId, callback) => {
-    socket?.emit('getFile', tabId, callback);
+      socket?.emit('getFile', tabId, callback);
-  } // 300ms debounce delay, adjust as needed
+    }, 300), // 300ms debounce delay, adjust as needed
-
+    []
-  const selectFile = (tab: TTab) => {
+  );
 
+  const selectFile = useCallback((tab: TTab) => {
     if (tab.id === activeFileId) return;
 
     setGenerate((prev) => ({ ...prev, show: false }));
@@ -522,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/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.");