feat: add skeleton loader to file explorer
This commit is contained in:
Hamzat Victor
parent
33fc082217
commit
fa5d1e9a57
@ -36,7 +36,7 @@ import { useSocket } from "@/context/SocketContext"
|
||||
import { Button } from "../ui/button"
|
||||
import React from "react"
|
||||
import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
|
||||
import { deepMerge } from "@/lib/utils"
|
||||
import { cn, deepMerge } from "@/lib/utils"
|
||||
|
||||
export default function CodeEditor({
|
||||
userData,
|
||||
@ -62,9 +62,9 @@ export default function CodeEditor({
|
||||
// This heartbeat is critical to preventing the E2B sandbox from timing out
|
||||
useEffect(() => {
|
||||
// 10000 ms = 10 seconds
|
||||
const interval = setInterval(() => socket?.emit("heartbeat"), 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, [socket]);
|
||||
const interval = setInterval(() => socket?.emit("heartbeat"), 10000)
|
||||
return () => clearInterval(interval)
|
||||
}, [socket])
|
||||
|
||||
//Preview Button state
|
||||
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
|
||||
@ -80,7 +80,7 @@ export default function CodeEditor({
|
||||
const [activeFileContent, setActiveFileContent] = useState("")
|
||||
const [deletingFolderId, setDeletingFolderId] = useState("")
|
||||
// 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
|
||||
const [editorLanguage, setEditorLanguage] = useState("plaintext")
|
||||
@ -462,16 +462,17 @@ export default function CodeEditor({
|
||||
const model = editorRef?.getModel()
|
||||
// added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file
|
||||
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.
|
||||
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.
|
||||
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).
|
||||
// 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.
|
||||
if (line.trim() !== "") {
|
||||
decorations.instance?.clear();
|
||||
decorations.instance?.clear()
|
||||
return
|
||||
}
|
||||
}
|
||||
@ -497,28 +498,28 @@ export default function CodeEditor({
|
||||
debounce((activeFileId: string | undefined) => {
|
||||
if (activeFileId) {
|
||||
// Get the current content of the file
|
||||
const content = fileContents[activeFileId];
|
||||
const content = fileContents[activeFileId]
|
||||
|
||||
// Mark the file as saved in the tabs
|
||||
setTabs((prev) =>
|
||||
prev.map((tab) =>
|
||||
tab.id === activeFileId ? { ...tab, saved: true } : tab
|
||||
)
|
||||
);
|
||||
console.log(`Saving file...${activeFileId}`);
|
||||
console.log(`Saving file...${content}`);
|
||||
socket?.emit("saveFile", activeFileId, content);
|
||||
)
|
||||
console.log(`Saving file...${activeFileId}`)
|
||||
console.log(`Saving file...${content}`)
|
||||
socket?.emit("saveFile", activeFileId, content)
|
||||
}
|
||||
}, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
|
||||
[socket, fileContents]
|
||||
);
|
||||
)
|
||||
|
||||
// Keydown event listener to trigger file save on Ctrl+S or Cmd+S
|
||||
useEffect(() => {
|
||||
const down = (e: KeyboardEvent) => {
|
||||
if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
debouncedSaveData(activeFileId);
|
||||
debouncedSaveData(activeFileId)
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", down)
|
||||
@ -615,7 +616,7 @@ export default function CodeEditor({
|
||||
|
||||
// Socket event listener effect
|
||||
useEffect(() => {
|
||||
const onConnect = () => { }
|
||||
const onConnect = () => {}
|
||||
|
||||
const onDisconnect = () => {
|
||||
setTerminals([])
|
||||
@ -685,46 +686,49 @@ export default function CodeEditor({
|
||||
} // 300ms debounce delay, adjust as needed
|
||||
|
||||
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
|
||||
const exists = tabs.find((t) => t.id === tab.id);
|
||||
const exists = tabs.find((t) => t.id === tab.id)
|
||||
setTabs((prev) => {
|
||||
if (exists) {
|
||||
// If the tab exists, make it the active tab
|
||||
setActiveFileId(exists.id);
|
||||
return prev;
|
||||
setActiveFileId(exists.id)
|
||||
return prev
|
||||
}
|
||||
// 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 (fileContents[tab.id]) {
|
||||
setActiveFileContent(fileContents[tab.id]);
|
||||
setActiveFileContent(fileContents[tab.id])
|
||||
} else {
|
||||
// Otherwise, fetch the content of the file and cache it
|
||||
debouncedGetFile(tab.id, (response: string) => {
|
||||
setFileContents(prev => ({ ...prev, [tab.id]: response }));
|
||||
setActiveFileContent(response);
|
||||
});
|
||||
setFileContents((prev) => ({ ...prev, [tab.id]: response }))
|
||||
setActiveFileContent(response)
|
||||
})
|
||||
}
|
||||
|
||||
// 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
|
||||
setActiveFileId(tab.id);
|
||||
};
|
||||
setActiveFileId(tab.id)
|
||||
}
|
||||
|
||||
// Added this effect to update fileContents when the editor content changes
|
||||
useEffect(() => {
|
||||
if (activeFileId) {
|
||||
// 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
|
||||
const closeTab = (id: string) => {
|
||||
@ -740,8 +744,8 @@ export default function CodeEditor({
|
||||
? numTabs === 1
|
||||
? null
|
||||
: index < numTabs - 1
|
||||
? tabs[index + 1].id
|
||||
: tabs[index - 1].id
|
||||
? tabs[index + 1].id
|
||||
: tabs[index - 1].id
|
||||
: activeFileId
|
||||
|
||||
setTabs((prev) => prev.filter((t) => t.id !== id))
|
||||
@ -834,7 +838,7 @@ export default function CodeEditor({
|
||||
<DisableAccessModal
|
||||
message={disableAccess.message}
|
||||
open={disableAccess.isDisabled}
|
||||
setOpen={() => { }}
|
||||
setOpen={() => {}}
|
||||
/>
|
||||
<Loading />
|
||||
</>
|
||||
@ -862,7 +866,10 @@ export default function CodeEditor({
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="z-50 p-1" ref={generateWidgetRef}>
|
||||
<div
|
||||
className={cn(generate.show && "z-50 p-1")}
|
||||
ref={generateWidgetRef}
|
||||
>
|
||||
{generate.show ? (
|
||||
<GenerateInput
|
||||
user={userData}
|
||||
@ -873,8 +880,8 @@ export default function CodeEditor({
|
||||
code:
|
||||
(isSelected && editorRef?.getSelection()
|
||||
? editorRef
|
||||
?.getModel()
|
||||
?.getValueInRange(editorRef?.getSelection()!)
|
||||
?.getModel()
|
||||
?.getValueInRange(editorRef?.getSelection()!)
|
||||
: editorRef?.getValue()) ?? "",
|
||||
line: generate.line,
|
||||
}}
|
||||
@ -999,62 +1006,62 @@ export default function CodeEditor({
|
||||
</div>
|
||||
</>
|
||||
) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
|
||||
clerk.loaded ? (
|
||||
<>
|
||||
{provider && userInfo ? (
|
||||
<Cursors yProvider={provider} userInfo={userInfo} />
|
||||
) : null}
|
||||
<Editor
|
||||
height="100%"
|
||||
language={editorLanguage}
|
||||
beforeMount={handleEditorWillMount}
|
||||
onMount={handleEditorMount}
|
||||
onChange={(value) => {
|
||||
// If the new content is different from the cached content, update it
|
||||
if (value !== fileContents[activeFileId]) {
|
||||
setActiveFileContent(value ?? ""); // Update the active file content
|
||||
// Mark the file as unsaved by setting 'saved' to false
|
||||
setTabs((prev) =>
|
||||
prev.map((tab) =>
|
||||
tab.id === activeFileId
|
||||
? { ...tab, saved: false }
|
||||
: tab
|
||||
)
|
||||
clerk.loaded ? (
|
||||
<>
|
||||
{provider && userInfo ? (
|
||||
<Cursors yProvider={provider} userInfo={userInfo} />
|
||||
) : null}
|
||||
<Editor
|
||||
height="100%"
|
||||
language={editorLanguage}
|
||||
beforeMount={handleEditorWillMount}
|
||||
onMount={handleEditorMount}
|
||||
onChange={(value) => {
|
||||
// If the new content is different from the cached content, update it
|
||||
if (value !== fileContents[activeFileId]) {
|
||||
setActiveFileContent(value ?? "") // Update the active file content
|
||||
// Mark the file as unsaved by setting 'saved' to false
|
||||
setTabs((prev) =>
|
||||
prev.map((tab) =>
|
||||
tab.id === activeFileId
|
||||
? { ...tab, saved: false }
|
||||
: tab
|
||||
)
|
||||
} else {
|
||||
// If the content matches the cached content, mark the file as saved
|
||||
setTabs((prev) =>
|
||||
prev.map((tab) =>
|
||||
tab.id === activeFileId
|
||||
? { ...tab, saved: true }
|
||||
: tab
|
||||
)
|
||||
)
|
||||
} else {
|
||||
// If the content matches the cached content, mark the file as saved
|
||||
setTabs((prev) =>
|
||||
prev.map((tab) =>
|
||||
tab.id === activeFileId
|
||||
? { ...tab, saved: true }
|
||||
: tab
|
||||
)
|
||||
}
|
||||
}}
|
||||
options={{
|
||||
tabSize: 2,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
padding: {
|
||||
bottom: 4,
|
||||
top: 4,
|
||||
},
|
||||
scrollBeyondLastLine: false,
|
||||
fixedOverflowWidgets: true,
|
||||
fontFamily: "var(--font-geist-mono)",
|
||||
}}
|
||||
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" />
|
||||
Waiting for Clerk to load...
|
||||
</div>
|
||||
)}
|
||||
)
|
||||
}
|
||||
}}
|
||||
options={{
|
||||
tabSize: 2,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
padding: {
|
||||
bottom: 4,
|
||||
top: 4,
|
||||
},
|
||||
scrollBeyondLastLine: false,
|
||||
fixedOverflowWidgets: true,
|
||||
fontFamily: "var(--font-geist-mono)",
|
||||
}}
|
||||
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" />
|
||||
Waiting for Clerk to load...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
|
||||
@ -84,8 +84,10 @@ export default function Loading({
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-1 flex flex-col">
|
||||
<div className="w-full flex justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<div className="w-full flex flex-col justify-center">
|
||||
{new Array(6).fill(0).map((_, i) => (
|
||||
<Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import {
|
||||
FilePlus,
|
||||
@ -7,20 +7,21 @@ import {
|
||||
MonitorPlay,
|
||||
Search,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import SidebarFile from "./file";
|
||||
import SidebarFolder from "./folder";
|
||||
import { Sandbox, TFile, TFolder, TTab } from "@/lib/types";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import New from "./new";
|
||||
import { Socket } from "socket.io-client";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
} from "lucide-react"
|
||||
import SidebarFile from "./file"
|
||||
import SidebarFolder from "./folder"
|
||||
import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import New from "./new"
|
||||
import { Socket } from "socket.io-client"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
import {
|
||||
dropTargetForElements,
|
||||
monitorForElements,
|
||||
} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import Button from "@/components/ui/customButton";
|
||||
} from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
|
||||
import Button from "@/components/ui/customButton"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
export default function Sidebar({
|
||||
sandboxData,
|
||||
@ -34,75 +35,73 @@ export default function Sidebar({
|
||||
addNew,
|
||||
deletingFolderId,
|
||||
}: {
|
||||
sandboxData: Sandbox;
|
||||
files: (TFile | TFolder)[];
|
||||
selectFile: (tab: TTab) => void;
|
||||
sandboxData: Sandbox
|
||||
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;
|
||||
setFiles: (files: (TFile | TFolder)[]) => void;
|
||||
addNew: (name: string, type: "file" | "folder") => void;
|
||||
deletingFolderId: string;
|
||||
) => boolean
|
||||
handleDeleteFile: (file: TFile) => void
|
||||
handleDeleteFolder: (folder: TFolder) => void
|
||||
socket: Socket
|
||||
setFiles: (files: (TFile | TFolder)[]) => void
|
||||
addNew: (name: string, type: "file" | "folder") => void
|
||||
deletingFolderId: string
|
||||
}) {
|
||||
const ref = useRef(null); // drop target
|
||||
|
||||
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(
|
||||
null
|
||||
);
|
||||
const [movingId, setMovingId] = useState("");
|
||||
const ref = useRef(null) // drop target
|
||||
|
||||
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
|
||||
const [movingId, setMovingId] = useState("")
|
||||
console.log(files)
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
const el = ref.current
|
||||
|
||||
if (el) {
|
||||
return dropTargetForElements({
|
||||
element: el,
|
||||
getData: () => ({ id: `projects/${sandboxData.id}` }),
|
||||
canDrop: ({ source }) => {
|
||||
const file = files.find((child) => child.id === source.data.id);
|
||||
return !file;
|
||||
const file = files.find((child) => child.id === source.data.id)
|
||||
return !file
|
||||
},
|
||||
});
|
||||
})
|
||||
}
|
||||
}, [files]);
|
||||
}, [files])
|
||||
|
||||
useEffect(() => {
|
||||
return monitorForElements({
|
||||
onDrop({ source, location }) {
|
||||
const destination = location.current.dropTargets[0];
|
||||
const destination = location.current.dropTargets[0]
|
||||
if (!destination) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
const fileId = source.data.id as string;
|
||||
const folderId = destination.data.id as string;
|
||||
const fileId = source.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) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
console.log("move file", fileId, "to folder", folderId);
|
||||
console.log("move file", fileId, "to folder", folderId)
|
||||
|
||||
setMovingId(fileId);
|
||||
setMovingId(fileId)
|
||||
socket.emit(
|
||||
"moveFile",
|
||||
fileId,
|
||||
folderId,
|
||||
(response: (TFolder | TFile)[]) => {
|
||||
setFiles(response);
|
||||
setMovingId("");
|
||||
setFiles(response)
|
||||
setMovingId("")
|
||||
}
|
||||
);
|
||||
)
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<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`}
|
||||
> */}
|
||||
{files.length === 0 ? (
|
||||
<div className="w-full flex justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<div className="w-full flex flex-col justify-center">
|
||||
{new Array(6).fill(0).map((_, i) => (
|
||||
<Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@ -172,7 +173,7 @@ export default function Sidebar({
|
||||
socket={socket}
|
||||
type={creatingNew}
|
||||
stopEditing={() => {
|
||||
setCreatingNew(null);
|
||||
setCreatingNew(null)
|
||||
}}
|
||||
addNew={addNew}
|
||||
/>
|
||||
@ -187,5 +188,5 @@ export default function Sidebar({
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user