Merge pull request #14 from JBB0807/homepage-2nd-sprint

Homepage 2nd sprint

src/pages/AssignmentPage.jsx

@@ -1,7 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "../scss/components/_assignment.scss";
-import { useEffect } from "react";
-
 
 const AssignmentPage = () => {
   const [studentName, setStudentName] = useState("");
@@ -17,8 +15,29 @@ const AssignmentPage = () => {
 
   useEffect(() => {
     document.title = "Assignment";
+    fetchAssignments();
   }, []);
-  
+
+  const fetchAssignments = async () => {
+    try {
+      const res = await fetch("http://localhost:8082/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);
+    }
+  };
 
   const resetForm = () => {
     setStudentName("");
@@ -35,9 +54,9 @@ const AssignmentPage = () => {
     e.preventDefault();
 
     const newProject = {
-      studentName,
+      studentname: studentName,
-      campID,
+      campid: campID,
-      programID,
+      programid: programID,
       title,
       description,
       fileName: file ? file.name : null,
@@ -58,11 +77,11 @@ const AssignmentPage = () => {
 
   const handleEdit = (index) => {
     const project = projects[index];
-    setStudentName(project.studentName);
+    setStudentName(project.studentname || project.studentName || "");
-    setCampID(project.campID);
+    setCampID(project.campid || project.campID || "");
-    setProgramID(project.programID);
+    setProgramID(project.programid || project.programID || "");
-    setTitle(project.title);
+    setTitle(project.title || "");
-    setDescription(project.description);
+    setDescription(project.description || "");
     setFile(null);
     setEditingIndex(index);
     setShowModal(true);
@@ -131,16 +150,30 @@ const AssignmentPage = () => {
 
       {projects.length > 0 && (
         <div className="project-list">
-          {/* <h3>📋 Projects</h3> */}
           {projects.map((project, index) => (
             <div key={index} className="project-item">
               <div className="project-meta">
-                <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
+                <strong>Student Name:</strong> {project.studentname || project.studentName} |{" "}
+                <strong>CampID:</strong> {project.campid || project.campID} |{" "}
+                <strong>ProgramID:</strong> {project.programid || project.programID}
               </div>
-              <h4>{project.title}</h4>
+
-              <p>{project.description}</p>
+              {project.title && <h4>{project.title}</h4>}
+              {project.description && <p>{project.description}</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>
+                </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>
+                </p>
+              )}
+
               <div className="action-buttons">
                 <button onClick={() => handleEdit(index)}>✏️ Edit</button>
                 <button onClick={() => handleDelete(index)}>🗑️ Delete</button>

src/scss/components/_assignment.scss

@@ -1,7 +1,11 @@
 .assignment-page {
-  max-width: 600px;
+  max-width: 100%;
-  margin: auto;
   padding: 20px;
+  margin-top: 70rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 100vh;
+  box-sizing: border-box;
 
   form {
     margin-bottom: 20px;
@@ -44,32 +48,97 @@
     }
   }
 
-  .project-list {
+  // .project-list {
-    margin-top: 2rem;
+  //   display: grid;
+  //   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  //   gap: 1.5rem;
+  //   margin-top: 2rem;
+  //   padding-bottom: 3rem;
+  
+  //   .project-item {
+  //     background: #ffffff;
+  //     border: 1px solid #e0e0e0;
+  //     border-radius: 12px;
+  //     padding: 1.5rem;
+  //     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  //     transition: transform 0.2s ease, box-shadow 0.2s ease;
+  
+  //     .project-meta {
+  //       margin-bottom: 0.75rem;
+  
+  //       strong {
+  //         color: #34495e;
+  //       }
+  //     }
+  
+  //     h4 {
+  //       margin: 0.5rem 0;
+  //       font-size: 1.2rem;
+  //       color: #2d3436;
+  //     }
+  
+  //     p {
+  //       margin: 0.25rem 0;
+  //       color: #555;
+  //       line-height: 1.4;
+  
+  //       strong {
+  //         color: #2d3436;
+  //       }
+  //     }
+  
+  //     .action-buttons {
+  //       display: flex;
+  //       gap: 0.5rem;
+  //       margin-top: 0.75rem;
+  
+  //       button {
+  //         background-color: #f4f4f4;
+  //         border: 1px solid #ddd;
+  //         border-radius: 6px;
+  //         padding: 0.4rem 0.8rem;
+  //         cursor: pointer;
+  //         font-size: 0.9rem;
+  
+  //         &:hover {
+  //           background-color: #e9ecef;
+  //         }
+  
+  //         &:nth-child(1) {
+  //           color: #2c3e50;
+  //         }
+  
+  //         &:nth-child(2) {
+  //           color: #c0392b;
+  //         }
+  
+  //         &:nth-child(3) {
+  //           color: #16a085;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 
-    h3 {
+  .project-list {
-      color: #4a90e2;
+    display: grid;
-    }
+    grid-template-columns: repeat(3, 1fr); // exactly 2 columns
+    gap: 1.5rem;
+    margin-top: 2rem;
+    padding-bottom: 3rem;
   
     .project-item {
       background: #ffffff;
       border: 1px solid #e0e0e0;
       border-radius: 12px;
       padding: 1.5rem;
-      margin-bottom: 1.5rem;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
-  
+      overflow-wrap: break-word;
-      // &:hover {
+      box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px;
-      //   transform: translateY(-2px);
-      //   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
-      // }
   
       .project-meta {
-        justify-content: space-between;
-        align-items: center;
         margin-bottom: 0.75rem;
-        flex-wrap: wrap;
   
         strong {
           color: #34495e;
@@ -104,7 +173,6 @@
           padding: 0.4rem 0.8rem;
           cursor: pointer;
           font-size: 0.9rem;
-          transition: background-color 0.2s ease;
   
           &:hover {
             background-color: #e9ecef;
@@ -126,6 +194,7 @@
     }
   }
   
+  
 
   .modal-overlay {
     position: fixed;
@@ -138,6 +207,7 @@
     align-items: center;
     justify-content: center;
     z-index: 1000;
+    overflow: hidden;
   }
   
   .modal {
@@ -148,6 +218,7 @@
     width: 100%;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     animation: fadeIn 0.3s ease;
+    overflow: auto;
   }
   
   .modal h3 {
@@ -297,3 +368,42 @@
       0 0 30px rgba(0, 191, 255, 0.9);
   }
 }
+
+
+.assignment-list-box {
+  margin-top: 40px;
+
+  h3 {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+  }
+
+  .assignment-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+  }
+
+  .assignment-card {
+    background: #f5f5f5;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+
+    p {
+      margin: 6px 0;
+    }
+
+    a {
+      color: #2c7be5;
+      text-decoration: underline;
+      word-break: break-word;
+    }
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+  }
+}