fix: remove useCallback, fixing null socket issue when reading files

# Conflicts:
#	frontend/components/editor/navbar/run.tsx

frontend/components/dashboard/index.tsx

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

frontend/components/editor/index.tsx

@@ -45,9 +45,13 @@ export default function CodeEditor({
   const { socket, setUserAndSandboxId } = useSocket();
 
   useEffect(() => {
-    // Check if socket is null, and initialize it by setting userId and sandboxId
-    if (!socket && userData.id && sandboxData.id) {
-      setUserAndSandboxId(userData.id, sandboxData.id);
+    // 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
+        setUserAndSandboxId(userData.id, sandboxData.id);
+      }
     }
   }, [socket, userData.id, sandboxData.id, setUserAndSandboxId]);
 
@@ -427,7 +431,7 @@ export default function CodeEditor({
     return () => {
       socket?.disconnect()
     }
-  }, [])
+  }, [socket])
 
   // Socket event listener effect
   useEffect(() => {
@@ -477,8 +481,7 @@ export default function CodeEditor({
       socket?.off("disableAccess", onDisableAccess)
       socket?.off("previewURL", loadPreviewURL)
     }
-    // }, []);
-  }, [terminals])
+  }, [socket, terminals, setTerminals, setFiles, toast, setDisableAccess, isOwner, loadPreviewURL]);
 
   // Helper functions for tabs:
 
@@ -488,14 +491,13 @@ export default function CodeEditor({
   const fileCache = useRef(new Map());
 
   // Debounced function to get file content
-  const debouncedGetFile = useCallback(
-    debounce((tabId, callback) => {
-      socket?.emit('getFile', tabId, callback);
-    }, 300), // 300ms debounce delay, adjust as needed
-    []
-  );
+  const debouncedGetFile = 
+  (tabId: any, callback: any) => {
+    socket?.emit('getFile', tabId, callback);
+  } // 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 }));
@@ -520,7 +522,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.");