adding file logic

frontend/components/editor/index.tsx

@@ -23,7 +23,7 @@ import { useClerk } from "@clerk/nextjs"
 import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
 
 import { io } from "socket.io-client"
-import { processFileType } from "@/lib/utils"
+import { processFileType, validateName } from "@/lib/utils"
 import { toast } from "sonner"
 import EditorTerminal from "./terminal"
 
@@ -158,21 +158,7 @@ export default function CodeEditor({
     oldName: string,
     type: "file" | "folder"
   ) => {
-    // Validation
-    if (newName === oldName) {
-      return false
-    }
-
-    if (
-      newName.includes("/") ||
-      newName.includes("\\") ||
-      newName.includes(" ") ||
-      (type === "file" && !newName.includes(".")) ||
-      (type === "folder" && newName.includes("."))
-    ) {
-      toast.error("Invalid file name.")
-      return false
-    }
+    if (!validateName(newName, oldName, type)) return false
 
     // Action
     socket.emit("renameFile", id, newName)
@@ -189,6 +175,19 @@ export default function CodeEditor({
         files={files}
         selectFile={selectFile}
         handleRename={handleRename}
+        socket={socket}
+        addNew={(name, type) => {
+          if (type === "file") {
+            console.log("adding file")
+            setFiles((prev) => [
+              ...prev,
+              { id: `projects/${sandboxId}/${name}`, name, type: "file" },
+            ])
+          } else {
+            console.log("adding folder")
+            // setFiles(prev => [...prev, { id, name, type: "folder", children: [] }])
+          }
+        }}
       />
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel

frontend/components/editor/sidebar/index.tsx

@@ -6,11 +6,14 @@ import SidebarFolder from "./folder"
 import { TFile, TFolder, TTab } from "./types"
 import { useState } from "react"
 import New from "./new"
+import { Socket } from "socket.io-client"
 
 export default function Sidebar({
   files,
   selectFile,
   handleRename,
+  socket,
+  addNew,
 }: {
   files: (TFile | TFolder)[]
   selectFile: (tab: TTab) => void
@@ -20,6 +23,8 @@ export default function Sidebar({
     oldName: string,
     type: "file" | "folder"
   ) => boolean
+  socket: Socket
+  addNew: (name: string, type: "file" | "folder") => void
 }) {
   const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
 
@@ -73,8 +78,13 @@ export default function Sidebar({
               )}
               {creatingNew !== null ? (
                 <New
+                  socket={socket}
                   type={creatingNew}
-                  stopEditing={() => setCreatingNew(null)}
+                  stopEditing={() => {
+                    console.log("stopped editing")
+                    setCreatingNew(null)
+                  }}
+                  addNew={addNew}
                 />
               ) : null}
             </>

frontend/components/editor/sidebar/new.tsx

@@ -1,19 +1,33 @@
 "use 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,
   type,
   stopEditing,
+  addNew,
 }: {
+  socket: Socket
   type: "file" | "folder"
   stopEditing: () => void
+  addNew: (name: string, type: "file" | "folder") => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const createFile = () => {
-    console.log("Create File")
+  const createNew = () => {
+    const name = inputRef.current?.value
+    // console.log("Create:", name, type)
+
+    if (name && validateName(name, "", type)) {
+      if (type === "file") {
+        socket.emit("createFile", name)
+      }
+      addNew(name, type)
+    }
     stopEditing()
   }
 
@@ -37,13 +51,13 @@ export default function New({
       <form
         onSubmit={(e) => {
           e.preventDefault()
-          createFile()
+          createNew()
         }}
       >
         <input
           ref={inputRef}
           className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full`}
-          onBlur={() => createFile()}
+          onBlur={() => createNew()}
         />
       </form>
     </div>

frontend/lib/utils.ts

@@ -1,4 +1,5 @@
 import { type ClassValue, clsx } from "clsx"
+import { toast } from "sonner"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
@@ -18,3 +19,25 @@ export function processFileType(file: string) {
 export function decodeTerminalResponse(buffer: Buffer): string {
   return buffer.toString("utf-8")
 }
+
+export function validateName(
+  newName: string,
+  oldName: string,
+  type: "file" | "folder"
+) {
+  if (newName === oldName || newName.length === 0) {
+    return false
+  }
+
+  if (
+    newName.includes("/") ||
+    newName.includes("\\") ||
+    newName.includes(" ") ||
+    (type === "file" && !newName.includes(".")) ||
+    (type === "folder" && newName.includes("."))
+  ) {
+    toast.error("Invalid file name.")
+    return false
+  }
+  return true
+}