shared user restrictions + cleanup console logs

2024-05-07 22:40:59 -07:00
parent 9d288f580d
commit 12e8051673
12 changed files with 194 additions and 174 deletions
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -88,7 +88,6 @@ export default function CodeEditor({
  const clerk = useClerk();
  const room = useRoom();
  const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
-  console.log("activeTerminal", activeTerminal ? activeTerminal.id : "none");

  // const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
  const [editorRef, setEditorRef] =
@ -270,9 +269,6 @@ export default function CodeEditor({
      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();

-        // const activeTab = tabs.find((t) => t.id === activeFileId)
-        // console.log("saving:", activeTab?.name, editorRef?.getValue())
-
        setTabs((prev) =>
          prev.map((tab) =>
            tab.id === activeFileId ? { ...tab, saved: true } : tab
@ -367,7 +363,11 @@ export default function CodeEditor({
      createTerminal();
    };

-    const onDisconnect = () => {};
+    const onDisconnect = () => {
+      console.log("disconnected");
+
+      closeAllTerminals();
+    };

    const onLoadedEvent = (files: (TFolder | TFile)[]) => {
      setFiles(files);
@ -385,11 +385,19 @@ export default function CodeEditor({
      if (term && term.terminal) term.terminal.write(res);
    };

+    const onDisableAccess = (message: string) => {
+      setDisableAccess({
+        isDisabled: true,
+        message,
+      });
+    };
+
    socket.on("connect", onConnect);
    socket.on("disconnect", onDisconnect);
    socket.on("loaded", onLoadedEvent);
    socket.on("rateLimit", onRateLimit);
    socket.on("terminalResponse", onTerminalResponse);
+    socket.on("disableAccess", onDisableAccess);

    return () => {
      socket.off("connect", onConnect);
@ -397,6 +405,7 @@ export default function CodeEditor({
      socket.off("loaded", onLoadedEvent);
      socket.off("rateLimit", onRateLimit);
      socket.off("terminalResponse", onTerminalResponse);
+      socket.off("disableAccess", onDisableAccess);
    };
  }, []);

@ -492,6 +501,13 @@ export default function CodeEditor({
    });
  };

+  const closeAllTerminals = () => {
+    terminals.forEach((term) => {
+      socket.emit("closeTerminal", term.id, () => {}); // no need to wait for response here
+      setTerminals((prev) => prev.filter((t) => t.id !== term.id));
+    });
+  };
+
  const handleRename = (
    id: string,
    newName: string,
--- a/frontend/components/editor/live/disableModal.tsx
+++ b/frontend/components/editor/live/disableModal.tsx
@ -9,7 +9,15 @@ import {
  DialogTrigger,
 } from "@/components/ui/dialog";

-import { ChevronRight, FileStack, Globe, TextCursor } from "lucide-react";
+import {
+  ChevronRight,
+  FileStack,
+  Globe,
+  Loader2,
+  TextCursor,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";

 export default function DisableAccessModal({
  open,
@ -20,13 +28,30 @@ export default function DisableAccessModal({
  setOpen: (open: boolean) => void;
  message: string;
 }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (open) {
+      const timeout = setTimeout(() => {
+        router.push("/dashboard");
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, []);
+
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Live Collaboration Disabled</DialogTitle>
        </DialogHeader>
-        <div className="text-sm text-muted-foreground">{message}</div>
+        <div className="text-sm text-muted-foreground space-y-2">
+          <div>{message}</div>
+          <div className="flex items-center">
+            <Loader2 className="w-4 h-4 animate-spin mr-2" />
+            Redirecting you to dashboard...
+          </div>
+        </div>
      </DialogContent>
    </Dialog>
  );
--- a/frontend/components/editor/navbar/edit.tsx
+++ b/frontend/components/editor/navbar/edit.tsx
@ -1,4 +1,4 @@
-"use client"
+"use client";

 import {
  Dialog,
@ -7,10 +7,10 @@ import {
  DialogHeader,
  DialogTitle,
  DialogTrigger,
-} from "@/components/ui/dialog"
-import { z } from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";

 import {
  Form,
@ -20,41 +20,41 @@ import {
  FormItem,
  FormLabel,
  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from "@/components/ui/select"
-import { Loader2 } from "lucide-react"
-import { useState } from "react"
-import { Sandbox } from "@/lib/types"
-import { Button } from "@/components/ui/button"
-import { deleteSandbox, updateSandbox } from "@/lib/actions"
-import { useRouter } from "next/navigation"
-import { toast } from "sonner"
+} from "@/components/ui/select";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { Sandbox } from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import { deleteSandbox, updateSandbox } from "@/lib/actions";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";

 const formSchema = z.object({
  name: z.string().min(1).max(16),
  visibility: z.enum(["public", "private"]),
-})
+});

 export default function EditSandboxModal({
  open,
  setOpen,
  data,
 }: {
-  open: boolean
-  setOpen: (open: boolean) => void
-  data: Sandbox
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  data: Sandbox;
 }) {
-  const [loading, setLoading] = useState(false)
-  const [loadingDelete, setLoadingDelete] = useState(false)
+  const [loading, setLoading] = useState(false);
+  const [loadingDelete, setLoadingDelete] = useState(false);

-  const router = useRouter()
+  const router = useRouter();

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
@ -62,24 +62,22 @@ export default function EditSandboxModal({
      name: data.name,
      visibility: data.visibility,
    },
-  })
+  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values)
+    setLoading(true);
+    await updateSandbox({ id: data.id, ...values });

-    setLoading(true)
-    await updateSandbox({ id: data.id, ...values })
+    toast.success("Sandbox updated successfully");

-    toast.success("Sandbox updated successfully")
-
-    setLoading(false)
+    setLoading(false);
  }

  async function onDelete() {
-    setLoadingDelete(true)
-    await deleteSandbox(data.id)
+    setLoadingDelete(true);
+    await deleteSandbox(data.id);

-    router.push("/dashboard")
+    router.push("/dashboard");
  }

  return (
@ -155,5 +153,5 @@ export default function EditSandboxModal({
        </Button>
      </DialogContent>
    </Dialog>
-  )
+  );
 }
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/frontend/components/editor/sidebar/file.tsx
@ -1,16 +1,16 @@
-"use client"
+"use client";

-import Image from "next/image"
-import { getIconForFile } from "vscode-icons-js"
-import { TFile, TTab } from "@/lib/types"
-import { useEffect, useRef, useState } from "react"
+import Image from "next/image";
+import { getIconForFile } from "vscode-icons-js";
+import { TFile, TTab } from "@/lib/types";
+import { useEffect, useRef, useState } from "react";
 import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-import { Loader2, Pencil, Trash2 } from "lucide-react"
+} from "@/components/ui/context-menu";
+import { Loader2, Pencil, Trash2 } from "lucide-react";

 export default function SidebarFile({
  data,
@ -18,29 +18,26 @@ export default function SidebarFile({
  handleRename,
  handleDeleteFile,
 }: {
-  data: TFile
-  selectFile: (file: TTab) => void
+  data: TFile;
+  selectFile: (file: TTab) => void;
  handleRename: (
    id: string,
    newName: string,
    oldName: string,
    type: "file" | "folder"
-  ) => boolean
-  handleDeleteFile: (file: TFile) => void
+  ) => boolean;
+  handleDeleteFile: (file: TFile) => void;
 }) {
-  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
-  const [editing, setEditing] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [pendingDelete, setPendingDelete] = useState(false)
+  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`);
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [pendingDelete, setPendingDelete] = useState(false);

  useEffect(() => {
    if (editing) {
-      setTimeout(() => inputRef.current?.focus(), 0)
+      setTimeout(() => inputRef.current?.focus(), 0);
    }
-    if (!inputRef.current) {
-      console.log("no input ref")
-    }
-  }, [editing, inputRef.current])
+  }, [editing, inputRef.current]);

  const renameFile = () => {
    const renamed = handleRename(
@ -48,19 +45,19 @@ export default function SidebarFile({
      inputRef.current?.value ?? data.name,
      data.name,
      "file"
-    )
+    );
    if (!renamed && inputRef.current) {
-      inputRef.current.value = data.name
+      inputRef.current.value = data.name;
    }
-    setEditing(false)
-  }
+    setEditing(false);
+  };

  return (
    <ContextMenu>
      <ContextMenuTrigger
        disabled={pendingDelete}
        onClick={() => {
-          if (!editing && !pendingDelete) selectFile({ ...data, saved: true })
+          if (!editing && !pendingDelete) selectFile({ ...data, saved: true });
        }}
        // onDoubleClick={() => {
        //   setEditing(true)
@ -83,8 +80,8 @@ export default function SidebarFile({
        ) : (
          <form
            onSubmit={(e) => {
-              e.preventDefault()
-              renameFile()
+              e.preventDefault();
+              renameFile();
            }}
          >
            <input
@ -102,8 +99,8 @@ export default function SidebarFile({
      <ContextMenuContent>
        <ContextMenuItem
          onClick={() => {
-            console.log("rename")
-            setEditing(true)
+            console.log("rename");
+            setEditing(true);
          }}
        >
          <Pencil className="w-4 h-4 mr-2" />
@ -112,9 +109,9 @@ export default function SidebarFile({
        <ContextMenuItem
          disabled={pendingDelete}
          onClick={() => {
-            console.log("delete")
-            setPendingDelete(true)
-            handleDeleteFile(data)
+            console.log("delete");
+            setPendingDelete(true);
+            handleDeleteFile(data);
          }}
        >
          <Trash2 className="w-4 h-4 mr-2" />
@ -122,5 +119,5 @@ export default function SidebarFile({
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
-  )
+  );
 }
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/frontend/components/editor/sidebar/folder.tsx
@ -1,17 +1,17 @@
-"use client"
+"use client";

-import Image from "next/image"
-import { useEffect, useRef, useState } from "react"
-import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
-import { TFile, TFolder, TTab } from "@/lib/types"
-import SidebarFile from "./file"
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js";
+import { TFile, TFolder, TTab } from "@/lib/types";
+import SidebarFile from "./file";
 import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-import { Pencil, Trash2 } from "lucide-react"
+} from "@/components/ui/context-menu";
+import { Pencil, Trash2 } from "lucide-react";

 export default function SidebarFolder({
  data,
@ -20,30 +20,30 @@ export default function SidebarFolder({
  handleDeleteFile,
  handleDeleteFolder,
 }: {
-  data: TFolder
-  selectFile: (file: TTab) => void
+  data: TFolder;
+  selectFile: (file: TTab) => void;
  handleRename: (
    id: string,
    newName: string,
    oldName: string,
    type: "file" | "folder"
-  ) => boolean
-  handleDeleteFile: (file: TFile) => void
-  handleDeleteFolder: (folder: TFolder) => void
+  ) => boolean;
+  handleDeleteFile: (file: TFile) => void;
+  handleDeleteFolder: (folder: TFolder) => void;
 }) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
  const folder = isOpen
    ? getIconForOpenFolder(data.name)
-    : getIconForFolder(data.name)
+    : getIconForFolder(data.name);

-  const [editing, setEditing] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (editing) {
-      inputRef.current?.focus()
+      inputRef.current?.focus();
    }
-  }, [editing])
+  }, [editing]);

  return (
    <ContextMenu>
@ -60,9 +60,8 @@ export default function SidebarFolder({
        />
        <form
          onSubmit={(e) => {
-            e.preventDefault()
-            console.log("file renamed")
-            setEditing(false)
+            e.preventDefault();
+            setEditing(false);
          }}
        >
          <input
@ -73,8 +72,7 @@ export default function SidebarFolder({
            disabled={!editing}
            defaultValue={data.name}
            onBlur={() => {
-              console.log("file renamed")
-              setEditing(false)
+              setEditing(false);
            }}
          />
        </form>
@ -82,8 +80,7 @@ export default function SidebarFolder({
      <ContextMenuContent>
        <ContextMenuItem
          onClick={() => {
-            console.log("rename")
-            setEditing(true)
+            setEditing(true);
          }}
        >
          <Pencil className="w-4 h-4 mr-2" />
@ -92,7 +89,7 @@ export default function SidebarFolder({
        <ContextMenuItem
          // disabled={pendingDelete}
          onClick={() => {
-            console.log("delete")
+            console.log("delete");
            // setPendingDelete(true)
            // handleDeleteFile(data)
          }}
@ -129,5 +126,5 @@ export default function SidebarFolder({
        </div>
      ) : null}
    </ContextMenu>
-  )
+  );
 }
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@ -1,14 +1,14 @@
-"use client"
+"use client";

-import { FilePlus, FolderPlus, Loader2, Search, Sparkles } from "lucide-react"
-import SidebarFile from "./file"
-import SidebarFolder from "./folder"
-import { TFile, TFolder, TTab } from "@/lib/types"
-import { useState } from "react"
-import New from "./new"
-import { Socket } from "socket.io-client"
-import Button from "@/components/ui/customButton"
-import { Switch } from "@/components/ui/switch"
+import { FilePlus, FolderPlus, Loader2, Search, Sparkles } from "lucide-react";
+import SidebarFile from "./file";
+import SidebarFolder from "./folder";
+import { TFile, TFolder, TTab } from "@/lib/types";
+import { useState } from "react";
+import New from "./new";
+import { Socket } from "socket.io-client";
+import Button from "@/components/ui/customButton";
+import { Switch } from "@/components/ui/switch";

 export default function Sidebar({
  files,
@ -21,22 +21,24 @@ export default function Sidebar({
  ai,
  setAi,
 }: {
-  files: (TFile | TFolder)[]
-  selectFile: (tab: TTab) => void
+  files: (TFile | TFolder)[];
+  selectFile: (tab: TTab) => void;
  handleRename: (
    id: string,
    newName: string,
    oldName: string,
    type: "file" | "folder"
-  ) => boolean
-  handleDeleteFile: (file: TFile) => void
-  handleDeleteFolder: (folder: TFolder) => void
-  socket: Socket
-  addNew: (name: string, type: "file" | "folder") => void
-  ai: boolean
-  setAi: React.Dispatch<React.SetStateAction<boolean>>
+  ) => boolean;
+  handleDeleteFile: (file: TFile) => void;
+  handleDeleteFolder: (folder: TFolder) => void;
+  socket: Socket;
+  addNew: (name: string, type: "file" | "folder") => void;
+  ai: boolean;
+  setAi: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
-  const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
+  const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(
+    null
+  );

  return (
    <div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2">
@ -94,8 +96,7 @@ export default function Sidebar({
                  socket={socket}
                  type={creatingNew}
                  stopEditing={() => {
-                    console.log("stopped editing")
-                    setCreatingNew(null)
+                    setCreatingNew(null);
                  }}
                  addNew={addNew}
                />
@ -119,5 +120,5 @@ export default function Sidebar({
        <Switch checked={ai} onCheckedChange={setAi} />
      </div>
    </div>
-  )
+  );
 }
--- a/frontend/components/editor/terminal/index.tsx
+++ b/frontend/components/editor/terminal/index.tsx
@ -51,7 +51,6 @@ export default function EditorTerminal({
      setTerm(term);
    }
    const disposable = term.onData((data) => {
-      console.log("sending data", data);
      socket.emit("terminalData", id, data);
    });