validation for existing appname and qrcode

.env

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

src/pages/AssignmentPage.jsx

@@ -2,6 +2,7 @@ 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("");
@@ -15,29 +16,100 @@ const AssignmentPage = () => {
   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 {
+      // 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");
-
       const data = await res.json();
 
-
       // Optional: Remove duplicate assignment IDs if needed
       const unique = Array.from(
         new Map(data.map((item) => [item.assignmentid, item])).values()
       );
 
       setProjects(unique);
+      // }
     } catch (error) {
       console.error("Error fetching assignments:", error);
     }
@@ -53,69 +125,87 @@ const AssignmentPage = () => {
     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,
-      appname: appName,
-      qrcodenumber: qrCodeNumber,
-      passwordhash: password,
-      programid: programID,
-      description,
-      file: file,
-      intructorid: 9,
-    };
 
-    //callt the api to upload a new assignment
+    //Create the form data needed for both create and edit
     const formData = new FormData();
     formData.append("studentname", studentName);
     formData.append("campid", campID);
     formData.append("programid", programID);
-    formData.append("appname", appName);
     formData.append("qrcodenumber", qrCodeNumber);
     formData.append("password", password);
     formData.append("description", description);
+
+    if (editingIndex !== null) {
+      //edit mode
+      await fetch(`${VITE_ASSIGNMENT_URL}/instructor/update/${assignmentId}`, {
+        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 {
+      //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.");
       }
 
-    fetch(`${VITE_ASSIGNMENT_URL}/instructor/create`, {
+      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);
-        fetchAssignments(); // Refresh the assignments list
         })
         .catch((error) => {
           console.error("Error submitting assignment:", error);
-        alert("Failed to submit assignment. Please try again.");
+          alert(`Failed to submit assignment. ${error.message}`);
         });
-
-    if (editingIndex !== null) {
-      const updatedProjects = [...projects];
-      updatedProjects[editingIndex] = newProject;
-      setProjects(updatedProjects);
-    } else {
-      setProjects([...projects, newProject]);
     }
 
-    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 || "");
@@ -126,66 +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="number" 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="number" 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 />
+                <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 />
+                <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
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(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>
 
+              {editingIndex === null && (
                 <div>
                   <label>File Upload (optional)</label>
-                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
+                  <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>
@@ -197,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>
           ))}