From 48de20b8c331bc61f57a609ae4d58cf18df65c51 Mon Sep 17 00:00:00 2001
From: JBB0807 <104856796+JBB0807@users.noreply.github.com>
Date: Wed, 7 May 2025 13:15:10 -0700
Subject: [PATCH 1/2] working on instructor assignemnt

---
 src/components/Navbar.jsx    |  2 +
 src/pages/AssignmentPage.jsx | 99 ++++++++++++++++++++++--------------
 src/pages/CodeEditor.jsx     | 12 ++---
 3 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 3d39611..6e30465 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -118,6 +118,7 @@ const Navbar = () => {
           <li>
             <Link
               to="/assignment"
+              state={{ userId: user.userId }}
               className={`navbar__link ${
                 activeLink === "/assignment" ? "navbar__link--active" : ""
               }`}
@@ -132,6 +133,7 @@ const Navbar = () => {
         <li>
           <Link
             to="/editor"
+            state={{ qrCodeNumber: user.userId }}
             className={`navbar__link ${
               activeLink === "/editor" ? "navbar__link--active" : ""
             }`}
diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx
index 4601c70..ddf8c51 100644
--- a/src/pages/AssignmentPage.jsx
+++ b/src/pages/AssignmentPage.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import "../scss/components/_assignment.scss";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const AssignmentPage = () => {
   const [assignmentId, setAssignmentId] = useState("");
@@ -21,16 +22,21 @@ const AssignmentPage = () => {
   const VITE_ASSIGNMENT_URL = import.meta.env.VITE_ASSIGNMENT_URL;
   const authUrl = import.meta.env.VITE_AUTH_URL;
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     document.title = "Assignment";
-    getCurrentUser();
-    fetchAssignments();
+
+    fetchAssignments(); // Add `await` here if it's also async
+  
   }, []);
 
   useEffect(() => {
     if (!appName) return; // Don't alert for empty name
     const timer = setTimeout(() => {
-      fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByAppName/${appName}`)
+      fetch(
+        `${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByAppName/${appName}`
+      )
         .then((response) => {
           if (!response.ok) {
             throw new Error("Failed to fetch assignment by app name");
@@ -39,7 +45,9 @@ const AssignmentPage = () => {
         })
         .then((data) => {
           if (data.exists) {
-            alert("This app name already exists. Please choose a different one.");
+            alert(
+              "This app name already exists. Please choose a different one."
+            );
           }
         })
         .catch((error) => {
@@ -54,34 +62,38 @@ const AssignmentPage = () => {
     if (!qrCodeNumber) return; // Don't alert for empty QR code number
     console.log("Checking QR code number:", qrCodeNumber); // Added console log
     const timer = setTimeout(() => {
-      fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByQRCode/${qrCodeNumber}`)
-      .then((response) => {
-      if (!response.ok) {
-      throw new Error("Failed to fetch assignment by QR code number");
-      }
-      return response.json();
-      })
-      .then((data) => {
-      console.log("QR code fetch result:", data); // Added console log
-      if (data.exists) {
-        alert("This QR code number already exists. Please choose a different one.");
-      }
-      })
-      .catch((error) => {
-      console.error("Error fetching assignment by QR code number:", error);
-      });
+      fetch(
+        `${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByQRCode/${qrCodeNumber}`
+      )
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Failed to fetch assignment by QR code number");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("QR code fetch result:", data); // Added console log
+          if (data.exists) {
+            alert(
+              "This QR code number already exists. Please choose a different one."
+            );
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching assignment by QR code number:", error);
+        });
     }, 1000); // 1 second delay
 
     return () => clearTimeout(timer); // Clear timeout on QR code number change
-    }, [qrCodeNumber]);
+  }, [qrCodeNumber]);
 
   const getCurrentUser = async () => {
     try {
       const authResponse = await fetch(`${authUrl}/auth/current_user`, {
         credentials: "include",
       });
-
       const user = await authResponse.json();
+      console.log("Current user fetched:", user);
       setUser(user);
     } catch (error) {
       console.error("Error fetching current user:", error);
@@ -90,26 +102,29 @@ const AssignmentPage = () => {
 
   const fetchAssignments = async () => {
     try {
-      // if (user) {
-      // console.log("Current user:", user, `${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`);
-      // const res = await fetch(`${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`, {
-      //   // credentials: "include",
-      // });
-      //replace this with commented code above to get the instructor id from the auth service
-      const res = await fetch(`${VITE_ASSIGNMENT_URL}/instructor/list/9`, {
-        // credentials: "include",
-      });
+      // Check if user is logged in
+      console.log("User:", user);
+
+      const res = await fetch(
+        `${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`,
+        {
+          method: "GET",
+        }
+      );
 
       if (!res.ok) throw new Error("Failed to fetch");
       const data = await res.json();
 
+      console.log("Fetched assignments data:", data);
+
       // Optional: Remove duplicate assignment IDs if needed
       const unique = Array.from(
         new Map(data.map((item) => [item.assignmentid, item])).values()
       );
 
+      console.log("Unique assignments data:", unique);
+
       setProjects(unique);
-      // }
     } catch (error) {
       console.error("Error fetching assignments:", error);
     }
@@ -125,6 +140,10 @@ const AssignmentPage = () => {
     setEditingIndex(null);
   };
 
+  const handleEditClick = (qrCodeNumber) => {
+    navigate('/editor', { state: { qrCodeNumber: qrCodeNumber } });
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -146,7 +165,6 @@ const AssignmentPage = () => {
         body: formData,
       })
         .then((response) => {
-          
           if (!response.ok) {
             console.error("Failed to edit assignment:", response.statusText);
             throw new Error("Failed to edit assignment");
@@ -162,7 +180,7 @@ const AssignmentPage = () => {
         });
     } else {
       //create mode
-      formData.append("instructorid", 9);
+      formData.append("instructorid", userId);
       formData.append("appname", appName);
 
       if (file) {
@@ -218,9 +236,12 @@ const AssignmentPage = () => {
   const handleDelete = (index) => {
     const project = projects[index];
     if (window.confirm("Are you sure you want to delete this assignment?")) {
-      fetch(`${VITE_ASSIGNMENT_URL}/instructor/delete/${project.assignmentid}`, {
-        method: "DELETE",
-      })
+      fetch(
+        `${VITE_ASSIGNMENT_URL}/instructor/delete/${project.assignmentid}`,
+        {
+          method: "DELETE",
+        }
+      )
         .then((response) => {
           if (!response.ok) {
             console.error("Failed to delete assignment:", response.statusText);
@@ -415,8 +436,8 @@ const AssignmentPage = () => {
               <div className="action-buttons">
                 <button onClick={() => handleEdit(index)}>✏️ Edit</button>
                 <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
-                <button onClick={() => alert("QR feature coming soon!")}>
-                  📎 QR
+                <button key={project.qrCodeNumber} onClick={() => handleEditClick(project.qrCodeNumber)}>
+                  📎 {project.qrcodenumber}
                 </button>
               </div>
             </div>
diff --git a/src/pages/CodeEditor.jsx b/src/pages/CodeEditor.jsx
index f16f689..054a4d2 100644
--- a/src/pages/CodeEditor.jsx
+++ b/src/pages/CodeEditor.jsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import EditorPanel from "../components/EditorPanel";
 import PreviewPanel from "../components/PreviewPanel";
 
 export default function PageCodeEditor() {
 
-  const { qrCodeNumber: routeId } = useParams();
-  // console.log("Assignment ID:", assignmentId);
-  const qrCodeNumber = routeId || "2256";
+  const location = useLocation();
+  const qrCodeNumber = location.state?.qrCodeNumber;
+
   console.log("QR Code Number:", qrCodeNumber);
 
   const [appName, setAppName] = useState("");
@@ -18,7 +18,7 @@ export default function PageCodeEditor() {
   }, []);
 
   useEffect(() => {
-    fetch(`https://assignment-service.fly.dev/student/assignment/${qrCodeNumber}`)
+    fetch(`http://localhost:8082/student/assignment/${qrCodeNumber}`)
       .then((res) => {
         if (!res.ok) throw new Error("Failed to fetch assignment");
         return res.json();
@@ -29,7 +29,7 @@ export default function PageCodeEditor() {
 
   useEffect(() => {
     if (!appName) return;
-    fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
+    fetch(`http://localhost:8082/notebook/${appName}`)
       .then((res) => {
         if (!res.ok) throw new Error("Failed to fetch notebook");
         return res.json();

From 64fc708bf7c6510475a6c21220aff1f8b657f180 Mon Sep 17 00:00:00 2001
From: JBB0807 <104856796+JBB0807@users.noreply.github.com>
Date: Thu, 8 May 2025 00:14:50 -0700
Subject: [PATCH 2/2] bug fix on assignments

---
 src/components/Navbar.jsx            |  2 +-
 src/pages/AssignmentPage.jsx         | 62 ++++++++++++----------------
 src/scss/components/_assignment.scss |  4 +-
 src/scss/page/_assignment.scss       | 10 ++++-
 4 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 496e5e4..d9ee9c9 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -141,7 +141,7 @@ const Navbar = () => {
         <li>
           <Link
             to="/editor"
-            state={{ qrCodeNumber: user.userId }}
+            state={{ qrCodeNumber: user.userId || user.id}}
             className={`navbar__link ${
               activeLink === "/editor" ? "navbar__link--active" : ""
             }`}
diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx
index 5edb075..a5de99c 100644
--- a/src/pages/AssignmentPage.jsx
+++ b/src/pages/AssignmentPage.jsx
@@ -29,7 +29,7 @@ const AssignmentPage = () => {
 
   useEffect(() => {
     document.title = "Assignment";
-    fetchAssignments(); // Add `await` here if it's also async
+    fetchAssignments();
   
   }, []);
 
@@ -89,24 +89,13 @@ const AssignmentPage = () => {
     return () => clearTimeout(timer); // Clear timeout on QR code number change
   }, [qrCodeNumber]);
 
-  const getCurrentUser = async () => {
+  const fetchAssignments = async () => {
     try {
       const authResponse = await fetch(`${authUrl}/auth/current_user`, {
         credentials: "include",
       });
       const user = await authResponse.json();
-      console.log("Current user fetched:", user);
       setUser(user);
-    } catch (error) {
-      console.error("Error fetching current user:", error);
-    }
-  };
-
-  const fetchAssignments = async () => {
-    try {
-      await getCurrentUser(); // Fetch the current user first
-      if (!user.userId) return; // Check if user is logged in
-      // Check if user is logged in
       console.log("User:", user);
 
       const res = await fetch(
@@ -138,6 +127,8 @@ const AssignmentPage = () => {
     setStudentName("");
     setCampID("");
     setProgramID("");
+    setQrCodeNumber("");
+    setAppName("");
     setPassword("");
     setDescription("");
     setFile(null);
@@ -145,6 +136,7 @@ const AssignmentPage = () => {
   };
 
   const handleEditClick = (qrCodeNumber) => {
+    console.log("Navigating to editor with QR Code Number:", qrCodeNumber);
     navigate('/editor', { state: { qrCodeNumber: qrCodeNumber } });
   };
 
@@ -163,21 +155,6 @@ const AssignmentPage = () => {
     formData.append("password", password);
     formData.append("description", description);
 
-    setTimeout(() => {
-      //replace with api
-      // if (editingIndex !== null) {
-      //   const updatedProjects = [...projects];
-      //   updatedProjects[editingIndex] = newProject;
-      //   setProjects(updatedProjects);
-      // } else {
-      //   setProjects([...projects, newProject]);
-      // }
-
-      alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
-      resetForm();
-      setShowModal(false);
-      setLoading(false);
-    }, 2000);
     if (editingIndex !== null) {
       //edit mode
       await fetch(`${VITE_ASSIGNMENT_URL}/instructor/update/${assignmentId}`, {
@@ -233,6 +210,7 @@ const AssignmentPage = () => {
       editingIndex !== null ? "Assignment updated!" : "Assignment submitted!"
     );
 
+    setLoading(false);
     fetchAssignments(); // Refresh the assignments list
     resetForm();
     setShowModal(false);
@@ -353,6 +331,16 @@ const AssignmentPage = () => {
                 />
               </div>
 
+              <div>
+                <label>QR Code Number</label>
+                <input
+                  type="number"
+                  value={qrCodeNumber}
+                  onChange={(e) => setQrCodeNumber(e.target.value)}
+                  required
+                />
+              </div>
+
               <div className="password-field">
                 <label>Password</label>
                 <div className="input-wrapper">
@@ -427,15 +415,17 @@ const AssignmentPage = () => {
               <div key={index} className="project-item">
                 <div className="project-meta">
                   <p><strong>Student Name:</strong> {project.studentname || project.studentName}</p>
-                  <p><strong>CampID:</strong> {project.campid || project.campID}</p>
-                  <p><strong>ProgramID:</strong> {project.programid || project.programID}</p>
+                  <p><strong>QR Number:</strong> {project.qrcodenumber || project.qrCodeNumber}</p>
+                  <p><strong>App Name:</strong> {project.appname || project.appName}</p>
+                  <p><strong>Game Snake ID:</strong> {project.snakegameid || project.snakeGameId}</p>
+                  <p><strong>URL:</strong> <a href={project.assignmenturl}>{project.assignmenturl || project.assignmentUrl}</a></p>
                 </div>
 
-              {project.title && <h4>{project.title}</h4>}
+              {/* {project.title && <h4>{project.title}</h4>}
               {project.description && <p>{project.description}</p>}
-              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
+              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>} */}
 
-              {project.assignmenturl && (
+              {/* {project.assignmenturl && (
                 <p>
                   <a
                     href={project.assignmenturl}
@@ -445,7 +435,7 @@ const AssignmentPage = () => {
                     View Assignment
                   </a>
                 </p>
-              )}
+              )} */}
               {project.originalfile && (
                 <p>
                   <a
@@ -469,8 +459,8 @@ const AssignmentPage = () => {
               <div className="action-buttons">
                 <button onClick={() => handleEdit(index)}>✏️ Edit</button>
                 <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
-                <button key={project.qrCodeNumber} onClick={() => handleEditClick(project.qrCodeNumber)}>
-                  📎 QR
+                <button key={project.qrcodenumber} onClick={() => handleEditClick(project.qrcodenumber)}>
+                  📎 Editor
                 </button>
               </div>
             </div>
diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss
index 6e5f81d..44c9184 100644
--- a/src/scss/components/_assignment.scss
+++ b/src/scss/components/_assignment.scss
@@ -1,10 +1,10 @@
 .assignment-page {
   max-width: 100%;
   padding: 20px;
-  margin-top: 90rem;
+  margin-top: 50rem;
   overflow-x: hidden;
   overflow-y: auto;
-  // min-height: 100vh;
+  min-height: 100vh;
   box-sizing: border-box;
 
   form {
diff --git a/src/scss/page/_assignment.scss b/src/scss/page/_assignment.scss
index 04c9baf..0cea9de 100644
--- a/src/scss/page/_assignment.scss
+++ b/src/scss/page/_assignment.scss
@@ -1,10 +1,18 @@
 // Assignment Page Styling
+body {
+  justify-content: flex-starts;
+}
 
 .assignment-page {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
+
+  a {
+    text-decoration: none;
+    color: #AAC5E5;
+  }
 
   section {
     width: 100%;