PR from E2552 to E2557

package.json

@@ -42,7 +42,7 @@
     "yup": "^1.4.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "HOST=0.0.0.0 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.tsx

@@ -10,6 +10,7 @@ import RoleEditor, { loadAvailableRole } from "./pages/Roles/RoleEditor";
 import Roles, { loadRoles } from "./pages/Roles/Roles";
 import Assignment from "./pages/Assignments/Assignment";
 import AssignmentEditor from "./pages/Assignments/AssignmentEditor";
+import AssignmentEditPage from "./pages/Assignments/AssignmentEditPage";
 import { loadAssignment } from "pages/Assignments/AssignmentUtil";
 import ErrorPage from "./router/ErrorPage";
 import ProtectedRoute from "./router/ProtectedRoute";
@@ -35,6 +36,7 @@ import EditProfile from "pages/Profile/Edit";
 import Reviews from "pages/Reviews/reviews";
 import Email_the_author from "./pages/Email_the_author/email_the_author";
 import CreateTeams from "pages/Assignments/CreateTeams";
+import StudentTasks from "pages/StudentTasks/StudentTasks";
 import AssignReviewer from "pages/Assignments/AssignReviewer";
 import ViewSubmissions from "pages/Assignments/ViewSubmissions";
 import ViewScores from "pages/Assignments/ViewScores";
@@ -99,13 +101,12 @@ function App() {
               element: <AssignmentEditor mode="create" />,
               loader: loadAssignment,
             },
-            {
-              path: "edit/:id",
-              element: <AssignmentEditor mode="update" />,
-              loader: loadAssignment,
-            },
           ],
         },
