Cindyrzheng/dropclass

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import ClassView from "./ClassView/ClassView";
 import Me from "./Me";
 import Assignment from "./Assignment";
 import Results from "./Results";
+import ClassList from "./ClassView/ClassList";
 
 function App() {
   const [cookies, setCookies] = useCookies(["jwt"]);
@@ -19,7 +20,7 @@ function App() {
         <Route path="/create" element={<CreateAccount />} />
         <Route path="/results/:id" element={<Results />} />
         <Route path="/:classId/:assignmentId" element={<Assignment />} />
-
+        <Route path="/:classId/classList" element={<ClassList />} />
         <Route path="/class" element={<ClassView />} />
       </Routes>
     </Router>

frontend/src/Card/ClassCard.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useCookies } from "react-cookie";
+import { useNavigate } from "react-router-dom";
 
 import Card from "react-bootstrap/Card";
 import Stack from "react-bootstrap/Stack";
@@ -9,6 +10,8 @@ import { createAssignment } from "../api";
 import CreateAssignmentModal from "../Modal/CreateAssignmentModal";
 import CreateInviteModal from "../Modal/CreateInviteModal";
 
+import { dropStudent } from "../api";
+
 export default function ClassCard({
   id,
   name,
@@ -26,6 +29,18 @@ export default function ClassCard({
   const [errors, setErrors] = useState<Array<Error>>([]);
   const [showCreateAssignment, setShowCreateAssignment] = useState(false);
   const [showCreateInvite, setShowCreateInvite] = useState(false);
+  const nav = useNavigate();
+  const navToClassList = () => {
+    nav(`/${id}/classlist`);
+  };
+  const dropHandler = (classId: string) => {
+    dropStudent(
+      cookies.jwt,
+      { classId, studentId: "" },
+      () => true,
+      () => true
+    );
+  };
 
   return (
     <>
@@ -70,6 +85,16 @@ export default function ClassCard({
                 >
                   Create invite
                 </Button>
+                <Button variant="primary" onClick={() => navToClassList()}>
+                  View Class Stats
+                </Button>
+              </>
+            )}
+            {!showCreate && (
+              <>
+                <Button variant="primary" onClick={() => dropHandler(id)}>
+                  Drop This Class
+                </Button>
               </>
             )}
           </Stack>

frontend/src/ClassView/ClassList.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react";
+
+import { useParams } from "react-router-dom";
+import { useCookies } from "react-cookie";
+
+import Container from "react-bootstrap/Container";
+import Button from "react-bootstrap/Button";
+import Table from "react-bootstrap/Table";
+import Modal from "react-bootstrap/Modal";
+import Alert from "react-bootstrap/Alert";
+
+import { dropStudent, getClass } from "../api";
+
+function ClassListView() {
+  const params = useParams();
+  const arr: { id: number; username: string }[] = [];
+  const [cookies, setCookies] = useCookies(["jwt"]);
+  const [show, setShow] = useState(false);
+  const [error, setError] = useState("");
+  const [students, setStudents] = useState(arr);
+  const [classId, setClassId] = useState(params.classId);
+
+  useEffect(() => {
+    setClassId(params.classId);
+    if (classId) {
+      getClass(
+        cookies.jwt,
+        { classId },
+        (res) => {
+          console.log(res);
+          setStudents(res.members);
+          console.log(students);
+        },
+        () => {
+          setError("can't find class");
+        }
+      );
+    }
+  }, []);
+
+  function handleDropStudent(studentId: string) {
+    if (classId && studentId) {
+      dropStudent(
+        cookies.jwt,
+        { classId, studentId },
+        () => {
+          setError("Dropped student!");
+        },
+        () => {
+          setError("Failed dropping student!");
+        }
+      );
+    }
+    handleClose();
+  }
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  return (
+    <Container>
+      {error && <Alert variant={"danger"}>Failed to login: {error}</Alert>}
+      <h1>My Students</h1>
+      <Table striped bordered hover>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Grade</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {students.map((x, id) => (
+            <tr key={x.username}>
+              <td>{x.username}</td>
+              <td>
+                <>
+                  <Button variant="primary" onClick={handleShow}>
+                    Drop Student
+                  </Button>
+                  <Modal show={show} onHide={handleClose}>
+                    <Modal.Body>
+                      Are you sure you want to drop {x.id}?
+                    </Modal.Body>
+                    <Modal.Footer>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        onClick={() => {
+                          handleDropStudent(x.id + "");
+                        }}
+                      >
+                        Drop Student
+                      </Button>
+                    </Modal.Footer>
+                  </Modal>
+                </>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </Container>
+  );
+}
+
+export default ClassListView;

frontend/src/api.ts

@@ -211,6 +211,7 @@ export interface AssignmentData {
  * @param onSuccess Fired on success.
  * @param onFailure Fired on failure.
  */
+
 export const getAssignment = authorized<
   { classId: string; assignmentId: string },
   AssignmentData
@@ -320,9 +321,10 @@ export const createInvite = authorized<
  * @param onSuccess Fired on successful request.
  * @param onFailure Fired on failed request.
  */
-const dropStudent = authorized<{ classId: string; studentId: string }, void>(
-  ({ classId, studentId }) => [`/class/${classId}/drop`, { studentId }]
-);
+export const dropStudent = authorized<
+  { classId: string; studentId: string },
+  void
+>(({ classId, studentId }) => [`/class/${classId}/drop`, { id: studentId }]);
 
 export interface UserInformation {
   professor?: boolean;