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

feat: add skeleton loader to file explorer

Browse Source
This commit is contained in:
Hamzat Victor 2024-10-14 12:06:54 +01:00
parent 33fc082217
commit fa5d1e9a57
3 changed files with 159 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
frontend/components/editor/index.tsx
View File

@ -36,7 +36,7 @@ import { useSocket } from "@/context/SocketContext"
import { Button } from "../ui/button" import { Button } from "../ui/button"
import React from "react" import React from "react"
import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig" import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
import { deepMerge } from "@/lib/utils" import { cn, deepMerge } from "@/lib/utils"
export default function CodeEditor({ export default function CodeEditor({
userData, userData,
@ -62,9 +62,9 @@ export default function CodeEditor({
// This heartbeat is critical to preventing the E2B sandbox from timing out // This heartbeat is critical to preventing the E2B sandbox from timing out
useEffect(() => { useEffect(() => {
// 10000 ms = 10 seconds // 10000 ms = 10 seconds
const interval = setInterval(() => socket?.emit("heartbeat"), 10000); const interval = setInterval(() => socket?.emit("heartbeat"), 10000)
return () => clearInterval(interval); return () => clearInterval(interval)
}, [socket]); }, [socket])
//Preview Button state //Preview Button state
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true) const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
@ -80,7 +80,7 @@ export default function CodeEditor({
const [activeFileContent, setActiveFileContent] = useState("") const [activeFileContent, setActiveFileContent] = useState("")
const [deletingFolderId, setDeletingFolderId] = useState("") const [deletingFolderId, setDeletingFolderId] = useState("")
// Added this state to track the most recent content for each file // Added this state to track the most recent content for each file
const [fileContents, setFileContents] = useState<Record<string, string>>({}); const [fileContents, setFileContents] = useState<Record<string, string>>({})
// Editor state // Editor state
const [editorLanguage, setEditorLanguage] = useState("plaintext") const [editorLanguage, setEditorLanguage] = useState("plaintext")
@ -416,7 +416,7 @@ export default function CodeEditor({
}) })
} }
}, [generate.show]) }, [generate.show])
// Suggestion widget effect // Suggestion widget effect
useEffect(() => { useEffect(() => {
if (!suggestionRef.current || !editorRef) return if (!suggestionRef.current || !editorRef) return
@ -462,16 +462,17 @@ export default function CodeEditor({
const model = editorRef?.getModel() const model = editorRef?.getModel()
// added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file // added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file
if (model) { if (model) {
const totalLines = model.getLineCount(); const totalLines = model.getLineCount()
// Check if the cursorLine is a valid number, If cursorLine is out of bounds, we fall back to 1 (the first line) as a default safe value. // Check if the cursorLine is a valid number, If cursorLine is out of bounds, we fall back to 1 (the first line) as a default safe value.
const lineNumber = cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1; // fallback to a valid line number const lineNumber =
cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1 // fallback to a valid line number
// If for some reason the content doesn't exist, we use an empty string as a fallback. // If for some reason the content doesn't exist, we use an empty string as a fallback.
const line = model.getLineContent(lineNumber) ?? ""; const line = model.getLineContent(lineNumber) ?? ""
// Check if the line is not empty or only whitespace (i.e., `.trim()` removes spaces). // Check if the line is not empty or only whitespace (i.e., `.trim()` removes spaces).
// If the line has content, we clear any decorations using the instance of the `decorations` object. // If the line has content, we clear any decorations using the instance of the `decorations` object.
// Decorations refer to editor highlights, underlines, or markers, so this clears those if conditions are met. // Decorations refer to editor highlights, underlines, or markers, so this clears those if conditions are met.
if (line.trim() !== "") { if (line.trim() !== "") {
decorations.instance?.clear(); decorations.instance?.clear()
return return
} }
} }
@ -497,28 +498,28 @@ export default function CodeEditor({
debounce((activeFileId: string | undefined) => { debounce((activeFileId: string | undefined) => {
if (activeFileId) { if (activeFileId) {
// Get the current content of the file // Get the current content of the file
const content = fileContents[activeFileId]; const content = fileContents[activeFileId]
// Mark the file as saved in the tabs // Mark the file as saved in the tabs
setTabs((prev) => setTabs((prev) =>
prev.map((tab) => prev.map((tab) =>
tab.id === activeFileId ? { ...tab, saved: true } : tab tab.id === activeFileId ? { ...tab, saved: true } : tab
) )
); )
console.log(`Saving file...${activeFileId}`); console.log(`Saving file...${activeFileId}`)
console.log(`Saving file...${content}`); console.log(`Saving file...${content}`)
socket?.emit("saveFile", activeFileId, content); socket?.emit("saveFile", activeFileId, content)
} }
}, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000), }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
[socket, fileContents] [socket, fileContents]
); )
// Keydown event listener to trigger file save on Ctrl+S or Cmd+S // Keydown event listener to trigger file save on Ctrl+S or Cmd+S
useEffect(() => { useEffect(() => {
const down = (e: KeyboardEvent) => { const down = (e: KeyboardEvent) => {
if (e.key === "s" && (e.metaKey || e.ctrlKey)) { if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
e.preventDefault() e.preventDefault()
debouncedSaveData(activeFileId); debouncedSaveData(activeFileId)
} }
} }
document.addEventListener("keydown", down) document.addEventListener("keydown", down)
@ -615,7 +616,7 @@ export default function CodeEditor({
// Socket event listener effect // Socket event listener effect
useEffect(() => { useEffect(() => {
const onConnect = () => { } const onConnect = () => {}
const onDisconnect = () => { const onDisconnect = () => {
setTerminals([]) setTerminals([])
@ -685,46 +686,49 @@ export default function CodeEditor({
} // 300ms debounce delay, adjust as needed } // 300ms debounce delay, adjust as needed
const selectFile = (tab: TTab) => { const selectFile = (tab: TTab) => {
if (tab.id === activeFileId) return; if (tab.id === activeFileId) return
setGenerate((prev) => ({ ...prev, show: false })); setGenerate((prev) => ({ ...prev, show: false }))
// Check if the tab already exists in the list of open tabs // Check if the tab already exists in the list of open tabs
const exists = tabs.find((t) => t.id === tab.id); const exists = tabs.find((t) => t.id === tab.id)
setTabs((prev) => { setTabs((prev) => {
if (exists) { if (exists) {
// If the tab exists, make it the active tab // If the tab exists, make it the active tab
setActiveFileId(exists.id); setActiveFileId(exists.id)
return prev; return prev
} }
// If the tab doesn't exist, add it to the list of tabs and make it active // If the tab doesn't exist, add it to the list of tabs and make it active
return [...prev, tab]; return [...prev, tab]
}); })
// If the file's content is already cached, set it as the active content // If the file's content is already cached, set it as the active content
if (fileContents[tab.id]) { if (fileContents[tab.id]) {
setActiveFileContent(fileContents[tab.id]); setActiveFileContent(fileContents[tab.id])
} else { } else {
// Otherwise, fetch the content of the file and cache it // Otherwise, fetch the content of the file and cache it
debouncedGetFile(tab.id, (response: string) => { debouncedGetFile(tab.id, (response: string) => {
setFileContents(prev => ({ ...prev, [tab.id]: response })); setFileContents((prev) => ({ ...prev, [tab.id]: response }))
setActiveFileContent(response); setActiveFileContent(response)
}); })
} }
// Set the editor language based on the file type // Set the editor language based on the file type
setEditorLanguage(processFileType(tab.name)); setEditorLanguage(processFileType(tab.name))
// Set the active file ID to the new tab // Set the active file ID to the new tab
setActiveFileId(tab.id); setActiveFileId(tab.id)
}; }
// Added this effect to update fileContents when the editor content changes // Added this effect to update fileContents when the editor content changes
useEffect(() => { useEffect(() => {
if (activeFileId) { if (activeFileId) {
// Cache the current active file content using the file ID as the key // Cache the current active file content using the file ID as the key
setFileContents(prev => ({ ...prev, [activeFileId]: activeFileContent })); setFileContents((prev) => ({
...prev,
[activeFileId]: activeFileContent,
}))
} }
}, [activeFileContent, activeFileId]); }, [activeFileContent, activeFileId])
// Close tab and remove from tabs // Close tab and remove from tabs
const closeTab = (id: string) => { const closeTab = (id: string) => {
@ -740,8 +744,8 @@ export default function CodeEditor({
? numTabs === 1 ? numTabs === 1
? null ? null
: index < numTabs - 1 : index < numTabs - 1
? tabs[index + 1].id ? tabs[index + 1].id
: tabs[index - 1].id : tabs[index - 1].id
: activeFileId : activeFileId
setTabs((prev) => prev.filter((t) => t.id !== id)) setTabs((prev) => prev.filter((t) => t.id !== id))
@ -834,7 +838,7 @@ export default function CodeEditor({
<DisableAccessModal <DisableAccessModal
message={disableAccess.message} message={disableAccess.message}
open={disableAccess.isDisabled} open={disableAccess.isDisabled}
setOpen={() => { }} setOpen={() => {}}
/> />
<Loading /> <Loading />
</> </>
@ -862,7 +866,10 @@ export default function CodeEditor({
)} )}
</AnimatePresence> </AnimatePresence>
</div> </div>
<div className="z-50 p-1" ref={generateWidgetRef}> <div
className={cn(generate.show && "z-50 p-1")}
ref={generateWidgetRef}
>
{generate.show ? ( {generate.show ? (
<GenerateInput <GenerateInput
user={userData} user={userData}
@ -873,8 +880,8 @@ export default function CodeEditor({
code: code:
(isSelected && editorRef?.getSelection() (isSelected && editorRef?.getSelection()
? editorRef ? editorRef
?.getModel() ?.getModel()
?.getValueInRange(editorRef?.getSelection()!) ?.getValueInRange(editorRef?.getSelection()!)
: editorRef?.getValue()) ?? "", : editorRef?.getValue()) ?? "",
line: generate.line, line: generate.line,
}} }}
@ -999,62 +1006,62 @@ export default function CodeEditor({
</div> </div>
</> </>
) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643 ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
clerk.loaded ? ( clerk.loaded ? (
<> <>
{provider && userInfo ? ( {provider && userInfo ? (
<Cursors yProvider={provider} userInfo={userInfo} /> <Cursors yProvider={provider} userInfo={userInfo} />
) : null} ) : null}
<Editor <Editor
height="100%" height="100%"
language={editorLanguage} language={editorLanguage}
beforeMount={handleEditorWillMount} beforeMount={handleEditorWillMount}
onMount={handleEditorMount} onMount={handleEditorMount}
onChange={(value) => { onChange={(value) => {
// If the new content is different from the cached content, update it // If the new content is different from the cached content, update it
if (value !== fileContents[activeFileId]) { if (value !== fileContents[activeFileId]) {
setActiveFileContent(value ?? ""); // Update the active file content setActiveFileContent(value ?? "") // Update the active file content
// Mark the file as unsaved by setting 'saved' to false // Mark the file as unsaved by setting 'saved' to false
setTabs((prev) => setTabs((prev) =>
prev.map((tab) => prev.map((tab) =>
tab.id === activeFileId tab.id === activeFileId
? { ...tab, saved: false } ? { ...tab, saved: false }
: tab : tab
)
) )
} else { )
// If the content matches the cached content, mark the file as saved } else {
setTabs((prev) => // If the content matches the cached content, mark the file as saved
prev.map((tab) => setTabs((prev) =>
tab.id === activeFileId prev.map((tab) =>
? { ...tab, saved: true } tab.id === activeFileId
: tab ? { ...tab, saved: true }
) : tab
) )
} )
}} }
options={{ }}
tabSize: 2, options={{
minimap: { tabSize: 2,
enabled: false, minimap: {
}, enabled: false,
padding: { },
bottom: 4, padding: {
top: 4, bottom: 4,
}, top: 4,
scrollBeyondLastLine: false, },
fixedOverflowWidgets: true, scrollBeyondLastLine: false,
fontFamily: "var(--font-geist-mono)", fixedOverflowWidgets: true,
}} fontFamily: "var(--font-geist-mono)",
theme="vs-dark" }}
value={activeFileContent} theme="vs-dark"
/> value={activeFileContent}
</> />
) : ( </>
<div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none"> ) : (
<Loader2 className="animate-spin w-6 h-6 mr-3" /> <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
Waiting for Clerk to load... <Loader2 className="animate-spin w-6 h-6 mr-3" />
</div> Waiting for Clerk to load...
)} </div>
)}
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />

6
frontend/components/editor/loading/index.tsx
View File

@ -84,8 +84,10 @@ export default function Loading({
</div> </div>
</div> </div>
<div className="w-full mt-1 flex flex-col"> <div className="w-full mt-1 flex flex-col">
<div className="w-full flex justify-center"> <div className="w-full flex flex-col justify-center">
<Loader2 className="w-4 h-4 animate-spin" /> {new Array(6).fill(0).map((_, i) => (
<Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
))}
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,4 @@
"use client"; "use client"
import { import {
FilePlus, FilePlus,
@ -7,20 +7,21 @@ import {
MonitorPlay, MonitorPlay,
Search, Search,
Sparkles, Sparkles,
} from "lucide-react"; } from "lucide-react"
import SidebarFile from "./file"; import SidebarFile from "./file"
import SidebarFolder from "./folder"; import SidebarFolder from "./folder"
import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"; import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react"
import New from "./new"; import New from "./new"
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client"
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch"
import { import {
dropTargetForElements, dropTargetForElements,
monitorForElements, monitorForElements,
} from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
import Button from "@/components/ui/customButton"; import Button from "@/components/ui/customButton"
import { Skeleton } from "@/components/ui/skeleton"
export default function Sidebar({ export default function Sidebar({
sandboxData, sandboxData,
@ -34,75 +35,73 @@ export default function Sidebar({
addNew, addNew,
deletingFolderId, deletingFolderId,
}: { }: {
sandboxData: Sandbox; sandboxData: Sandbox
files: (TFile | TFolder)[]; files: (TFile | TFolder)[]
selectFile: (tab: TTab) => void; selectFile: (tab: TTab) => void
handleRename: ( handleRename: (
id: string, id: string,
newName: string, newName: string,
oldName: string, oldName: string,
type: "file" | "folder" type: "file" | "folder"
) => boolean; ) => boolean
handleDeleteFile: (file: TFile) => void; handleDeleteFile: (file: TFile) => void
handleDeleteFolder: (folder: TFolder) => void; handleDeleteFolder: (folder: TFolder) => void
socket: Socket; socket: Socket
setFiles: (files: (TFile | TFolder)[]) => void; setFiles: (files: (TFile | TFolder)[]) => void
addNew: (name: string, type: "file" | "folder") => void; addNew: (name: string, type: "file" | "folder") => void
deletingFolderId: string; deletingFolderId: string
}) { }) {
const ref = useRef(null); // drop target const ref = useRef(null) // drop target
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(
null
);
const [movingId, setMovingId] = useState("");
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
const [movingId, setMovingId] = useState("")
console.log(files)
useEffect(() => { useEffect(() => {
const el = ref.current; const el = ref.current
if (el) { if (el) {
return dropTargetForElements({ return dropTargetForElements({
element: el, element: el,
getData: () => ({ id: `projects/${sandboxData.id}` }), getData: () => ({ id: `projects/${sandboxData.id}` }),
canDrop: ({ source }) => { canDrop: ({ source }) => {
const file = files.find((child) => child.id === source.data.id); const file = files.find((child) => child.id === source.data.id)
return !file; return !file
}, },
}); })
} }
}, [files]); }, [files])
useEffect(() => { useEffect(() => {
return monitorForElements({ return monitorForElements({
onDrop({ source, location }) { onDrop({ source, location }) {
const destination = location.current.dropTargets[0]; const destination = location.current.dropTargets[0]
if (!destination) { if (!destination) {
return; return
} }
const fileId = source.data.id as string; const fileId = source.data.id as string
const folderId = destination.data.id as string; const folderId = destination.data.id as string
const fileFolder = fileId.split("/").slice(0, -1).join("/"); const fileFolder = fileId.split("/").slice(0, -1).join("/")
if (fileFolder === folderId) { if (fileFolder === folderId) {
return; return
} }
console.log("move file", fileId, "to folder", folderId); console.log("move file", fileId, "to folder", folderId)
setMovingId(fileId); setMovingId(fileId)
socket.emit( socket.emit(
"moveFile", "moveFile",
fileId, fileId,
folderId, folderId,
(response: (TFolder | TFile)[]) => { (response: (TFolder | TFile)[]) => {
setFiles(response); setFiles(response)
setMovingId(""); setMovingId("")
} }
); )
}, },
}); })
}, []); }, [])
return ( return (
<div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2"> <div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2">
@ -138,8 +137,10 @@ export default function Sidebar({
} rounded-sm w-full mt-1 flex flex-col`} } rounded-sm w-full mt-1 flex flex-col`}
> */} > */}
{files.length === 0 ? ( {files.length === 0 ? (
<div className="w-full flex justify-center"> <div className="w-full flex flex-col justify-center">
<Loader2 className="w-4 h-4 animate-spin" /> {new Array(6).fill(0).map((_, i) => (
<Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
))}
</div> </div>
) : ( ) : (
<> <>
@ -172,7 +173,7 @@ export default function Sidebar({
socket={socket} socket={socket}
type={creatingNew} type={creatingNew}
stopEditing={() => { stopEditing={() => {
setCreatingNew(null); setCreatingNew(null)
}} }}
addNew={addNew} addNew={addNew}
/> />
@ -187,5 +188,5 @@ export default function Sidebar({
</Button> */} </Button> */}
</div> </div>
</div> </div>
); )
} }