modified editor.jsx

src/pages/CodeEditor.jsx

@@ -1,50 +1,65 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import EditorPanel from "../components/EditorPanel";
 import PreviewPanel from "../components/PreviewPanel";
 
-const PageCodeEditor = () => {
-  const [code, setCode] = useState(
-    `# NOW LOADING`
-  );
-  const appName = "snakeapi-demo-001";
+export default function PageCodeEditor() {
+  const { assignmentId: routeId } = useParams();
+  const assignmentId = routeId || "52";
+
+  const [appName, setAppName] = useState("");
+  const [code, setCode] = useState("# NOW LOADING");
 
   useEffect(() => {
     document.title = "Snake Brain Editor";
+  }, []);
 
+  useEffect(() => {
+    fetch(`https://assignment-service.fly.dev/student/assignment/${assignmentId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch assignment");
+        return res.json();
+      })
+      .then((data) => setAppName(data.appname))
+      .catch((err) => console.error("Assignment fetch error:", err));
+  }, [assignmentId]);
+
+  useEffect(() => {
+    if (!appName) return;
     fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
       .then((res) => {
-        if (!res.ok) throw new Error("Network response was not ok");
+        if (!res.ok) throw new Error("Failed to fetch notebook");
         return res.json();
       })
       .then((notebook) => {
-        // extract code cell sources and join them
         const combined = notebook.cells
           .filter((cell) => cell.cell_type === "code")
           .map((cell) => cell.source.join(""))
           .join("\n\n");
         setCode(combined);
       })
-      .catch((err) => console.error("Failed to fetch notebook:", err));
-  }, []);
+      .catch((err) => console.error("Notebook fetch error:", err));
+  }, [appName]);
 
   return (
-    <main className="code-editor-page" style={{ paddingTop: "70px" }}>
+    <main className="code-editor-page" style={{ paddingTop: "35px" }}>
       <div
         className="editor-page-layout"
         style={{
           display: "flex",
-          gap: "2rem",
-          padding: "2rem",
+          gap: "1rem",
+          width: "120rem",
+          padding: "1rem",
           fontFamily: "'Fira Code', 'Courier New', monospace",
         }}
       >
-        {/* python editor */}
+        {/* Python Editor */}
         <div
           className="box-panel"
           style={{
             flex: 2,
             background: "linear-gradient(145deg, #0d0221, #1a1a1a)",
-            borderRadius: "12px",
+            borderRadius: "10px",
             padding: "1rem",
             color: "#eee",
             minHeight: "80vh",
@@ -63,14 +78,38 @@ const PageCodeEditor = () => {
             🐍 Snake Brain (Python)
           </h3>
           <EditorPanel code={code} onChange={setCode} />
+          <div style={{ marginTop: "1rem", display: "flex" }}>
+            <button
+              style={{
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
+              }}
+            >
+              Save
+            </button>
+            <button
+              style={{
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                marginLeft: "1rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
+              }}
+            >
+              Deploy
+            </button>
+          </div>
         </div>
 
-        {/* <div className="preview-section">
-            <PreviewPanel code={code} />
-        </div> */}
-
-
-        {/* live arena */}
+        {/* Live Arena */}
         <div
           className="box-panel"
           style={{
@@ -95,77 +134,18 @@ const PageCodeEditor = () => {
           >
             🎯 Live Arena Output
           </h3>
-
-          <h4 style={{ color: "#fff", textAlign: "center", marginBottom: "1rem" }}>
+          <h4
+            style={{
+              color: "#fff",
+              textAlign: "center",
+              marginBottom: "1rem",
+            }}
+          >
             Battlesnake Preview
           </h4>
-
-          {/* game url */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.05)",
-              borderRadius: "8px",
-              padding: "1rem",
-              marginBottom: "1rem",
-              textAlign: "center",
-            }}
-          >
-            <input
-              type="text"
-              placeholder="Game URL"
-              style={{
-                background: "transparent",
-                border: "none",
-                color: "#fff",
-                width: "100%",
-                textAlign: "center",
-                fontFamily: "'Fira Code', monospace",
-                outline: "none",
-              }}
-            />
-            <button
-              style={{
-                backgroundColor: "#ff2a6d",
-                color: "#fff",
-                padding: "0.5rem 1rem",
-                border: "none",
-                borderRadius: "20px",
-                marginTop: "0.5rem",
-                cursor: "pointer",
-                width: "100%",
-                fontWeight: "bold",
-              }}
-            >
-              FETCH BOARD
-            </button>
-          </div>
-
-          {/* test move button */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              marginTop: "2rem",
-            }}
-          >
-            <button
-              style={{
-                backgroundColor: "#ff2a6d",
-                color: "#fff",
-                padding: "0.5rem 2rem",
-                border: "none",
-                borderRadius: "20px",
-                fontWeight: "bold",
-                cursor: "pointer",
-              }}
-            >
-              TEST MOVE
-            </button>
-          </div>
+          <PreviewPanel code={code} />
         </div>
       </div>
     </main>
   );
-};
-
-export default PageCodeEditor;
+}