diff --git a/backend/server/dist/index.js b/backend/server/dist/index.js index c89133a..8818939 100644 --- a/backend/server/dist/index.js +++ b/backend/server/dist/index.js @@ -36,7 +36,6 @@ const handshakeSchema = zod_1.z.object({ }); io.use((socket, next) => __awaiter(void 0, void 0, void 0, function* () { const q = socket.handshake.query; - console.log("middleware"); const parseQuery = handshakeSchema.safeParse(q); if (!parseQuery.success) { console.log("Invalid request."); @@ -46,7 +45,6 @@ io.use((socket, next) => __awaiter(void 0, void 0, void 0, function* () { const { sandboxId, userId } = parseQuery.data; const dbUser = yield fetch(`http://localhost:8787/api/user?id=${userId}`); const dbUserJSON = (yield dbUser.json()); - console.log("dbUserJSON:", dbUserJSON); if (!dbUserJSON) { console.log("DB error."); next(new Error("DB error.")); @@ -68,6 +66,13 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () { const data = socket.data; const sandboxFiles = yield (0, getSandboxFiles_1.default)(data.id); socket.emit("loaded", sandboxFiles.files); + socket.on("getFile", (fileId, callback) => { + const file = sandboxFiles.fileData.find((f) => f.id === fileId); + if (!file) + return; + // console.log("file " + file.id + ": ", file.data) + callback(file.data); + }); })); httpServer.listen(port, () => { console.log(`Server running on port ${port}`); diff --git a/backend/server/src/index.ts b/backend/server/src/index.ts index a94ff58..df30fd1 100644 --- a/backend/server/src/index.ts +++ b/backend/server/src/index.ts @@ -28,9 +28,6 @@ const handshakeSchema = z.object({ io.use(async (socket, next) => { const q = socket.handshake.query - - console.log("middleware") - const parseQuery = handshakeSchema.safeParse(q) if (!parseQuery.success) { @@ -40,12 +37,9 @@ io.use(async (socket, next) => { } const { sandboxId, userId } = parseQuery.data - const dbUser = await fetch(`http://localhost:8787/api/user?id=${userId}`) const dbUserJSON = (await dbUser.json()) as User - console.log("dbUserJSON:", dbUserJSON) - if (!dbUserJSON) { console.log("DB error.") next(new Error("DB error.")) @@ -77,6 +71,13 @@ io.on("connection", async (socket) => { const sandboxFiles = await getSandboxFiles(data.id) socket.emit("loaded", sandboxFiles.files) + socket.on("getFile", (fileId: string, callback) => { + const file = sandboxFiles.fileData.find((f) => f.id === fileId) + if (!file) return + + // console.log("file " + file.id + ": ", file.data) + callback(file.data) + }) }) httpServer.listen(port, () => { diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index b070c3a..003454f 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -19,9 +19,10 @@ import { import Tab from "../ui/tab" import Sidebar from "./sidebar" import { useClerk } from "@clerk/nextjs" -import { TFile, TFolder } from "./sidebar/types" +import { TFile, TFileData, TFolder } from "./sidebar/types" import { io } from "socket.io-client" +import { set } from "zod" export default function CodeEditor({ userId, @@ -30,13 +31,17 @@ export default function CodeEditor({ userId: string sandboxId: string }) { - // const editorRef = useRef(null) + const editorRef = useRef(null) - // const handleEditorMount: OnMount = (editor, monaco) => { - // editorRef.current = editor - // } + const handleEditorMount: OnMount = (editor, monaco) => { + editorRef.current = editor + } const [files, setFiles] = useState<(TFolder | TFile)[]>([]) + const [editorLanguage, setEditorLanguage] = useState("plaintext") + const [activeFile, setActiveFile] = useState(null) + const [tabs, setTabs] = useState([]) + const [activeId, setActiveId] = useState(null) const socket = io( `http://localhost:4000?userId=${userId}&sandboxId=${sandboxId}` @@ -44,6 +49,7 @@ export default function CodeEditor({ // connection/disconnection effect useEffect(() => { + console.log("connecting") socket.connect() return () => { @@ -54,22 +60,26 @@ export default function CodeEditor({ // event listener effect useEffect(() => { function onLoadedEvent(files: (TFolder | TFile)[]) { + console.log("onLoadedEvent") setFiles(files) } + function onFileEvent() { + console.log("onFileEvent") + // setActiveFile(file) + } + socket.on("loaded", onLoadedEvent) + socket.on("file", onFileEvent) return () => { socket.off("loaded", onLoadedEvent) + socket.off("file", onFileEvent) } }, []) - // use the dependency array! const clerk = useClerk() - const [tabs, setTabs] = useState([]) - const [activeId, setActiveId] = useState(null) - const selectFile = (tab: TFile) => { setTabs((prev) => { const exists = prev.find((t) => t.id === tab.id) @@ -79,24 +89,28 @@ export default function CodeEditor({ } return [...prev, tab] }) + socket.emit("getFile", tab.id, (response: string) => { + setActiveFile(response) + }) + setEditorLanguage(tab.name.split(".").pop() ?? "plaintext") setActiveId(tab.id) } const closeTab = (tab: TFile) => { const numTabs = tabs.length const index = tabs.findIndex((t) => t.id === tab.id) - setActiveId((prev) => { - const next = - prev === tab.id - ? numTabs === 1 - ? null - : index < numTabs - 1 - ? tabs[index + 1].id - : tabs[index - 1].id - : prev + const nextId = + activeId === tab.id + ? numTabs === 1 + ? null + : index < numTabs - 1 + ? tabs[index + 1].id + : tabs[index - 1].id + : activeId + const nextTab = tabs.find((t) => t.id === nextId) - return next - }) + if (nextTab) selectFile(nextTab) + else setActiveId(null) setTabs((prev) => prev.filter((t) => t.id !== tab.id)) } @@ -115,7 +129,9 @@ export default function CodeEditor({ setActiveId(tab.id)} + onClick={() => { + selectFile(tab) + }} onClose={() => closeTab(tab)} > {tab.name} @@ -132,8 +148,9 @@ export default function CodeEditor({ ) : clerk.loaded ? ( ) : null} diff --git a/frontend/components/editor/sidebar/types.ts b/frontend/components/editor/sidebar/types.ts index b8e3eae..cfb6ca0 100644 --- a/frontend/components/editor/sidebar/types.ts +++ b/frontend/components/editor/sidebar/types.ts @@ -10,3 +10,8 @@ export type TFile = { type: "file" name: string } + +export type TFileData = { + id: string + data: string +}