TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shared user restrictions + cleanup console logs

Browse Source
This commit is contained in:
Ishaan Dey
2024-05-07 22:40:59 -07:00
parent 9d288f580d
commit 12e8051673
12 changed files with 194 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/components/editor/sidebar/file.tsx
View File

@ -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>
)
);
}

53
frontend/components/editor/sidebar/folder.tsx
View File

@ -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>
)
);
}

47
frontend/components/editor/sidebar/index.tsx
View File

@ -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>
)
);
}