+        {
+          path: "assignments/edit/:id",
+          element: <ProtectedRoute element={<AssignmentEditPage />} leastPrivilegeRole={ROLE.TA} />,
+        },
         {
           path: "users",
           element: <ProtectedRoute element={<Users />} leastPrivilegeRole={ROLE.TA} />,
@@ -198,6 +199,14 @@ function App() {
           path: "email_the_author",
           element: <Email_the_author/>,
         },
+        {
+          path: "student_tasks",
+          element: <ProtectedRoute element={<StudentTasks />} />,
+        },
+        {
+          path: "student_tasks/:assignmentId",
+          element: <ProtectedRoute element={<StudentTasks />} />,
+        },
         // Fixed the missing comma and added an opening curly brace
         {
           path: "courses",

src/components/Table/Table.tsx

@@ -18,7 +18,6 @@ import {
   import GlobalFilter from "./GlobalFilter";
   import Pagination from "./Pagination";
   import RowSelectCheckBox from "./RowSelectCheckBox";
-  import { FaSearch } from "react-icons/fa";
 
   interface TableProps {
 	data: Record<string, any>[];
@@ -151,25 +150,28 @@ import {
 	  handleSelectionChange?.(selectedData);
 	}, [flatRows]);
 
-	const toggleGlobalFilter = () => {
-	  setIsGlobalFilterVisible(!isGlobalFilterVisible);
-	};
 
 	const firstRenderRef = useRef(true);
 
 	return (
 	  <>
+		<style>
+		  {`
+			.selected-topic-row {
+			  background-color: #ffeb3b !important;
+			}
+			.selected-topic-row:hover {
+			  background-color: #fdd835 !important;
+			}
+		  `}
+		</style>
 		<Container>
 		  <Row className="mb-md-2">
 			<Col md={{ span: 12 }}>
 			  {isGlobalFilterVisible && (
 				<GlobalFilter filterValue={globalFilter} setFilterValue={setGlobalFilter} />
 			  )}
 			</Col>
-			<span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
-			  <FaSearch style={{ cursor: "pointer" }} />
-			  {isGlobalFilterVisible ? " Hide" : " Show"}
-			</span>
 		  </Row>
 		</Container>
 		<Container>
@@ -210,12 +212,18 @@ import {
 				<tbody>
 				  {table.getRowModel().rows.map((row) => (
 					<React.Fragment key={row.id}>
-					  <tr>
-						{row.getVisibleCells().map((cell) => (
-						  <td key={cell.id}>
-							{flexRender(cell.column.columnDef.cell, cell.getContext())}
-						  </td>
-						))}
+					  <tr
+						className={row.original.isSelected ? 'selected-topic-row' : ''}
+						style={row.original.isSelected ? { backgroundColor: '#fff3cd' } : undefined}
+					  >
+						{row.getVisibleCells().map((cell) => {
+						  const selected = !!row.original.isSelected;
+						  return (
+							<td key={cell.id} style={selected ? { backgroundColor: '#fff3cd' } : undefined}>
+							  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</td>
+						  );
+						})}
 					  </tr>
 					  {row.getIsExpanded() && renderSubComponent && (
 						<tr>

src/hooks/useAPI.ts

@@ -32,7 +32,10 @@ const useAPI = () => {
     let errorMessage = "";
 
     axios(requestConfig)
-      .then((response) => setData(response))
+      .then((response) => {
+        setData(response);
+        setIsLoading(false);
+      })
       .catch((err) => {
         if (err.response) {
           const errors = err.response.data;
@@ -51,8 +54,8 @@ const useAPI = () => {
         }
 
         if (errorMessage) setError(errorMessage);
+        setIsLoading(false);
       });
-    setIsLoading(false);
   }, []);
 
   return { data, setData, isLoading, error, sendRequest };

src/layout/Header.tsx

@@ -143,15 +143,14 @@ const Header: React.FC = () => {
                     </NavDropdown.Item>
                   </NavDropdown>
                 )}
-                <Nav.Link as={Link} to="/student_tasks">
-                  Assignments
-                </Nav.Link>
+                {auth.user.role === ROLE.STUDENT.valueOf() && (
+                  <Nav.Link as={Link} to="/student_tasks">
+                    Assignments
+                  </Nav.Link>
+                )}
                 <Nav.Link as={Link} to="/profile">
                   Profile
                 </Nav.Link>
-                <Nav.Link as={Link} to="/student_view">
-                  Student View
-                </Nav.Link>
                 <Nav.Link as={Link} to="/view-team-grades">
                   Grades View
                 </Nav.Link>

src/pages/Assignments/Assignment.tsx

@@ -1,23 +1,19 @@
-import { Button, Col, Container, Row } from "react-bootstrap";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Container, Row, Col, Button } from "react-bootstrap";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { assignmentColumns as ASSIGNMENT_COLUMNS } from "./AssignmentColumns";
-import { BsFileText } from "react-icons/bs";
-import DeleteAssignment from "./AssignmentDelete";
 import { IAssignmentResponse } from "../../utils/interfaces";
 import { RootState } from "../../store/store";
 import { Row as TRow } from "@tanstack/react-table";
-import Table from "components/Table/Table";
 import { alertActions } from "store/slices/alertSlice";
 import useAPI from "hooks/useAPI";
-
+import Table from "components/Table/Table";
+import { assignmentColumns } from "./AssignmentColumns";
+import AssignmentDelete from "./AssignmentDelete";
+import { BsPlusSquareFill } from "react-icons/bs";
 
 const Assignments = () => {
   const { error, isLoading, data: assignmentResponse, sendRequest: fetchAssignments } = useAPI();
-  const { data: coursesResponse, sendRequest: fetchCourses } = useAPI();
-
-
   const auth = useSelector(
     (state: RootState) => state.authentication,
     (prev, next) => prev.isAuthenticated === next.isAuthenticated
@@ -31,64 +27,42 @@ const Assignments = () => {
     data?: IAssignmentResponse;
   }>({ visible: false });
 
-
-  const fetchData = useCallback(async () => {
-    try {
-      const [assignments, courses] = await Promise.all([
-        fetchAssignments({ url: `/assignments` }),
-        fetchCourses({ url: '/courses' }),
-      ]);
-      // Handle the responses as needed
-    } catch (err) {
-      // Handle any errors that occur during the fetch
-      console.error("Error fetching data:", err);
-    }
-  }, [fetchAssignments, fetchCourses]);
-
   useEffect(() => {
     if (!showDeleteConfirmation.visible) {
-      fetchData();
+      fetchAssignments({ url: `/assignments` });
     }
-  }, [fetchData, showDeleteConfirmation.visible, auth.user.id]);
+  }, [fetchAssignments, location, showDeleteConfirmation.visible, auth.user.id]);
 
-  let mergedData: Array<any & { courseName?: string }> = [];
-
-  if (assignmentResponse && coursesResponse) {
-    mergedData = assignmentResponse.data.map((assignment: any) => {
-      const course = coursesResponse.data.find((c: any) => c.id === assignment.course_id);
-      return { ...assignment, courseName: course ? course.name : 'Unknown' };
-    });
-  }
-
-
-
-  // Error alert
   useEffect(() => {
     if (error) {
       dispatch(alertActions.showAlert({ variant: "danger", message: error }));
     }
   }, [error, dispatch]);
 
-  const onDeleteAssignmentHandler = useCallback(() => setShowDeleteConfirmation({ visible: false }), []);
+  const onDeleteAssignmentHandler = useCallback(
+    () => setShowDeleteConfirmation({ visible: false }),
+    []
+  );
 
   const onEditHandle = useCallback(
     (row: TRow<IAssignmentResponse>) => navigate(`edit/${row.original.id}`),
     [navigate]
   );
 
   const onDeleteHandle = useCallback(
-    (row: TRow<IAssignmentResponse>) => setShowDeleteConfirmation({ visible: true, data: row.original }),
+    (row: TRow<IAssignmentResponse>) =>
+      setShowDeleteConfirmation({ visible: true, data: row.original }),
     []
   );
 
   const tableColumns = useMemo(
-    () => ASSIGNMENT_COLUMNS(onEditHandle, onDeleteHandle),
+    () => assignmentColumns(onEditHandle, onDeleteHandle),
     [onDeleteHandle, onEditHandle]
   );
 
   const tableData = useMemo(
-    () => (isLoading || !mergedData?.length ? [] : mergedData),
-    [mergedData, isLoading]
+    () => (isLoading || !assignmentResponse?.data ? [] : assignmentResponse.data),
+    [assignmentResponse?.data, isLoading]
   );
 
   return (
@@ -102,23 +76,26 @@ const Assignments = () => {
             </Col>
             <hr />
           </Row>
-          <Row>
+          <Row className="mb-3">
             <Col md={{ span: 1, offset: 11 }}>
-              <Button variant="outline-info" onClick={() => navigate("new")} className="d-flex align-items-center">
-                <span className="me-1">Create</span><BsFileText />
+              <Button variant="outline-success" onClick={() => navigate("new")}>
+                <BsPlusSquareFill />
               </Button>
             </Col>
             {showDeleteConfirmation.visible && (
-              <DeleteAssignment assignmentData={showDeleteConfirmation.data!} onClose={onDeleteAssignmentHandler} />
+              <AssignmentDelete
+                assignmentData={showDeleteConfirmation.data!}
+                onClose={onDeleteAssignmentHandler}
+              />
             )}
           </Row>
           <Row>
             <Table
+              showGlobalFilter={false}
               data={tableData}
               columns={tableColumns}
               columnVisibility={{
                 id: false,
-
               }}
             />
           </Row>
@@ -128,4 +105,4 @@ const Assignments = () => {
   );
 };
 
-export default Assignments;
+export default Assignments;