chore: format frontend code

2024-10-21 13:57:17 -06:00
parent 305939c15c
commit 3f8e27d969
64 changed files with 1405 additions and 1242 deletions
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/frontend/components/editor/sidebar/file.tsx
@ -1,18 +1,18 @@
-"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 {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { Loader2, Pencil, Trash2 } from "lucide-react";
+} from "@/components/ui/context-menu"
+import { TFile, TTab } from "@/lib/types"
+import { Loader2, Pencil, Trash2 } from "lucide-react"
+import Image from "next/image"
+import { useEffect, useRef, useState } from "react"
+import { getIconForFile } from "vscode-icons-js"

-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"

 export default function SidebarFile({
  data,
@ -22,36 +22,36 @@ export default function SidebarFile({
  movingId,
  deletingFolderId,
 }: {
-  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;
-  movingId: string;
-  deletingFolderId: string;
+  ) => boolean
+  handleDeleteFile: (file: TFile) => void
+  movingId: string
+  deletingFolderId: string
 }) {
-  const isMoving = movingId === data.id;
+  const isMoving = movingId === data.id
  const isDeleting =
-    deletingFolderId.length > 0 && data.id.startsWith(deletingFolderId);
+    deletingFolderId.length > 0 && data.id.startsWith(deletingFolderId)

-  const ref = useRef(null); // for draggable
-  const [dragging, setDragging] = useState(false);
+  const ref = useRef(null) // for draggable
+  const [dragging, setDragging] = useState(false)

-  const inputRef = useRef<HTMLInputElement>(null);
-  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`);
-  const [editing, setEditing] = useState(false);
-  const [pendingDelete, setPendingDelete] = useState(isDeleting);
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
+  const [editing, setEditing] = useState(false)
+  const [pendingDelete, setPendingDelete] = useState(isDeleting)

  useEffect(() => {
-    setPendingDelete(isDeleting);
-  }, [isDeleting]);
+    setPendingDelete(isDeleting)
+  }, [isDeleting])

  useEffect(() => {
-    const el = ref.current;
+    const el = ref.current

    if (el)
      return draggable({
@ -59,14 +59,14 @@ export default function SidebarFile({
        onDragStart: () => setDragging(true),
        onDrop: () => setDragging(false),
        getInitialData: () => ({ id: data.id }),
-      });
-  }, []);
+      })
+  }, [])

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

  const renameFile = () => {
    const renamed = handleRename(
@ -74,12 +74,12 @@ 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>
@ -88,7 +88,7 @@ export default function SidebarFile({
        disabled={pendingDelete || dragging || isMoving}
        onClick={() => {
          if (!editing && !pendingDelete && !isMoving)
-            selectFile({ ...data, saved: true });
+            selectFile({ ...data, saved: true })
        }}
        onDoubleClick={() => {
          setEditing(true)
@ -119,8 +119,8 @@ export default function SidebarFile({
        ) : (
          <form
            onSubmit={(e) => {
-              e.preventDefault();
-              renameFile();
+              e.preventDefault()
+              renameFile()
            }}
          >
            <input
@ -138,8 +138,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" />
@ -148,9 +148,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" />
@ -158,5 +158,5 @@ export default function SidebarFile({
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
-  );
+  )
 }
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/frontend/components/editor/sidebar/folder.tsx
@ -1,20 +1,20 @@
 "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 {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
 } from "@/components/ui/context-menu"
-import { ChevronRight, Loader2, Pencil, Trash2 } from "lucide-react"
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { TFile, TFolder, TTab } from "@/lib/types"
 import { cn } from "@/lib/utils"
-import { motion, AnimatePresence } from "framer-motion"
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { AnimatePresence, motion } from "framer-motion"
+import { ChevronRight, Pencil, Trash2 } from "lucide-react"
+import Image from "next/image"
+import { useEffect, useRef, useState } from "react"
+import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
+import SidebarFile from "./file"

 // Note: Renaming has not been implemented in the backend yet, so UI relating to renaming is commented out

--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@ -1,28 +1,19 @@
 "use client"

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

+import { Skeleton } from "@/components/ui/skeleton"
+import { sortFileExplorer } from "@/lib/utils"
 import {
  dropTargetForElements,
  monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import Button from "@/components/ui/customButton"
-import { Skeleton } from "@/components/ui/skeleton"
-import { sortFileExplorer } from "@/lib/utils"

 export default function Sidebar({
  sandboxData,
--- a/frontend/components/editor/sidebar/new.tsx
+++ b/frontend/components/editor/sidebar/new.tsx
@ -1,9 +1,9 @@
-"use client";
+"use client"

-import { validateName } from "@/lib/utils";
-import Image from "next/image";
-import { useEffect, useRef } from "react";
-import { Socket } from "socket.io-client";
+import { validateName } from "@/lib/utils"
+import Image from "next/image"
+import { useEffect, useRef } from "react"
+import { Socket } from "socket.io-client"

 export default function New({
  socket,
@ -11,18 +11,18 @@ export default function New({
  stopEditing,
  addNew,
 }: {
-  socket: Socket;
-  type: "file" | "folder";
-  stopEditing: () => void;
-  addNew: (name: string, type: "file" | "folder") => void;
+  socket: Socket
+  type: "file" | "folder"
+  stopEditing: () => void
+  addNew: (name: string, type: "file" | "folder") => void
 }) {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null)

  function createNew() {
-    const name = inputRef.current?.value;
+    const name = inputRef.current?.value

    if (name) {
-      const valid = validateName(name, "", type);
+      const valid = validateName(name, "", type)
      if (valid.status) {
        if (type === "file") {
          socket.emit(
@ -30,23 +30,23 @@ export default function New({
            name,
            ({ success }: { success: boolean }) => {
              if (success) {
-                addNew(name, type);
+                addNew(name, type)
              }
            }
-          );
+          )
        } else {
          socket.emit("createFolder", name, () => {
-            addNew(name, type);
-          });
+            addNew(name, type)
+          })
        }
      }
    }
-    stopEditing();
+    stopEditing()
  }

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

  return (
    <div className="w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
@ -63,8 +63,8 @@ export default function New({
      />
      <form
        onSubmit={(e) => {
-          e.preventDefault();
-          createNew();
+          e.preventDefault()
+          createNew()
        }}
      >
        <input
@ -74,5 +74,5 @@ export default function New({
        />
      </form>
    </div>
-  );
+  )
 }