start file saving logic

backend/server/dist/index.js

@@ -73,6 +73,12 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
         console.log("file " + file.id + ": ", file.data);
         callback(file.data);
     });
+    socket.on("saveFile", (activeId, body, callback) => {
+        // const file = sandboxFiles.fileData.find((f) => f.id === fileId)
+        // if (!file) return
+        // console.log("file " + file.id + ": ", file.data)
+        // callback(file.data)
+    });
     socket.on("renameFile", (fileId, newName) => __awaiter(void 0, void 0, void 0, function* () {
         const file = sandboxFiles.fileData.find((f) => f.id === fileId);
         if (!file)

backend/server/src/index.ts

@@ -78,6 +78,12 @@ io.on("connection", async (socket) => {
     console.log("file " + file.id + ": ", file.data)
     callback(file.data)
   })
+  socket.on("saveFile", (activeId: string, body: string, callback) => {
+    // const file = sandboxFiles.fileData.find((f) => f.id === fileId)
+    // if (!file) return
+    // console.log("file " + file.id + ": ", file.data)
+    // callback(file.data)
+  })
   socket.on("renameFile", async (fileId: string, newName: string) => {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId)
     if (!file) return

frontend/components/editor/index.tsx

@@ -49,9 +49,34 @@ export default function CodeEditor({
     `http://localhost:4000?userId=${userId}&sandboxId=${sandboxId}`
   )
 
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+
+        const activeTab = tabs.find((t) => t.id === activeId)
+        console.log("saving " + activeTab?.name)
+
+        setTabs((prev) =>
+          prev.map((tab) =>
+            tab.id === activeId ? { ...tab, saved: true } : tab
+          )
+        )
+
+        socket.emit("saveFile", activeId, editorRef.current?.getValue())
+      }
+    }
+    document.addEventListener("keydown", down)
+
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [tabs, activeId])
+
+  // WS event handlers ------------
+
   // connection/disconnection effect
   useEffect(() => {
-    console.log("connecting")
     socket.connect()
 
     return () => {
@@ -80,6 +105,8 @@ export default function CodeEditor({
     }
   }, [])
 
+  // ------------
+
   const clerk = useClerk()
 
   const selectFile = (tab: TTab) => {