chore: removing unnecessary code

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

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

@@ -6,6 +6,7 @@ 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
 
@@ -87,8 +88,10 @@ 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
@@ -96,7 +99,9 @@ export default async function CodePage({ params }: { params: { id: string } }) {
             sandboxData={sandboxData}
           />
         </div>
+        </TerminalProvider>
       </Room>
     </div>
+    </>
   )
 }

frontend/app/layout.tsx

@@ -6,7 +6,6 @@ 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'
 
@@ -32,9 +31,7 @@ export default function RootLayout({
           >
             <SocketProvider>
             <PreviewProvider>
-            <TerminalProvider>
             {children}
-            </TerminalProvider>
             </PreviewProvider>
             </SocketProvider>
             <Analytics />

frontend/components/dashboard/index.tsx

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

frontend/components/editor/index.tsx

@@ -1,37 +1,48 @@
 "use client"
 
 import { SetStateAction, useCallback, useEffect, useRef, useState } from "react"
-import monaco from "monaco-editor"
-import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
-import { toast } from "sonner"
+
+import { Sandbox, User, TFile, TFolder, TTab } from "@/lib/types"
+
+// Authentication
 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 { FileJson, Loader2, TerminalSquare } from "lucide-react"
+import { ImperativePanelHandle } from "react-resizable-panels"
+
+// Editor Components
 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,
@@ -41,18 +52,17 @@ export default function CodeEditor({
   sandboxData: Sandbox
 }) {
 
-  //SocketContext functions and effects
+  // Socket to the backend server
   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);
-    }
-  }, [socket, userData.id, sandboxData.id, setUserAndSandboxId]);
+    // Pass the user and sandbox ID to the socket, causing the socket to be created and to connect.
+    setUserAndSandboxId(userData.id, sandboxData.id);
+  }, []);
 
-  //Preview Button state
+  // Preview panel 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: "",
@@ -427,7 +437,7 @@ export default function CodeEditor({
     return () => {
       socket?.disconnect()
     }
-  }, [])
+  }, [socket])
 
   // Socket event listener effect
   useEffect(() => {
@@ -477,8 +487,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 +497,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 +528,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.");