Assignment Page for instructor

2025-04-22 09:33:55 -07:00 · 2025-04-22 09:33:55 -07:00 · 88641d24fc
commit 88641d24fc
parent 1b2f4b10ba
5 changed files with 309 additions and 0 deletions
--- a/src/pages/AssignmentPage.jsx
+++ b/src/pages/AssignmentPage.jsx
@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import "../scss/components/_assignment.scss";
+
+const AssignmentPage = () => {
+  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 handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const formData = new FormData();
+    formData.append("title", title);
+    formData.append("description", description);
+    formData.append("file", file);
+
+    try {
+      const res = await fetch("/api/assignments", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (res.ok) {
+        alert("Successfully Uploaded!");
+        setProjects([...projects, { title, description }]);
+        setTitle("");
+        setDescription("");
+        setFile(null);
+        setShowModal(false);
+      } else {
+        alert("Fail Uploading!");
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Server Error!");
+    }
+  };
+
+  const handleDelete = (index) => {
+    const updated = projects.filter((_, i) => i !== index);
+    setProjects(updated);
+  };
+
+  return (
+    <div className="assignment-page">
+      <h2>📘 Assignments</h2>
+      <button onClick={() => setShowModal(true)}>➕ Create New</button>
+
+      {showModal && (
+        <div className="modal-overlay">
+          <div className="modal">
+            <h3>{editingIndex !== null ? "Edit Assignment" : "New Assignment"}</h3>
+            <form onSubmit={handleSubmit} encType="multipart/form-data">
+              <div>
+                <label>Assignment Title</label>
+                <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>
+              </div>
+
+              <div>
+                <label>File Upload</label>
+                <input
+                  type="file"
+                  onChange={(e) => setFile(e.target.files[0])}
+                  required
+                />
+              </div>
+
+              <div className="modal-buttons">
+                <button type="submit">Upload</button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowModal(false);
+                    setTitle("");
+                    setDescription("");
+                    setFile(null);
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      <div className="project-list">
+        <h3>📋 Projects</h3>
+        {projects.map((project, index) => (
+          <div key={index} className="project-item">
+            <h4>{project.title}</h4>
+            <p>{project.description}</p>
+            <button onClick={() => alert("Edit not implemented in modal mode")}>✏️ Edit</button>
+            <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AssignmentPage;