Merge pull request #16 from JBB0807/assignment

Assignment Ready for merging

.env

@@ -1,2 +1,2 @@
-#VITE_AUTH_URL="http://localhost:8080"
+VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"
-VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"
+VITE_ASSIGNMENT_URL="http://assignment-service.internal"

.env.development

@@ -1,2 +1,2 @@
 VITE_AUTH_URL="http://localhost:8080"
-#VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"
+VITE_ASSIGNMENT_URL="http://localhost:8082"

src/components/Navbar.jsx

@@ -14,7 +14,7 @@ const Navbar = () => {
 
   async function handleLogout() {
     window.open(`${authUrl}/auth/logout`, "_self");
-  };
+  }
 
   useEffect(() => {
     // Set active link based on current path
@@ -128,18 +128,22 @@ const Navbar = () => {
             <span className="navbar__link-hover"></span>
           </Link>
         </li> */}
-        <li>
+
-          <Link
+        {user && user.role === "instructor" && (
-            to="/assignment"
+          <li>
-            className={`navbar__link ${
+            <Link
-              activeLink === "/assignment" ? "navbar__link--active" : ""
+              to="/assignment"
-            }`}
+              className={`navbar__link ${
-          >
+                activeLink === "/assignment" ? "navbar__link--active" : ""
-            <span className="navbar__link-icon">🎯</span>
+              }`}
-            <span className="navbar__link-text">ASSIGNMENT</span>
+            >
-            <span className="navbar__link-hover"></span>
+              <span className="navbar__link-icon">🎯</span>
-          </Link>
+              <span className="navbar__link-text">ASSIGNMENT</span>
-        </li>
+              <span className="navbar__link-hover"></span>
+            </Link>
+          </li>
+        )}
+        {user && user.role === "student" && (        
         <li>
           <Link
             to="/editor"
@@ -152,6 +156,7 @@ const Navbar = () => {
             <span className="navbar__link-hover"></span>
           </Link>
         </li>
+        )}
         <li>
           {user ? (
             <a

src/pages/AssignmentPage.jsx

@@ -2,31 +2,106 @@ import React, { useState, useEffect } from "react";
 import "../scss/components/_assignment.scss";
 
 const AssignmentPage = () => {
+  const [assignmentId, setAssignmentId] = useState("");
   const [studentName, setStudentName] = useState("");
   const [campID, setCampID] = useState("");
   const [programID, setProgramID] = useState("");
+  const [appName, setAppName] = useState("");
+  const [qrCodeNumber, setQrCodeNumber] = useState("");
   const [password, setPassword] = useState("");
-  const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [file, setFile] = useState(null);
+
   const [projects, setProjects] = useState([]);
   const [showModal, setShowModal] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
 
+  const [user, setUser] = useState([]);
+
+  const VITE_ASSIGNMENT_URL = import.meta.env.VITE_ASSIGNMENT_URL;
+  const authUrl = import.meta.env.VITE_AUTH_URL;
+
   useEffect(() => {
     document.title = "Assignment";
+    getCurrentUser();
     fetchAssignments();
   }, []);
 
+  useEffect(() => {
+    if (!appName) return; // Don't alert for empty name
+    const timer = setTimeout(() => {
+      fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByAppName/${appName}`)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Failed to fetch assignment by app name");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          if (data.exists) {
+            alert("This app name already exists. Please choose a different one.");
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching assignment by app name:", error);
+        });
+    }, 1000); // 1 second delay
+
+    return () => clearTimeout(timer); // Clear timeout on name change
+  }, [appName]);
+
+  useEffect(() => {
+    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);
+      });
+    }, 1000); // 1 second delay
+
+    return () => clearTimeout(timer); // Clear timeout on QR code number change
+    }, [qrCodeNumber]);
+
+  const getCurrentUser = async () => {
+    try {
+      const authResponse = await fetch(`${authUrl}/auth/current_user`, {
+        credentials: "include",
+      });
+
+      const user = await authResponse.json();
+      setUser(user);
+    } catch (error) {
+      console.error("Error fetching current user:", error);
+    }
+  };
+
   const fetchAssignments = async () => {
     try {
-      const res = await fetch("http://localhost:8082/instructor/list/9", {
+      // 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",
       });
-      if (!res.ok) throw new Error("Failed to fetch");
 
+      if (!res.ok) throw new Error("Failed to fetch");
       const data = await res.json();
-     
 
       // Optional: Remove duplicate assignment IDs if needed
       const unique = Array.from(
@@ -34,6 +109,7 @@ const AssignmentPage = () => {
       );
 
       setProjects(unique);
+      // }
     } catch (error) {
       console.error("Error fetching assignments:", error);
     }
@@ -44,43 +120,95 @@ const AssignmentPage = () => {
     setCampID("");
     setProgramID("");
     setPassword("");
-    setTitle("");
     setDescription("");
     setFile(null);
     setEditingIndex(null);
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const newProject = {
+    if (!user.userId) return alert("Please login to submit an assignment.");
-      studentname: studentName,
+
-      campid: campID,
+    //Create the form data needed for both create and edit
-      programid: programID,
+    const formData = new FormData();
-      title,
+    formData.append("studentname", studentName);
-      description,
+    formData.append("campid", campID);
-      fileName: file ? file.name : null,
+    formData.append("programid", programID);
-    };
+    formData.append("qrcodenumber", qrCodeNumber);
+    formData.append("password", password);
+    formData.append("description", description);
 
     if (editingIndex !== null) {
-      const updatedProjects = [...projects];
+      //edit mode
-      updatedProjects[editingIndex] = newProject;
+      await fetch(`${VITE_ASSIGNMENT_URL}/instructor/update/${assignmentId}`, {
-      setProjects(updatedProjects);
+        method: "PUT",
+        body: formData,
+      })
+        .then((response) => {
+          
+          if (!response.ok) {
+            console.error("Failed to edit assignment:", response.statusText);
+            throw new Error("Failed to edit assignment");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("Assignment edited successfully:", data);
+        })
+        .catch((error) => {
+          console.error("Error submitting assignment:", error);
+          alert(`Failed to submit assignment. ${error.message}`);
+        });
     } else {
-      setProjects([...projects, newProject]);
+      //create mode
+      formData.append("instructorid", 9);
+      formData.append("appname", appName);
+
+      if (file) {
+        formData.append("file", file, file.name);
+      } else {
+        throw new Error("Failed to submit assignment: file not found.");
+      }
+
+      await fetch(`${VITE_ASSIGNMENT_URL}/instructor/create`, {
+        method: "POST",
+        body: formData,
+      })
+        .then((response) => {
+          if (!response.ok) {
+            console.error("Failed to submit assignment:", response.statusText);
+            throw new Error("Failed to submit assignment");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("Assignment submitted successfully:", data);
+        })
+        .catch((error) => {
+          console.error("Error submitting assignment:", error);
+          alert(`Failed to submit assignment. ${error.message}`);
+        });
     }
 
-    alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
+    alert(
+      editingIndex !== null ? "Assignment updated!" : "Assignment submitted!"
+    );
+
+    fetchAssignments(); // Refresh the assignments list
     resetForm();
     setShowModal(false);
   };
 
   const handleEdit = (index) => {
     const project = projects[index];
+    setAssignmentId(project.assignmentid || project.assignmentId || "");
+    setAppName(project.appname || project.appName || "");
+    setQrCodeNumber(project.qrcodenumber || project.qrCodeNumber || "");
+    setPassword(project.passwordhash || project.password || "");
     setStudentName(project.studentname || project.studentName || "");
     setCampID(project.campid || project.campID || "");
     setProgramID(project.programid || project.programID || "");
-    setTitle(project.title || "");
     setDescription(project.description || "");
     setFile(null);
     setEditingIndex(index);
@@ -88,60 +216,145 @@ const AssignmentPage = () => {
   };
 
   const handleDelete = (index) => {
-    const updated = projects.filter((_, i) => i !== index);
+    const project = projects[index];
-    setProjects(updated);
+    if (window.confirm("Are you sure you want to delete this assignment?")) {
+      fetch(`${VITE_ASSIGNMENT_URL}/instructor/delete/${project.assignmentid}`, {
+        method: "DELETE",
+      })
+        .then((response) => {
+          if (!response.ok) {
+            console.error("Failed to delete assignment:", response.statusText);
+            throw new Error("Failed to delete assignment");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("Assignment deleted successfully:", data);
+          alert("Assignment deleted successfully!");
+          fetchAssignments(); // Refresh the assignments list
+        })
+        .catch((error) => {
+          console.error("Error deleting assignment:", error);
+          alert(`Failed to delete assignment. ${error.message}`);
+        });
+    }
   };
 
   return (
     <div className="assignment-page">
       <div className="assignment-header-box">
         <h2>Assignments</h2>
-        <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+        <button
+          onClick={() => {
+            resetForm();
+            setShowModal(true);
+          }}
+        >
+          ➕ Add New
+        </button>
       </div>
 
       {showModal && (
         <div className="modal-overlay">
           <div className="modal">
-            <h3>{editingIndex !== null ? "Edit Assignment" : "New Assignment"}</h3>
+            <h3>
+              {editingIndex !== null ? "Edit Assignment" : "New Assignment"}
+            </h3>
             <form onSubmit={handleSubmit}>
               <div>
                 <label>Student Name</label>
-                <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
+                <input
+                  type="text"
+                  value={studentName}
+                  onChange={(e) => setStudentName(e.target.value)}
+                  required
+                />
               </div>
 
               <div>
                 <label>Camp ID</label>
-                <input type="text" value={campID} onChange={(e) => setCampID(e.target.value)} required />
+                <input
+                  type="number"
+                  value={campID}
+                  onChange={(e) => setCampID(e.target.value)}
+                  required
+                />
               </div>
 
               <div>
                 <label>Program ID</label>
-                <input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
+                <input
+                  type="number"
+                  value={programID}
+                  onChange={(e) => setProgramID(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label>App Name</label>
+                <input
+                  type="text"
+                  value={appName}
+                  onChange={(e) => setAppName(e.target.value)}
+                  required
+                  disabled={editingIndex !== null}
+                  s
+                />
+              </div>
+
+              <div>
+                <label>QR Code Number</label>
+                <input
+                  type="text"
+                  value={qrCodeNumber}
+                  onChange={(e) => setQrCodeNumber(e.target.value)}
+                  required
+                />
               </div>
 
               <div>
                 <label>Password</label>
-                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+                <input
-              </div>
+                  type="password"
-
+                  value={password}
-              <div>
+                  onChange={(e) => setPassword(e.target.value)}
-                <label>Assignment Title</label>
+                  required
-                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
+                />
               </div>
 
               <div>
                 <label>Description</label>
-                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  required
+                ></textarea>
               </div>
 
-              <div>
+              {editingIndex === null && (
-                <label>File Upload (optional)</label>
+                <div>
-                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
+                  <label>File Upload (optional)</label>
-              </div>
+                  <input
+                    type="file"
+                    onChange={(e) => setFile(e.target.files[0])}
+                  />
+                </div>
+              )}
 
               <div className="modal-buttons">
-                <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
+                <button type="submit">
-                <button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
+                  {editingIndex !== null ? "Update" : "Submit"}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    resetForm();
+                    setShowModal(false);
+                  }}
+                >
+                  Cancel
+                </button>
               </div>
             </form>
           </div>
@@ -153,31 +366,58 @@ const AssignmentPage = () => {
           {projects.map((project, index) => (
             <div key={index} className="project-item">
               <div className="project-meta">
-                <strong>Student Name:</strong> {project.studentname || project.studentName} |{" "}
+                <strong>Student Name:</strong>{" "}
+                {project.studentname || project.studentName} |{" "}
                 <strong>CampID:</strong> {project.campid || project.campID} |{" "}
-                <strong>ProgramID:</strong> {project.programid || project.programID}
+                <strong>ProgramID:</strong>{" "}
+                {project.programid || project.programID}
               </div>
 
               {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 && (
                 <p>
-                  <a href={project.assignmenturl} target="_blank" rel="noopener noreferrer">View Assignment</a>
+                  <a
+                    href={project.assignmenturl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View Assignment
+                  </a>
                 </p>
               )}
               {project.originalfile && (
                 <p>
-                  <a href={project.originalfile} target="_blank" rel="noopener noreferrer">Original File</a> |{" "}
+                  <a
-                  <a href={project.editablefile} target="_blank" rel="noopener noreferrer">Editable File</a>
+                    href={project.originalfile}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Original File
+                  </a>{" "}
+                  |{" "}
+                  <a
+                    href={project.editablefile}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Editable File
+                  </a>
                 </p>
               )}
 
               <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>
+                <button onClick={() => alert("QR feature coming soon!")}>
+                  📎 QR
+                </button>
               </div>
             </div>
           ))}

src/pages/CodeEditor.jsx

@@ -4,8 +4,11 @@ import EditorPanel from "../components/EditorPanel";
 import PreviewPanel from "../components/PreviewPanel";
 
 export default function PageCodeEditor() {
-  const { assignmentId: routeId } = useParams();
+
-  const assignmentId = routeId || "52";
+  const { qrCodeNumber: routeId } = useParams();
+  // console.log("Assignment ID:", assignmentId);
+  const qrCodeNumber = routeId || "2256";
+  console.log("QR Code Number:", qrCodeNumber);
 
   const [appName, setAppName] = useState("");
   const [code, setCode] = useState("# NOW LOADING");
@@ -15,14 +18,14 @@ export default function PageCodeEditor() {
   }, []);
 
   useEffect(() => {
-    fetch(`https://assignment-service.fly.dev/student/assignment/${assignmentId}`)
+    fetch(`https://assignment-service.fly.dev/student/assignment/${qrCodeNumber}`)
       .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]);
+  }, [qrCodeNumber]);
 
   useEffect(() => {
     if (!appName) return;

src/pages/SignIn.jsx

@@ -5,7 +5,7 @@ const authUrl = import.meta.env.VITE_AUTH_URL;
 
 function SignInForm() {
   const [state, setState] = React.useState({
-    assignmentID: "",
+    qrNumber: "",
     password: "",
   });
   const handleChange = (evt) => {
@@ -19,8 +19,8 @@ function SignInForm() {
   const handleOnSubmit = (evt) => {
     evt.preventDefault();
 
-    const { assignmentId, password } = state;
+    const { qrNumber, password } = state;
-    console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`);
+    console.log(`You are loggind in with email: ${qrNumber} and password: ${password}`);
 
     console.log("Submitting login request with state:", state);
     fetch(`${authUrl}/auth/student/login`, {
@@ -59,10 +59,10 @@ function SignInForm() {
         </div> */}
 
         <input
-          type="assignmentId"
+          type="number"
-          placeholder="Assignment ID"
+          placeholder="Assignment QR Number"
-          name="assignmentId"
+          name="qrNumber"
-          value={state.assignmentId}
+          value={state.qrNumber}
           onChange={handleChange}
         />
         <input