#66 Add edit button that takes user to assignment edit page

backend/app/models.py

@@ -119,6 +119,7 @@ class Assignment(db.Model):
         d = {}
         for f in ["id", "name", "course_id", "description", "due_date", "created_at"]:
             d[f] = getattr(self, f)
+        d["due_date"] = self.due_date.strftime("%Y-%m-%dT%H:%M:%S")
 
         return d
 

frontend/src/App.js

@@ -11,6 +11,7 @@ import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 import ManageAssignmentsPage from "./pages/ManageAssignmentsPage";
 import ManageContentPage from "./pages/ManageContentPage";
+import AssignmentEditPage from "./pages/AssignmentEditPage";
 
 const AuthRoute = ({ isAuthenticated = true, path, children }) => {
   return (
@@ -49,6 +50,16 @@ function App() {
         }}
       </Route>
 
+      <Route path="/assignment/:id/edit">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <AssignmentEditPage id={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
+
       <Route path="/assignment/:id">
         {(params) => {
           return (

frontend/src/pages/AssignmentEditPage.jsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { Container, Table, Button, Form } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+import { useLocation } from "wouter";
+
+const AssignmentEditPage = ({ id }) => {
+  const [assignmentData, setAssignmentData] = useState({});
+  const [location, setLocation] = useLocation();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [duedate, setDuedate] = useState("");
+
+  const submitAssignmentForm = (name, description, duedate) => {
+    makeRequest({
+      endpoint: `assignment/${id}`,
+      method: "PUT",
+      body: {
+        name,
+        description,
+        due_date: duedate,
+      },
+    }).then((resp) => {
+      setLocation(`/manage/${assignmentData.course_id}/assignments`);
+    });
+  };
+
+  useEffect(() => {
+    makeRequest({ endpoint: `assignment/${id}` })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setAssignmentData(data);
+        setName(data.name);
+        setDescription(data.description);
+        setDuedate(data.due_date);
+      });
+  }, []);
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        {assignmentData.name && (
+          <Form
+            className="my-4 p-2 border"
+            onSubmit={(e) => {
+              e.preventDefault();
+              submitAssignmentForm(name, description, duedate);
+            }}
+          >
+            <Form.Group controlId="assignmentName">
+              <Form.Label>Name</Form.Label>
+              <Form.Control
+                value={name}
+                type="text"
+                placeholder="Enter assignment name"
+                onChange={(e) => setName(e.target.value)}
+              />
+            </Form.Group>
+            <Form.Group controlId="assignmentDescription">
+              <Form.Label>Description</Form.Label>
+              <Form.Control
+                as="textarea"
+                value={description}
+                rows={4}
+                placeholder="Enter assignment description"
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </Form.Group>
+            <Form.Group controlId="assignmentDuedate">
+              <Form.Label>Due Date</Form.Label>
+              <Form.Control
+                value={duedate}
+                type="datetime-local"
+                placeholder="Due date"
+                onChange={(e) => setDuedate(e.target.value)}
+              />
+            </Form.Group>
+            <Button className="my-2" type="submit" variant="success">
+              Submit
+            </Button>
+          </Form>
+        )}
+      </Container>
+    </div>
+  );
+};
+
+export default AssignmentEditPage;

frontend/src/pages/ManageAssignmentsPage.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Container, Table, Button, Form } from "react-bootstrap";
+import { useLocation } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import { makeRequest } from "../utils.ts";
 
@@ -7,6 +8,7 @@ const ManageAssignmentsPage = ({ cid }) => {
   const [courseData, setCourseData] = useState({});
   const [assignmentData, setAssignmentData] = useState([]);
   const [showAddAssignmentForm, setShowAddAssignmentForm] = useState(false);
+  const [location, setLocation] = useLocation();
 
   const AddAssignmentForm = () => {
     const [name, setName] = useState("");
@@ -42,6 +44,7 @@ const ManageAssignmentsPage = ({ cid }) => {
             <Form.Label>Due Date</Form.Label>
             <Form.Control
               type="datetime-local"
+              step={1}
               placeholder="Due date"
               onChange={(e) => setDuedate(e.target.value)}
             />
@@ -137,6 +140,16 @@ const ManageAssignmentsPage = ({ cid }) => {
                   <td>
                     <div>
                       <Button
+                        className="mx-1"
+                        variant="primary"
+                        onClick={() =>
+                          setLocation(`/assignment/${assignment.id}/edit`)
+                        }
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                        className="mx-1"
                         variant="danger"
                         onClick={() =>
                           sendDeleteAssignmentRequest(assignment.id)