Merge pull request #16 from JBB0807/assignment

Assignment Ready for merging
2025-05-06 11:46:40 -07:00 · 2025-05-06 11:46:40 -07:00 · a07cce5976
commit a07cce5976
parent 7e98ed6fe0 a28dc7d356
6 changed files with 322 additions and 74 deletions
--- a/.env
+++ b/.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"
--- a/.env.development
+++ b/.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"
--- a/src/components/Navbar.jsx
+++ b/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
-            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>
-          </Link>
-        </li>
+
+        {user && user.role === "instructor" && (
+          <li>
+            <Link
+              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>
+            </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
--- a/src/pages/AssignmentPage.jsx
+++ b/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 = {
-      studentname: studentName,
-      campid: campID,
-      programid: programID,
-      title,
-      description,
-      fileName: file ? file.name : null,
-    };
+    if (!user.userId) return alert("Please login to submit an 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("qrcodenumber", qrCodeNumber);
+    formData.append("password", password);
+    formData.append("description", description);

    if (editingIndex !== null) {
-      const updatedProjects = [...projects];
-      updatedProjects[editingIndex] = newProject;
-      setProjects(updatedProjects);
+      //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 {
-      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);
-    setProjects(updated);
+    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",
+      })
+        .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 />
-              </div>
-
-              <div>
-                <label>Assignment Title</label>
-                <input type="text" value={title} onChange={(e) => setTitle(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>

-              <div>
-                <label>File Upload (optional)</label>
-                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
-              </div>
+              {editingIndex === null && (
+                <div>
+                  <label>File Upload (optional)</label>
+                  <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="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
+                <button type="submit">
+                  {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 href={project.editablefile} target="_blank" rel="noopener noreferrer">Editable File</a>
+                  <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>
          ))}
--- a/src/pages/CodeEditor.jsx
+++ b/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;
--- a/src/pages/SignIn.jsx
+++ b/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;
-    console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`);
+    const { qrNumber, password } = state;
+    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"
-          placeholder="Assignment ID"
-          name="assignmentId"
-          value={state.assignmentId}
+          type="number"
+          placeholder="Assignment QR Number"
+          name="qrNumber"
+          value={state.qrNumber}
          onChange={handleChange}
        />
        <input