adding file logic

This commit is contained in:
Ishaan Dey
2024-04-29 00:50:25 -04:00
parent 3b9aa900c8
commit bce9d11b3b
12 changed files with 208 additions and 44 deletions

View File

@ -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}
</>

View File

@ -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>