feat: delete classroom button on classroom cards

backend/graphql/resolvers/classResolvers.ts

@@ -65,6 +65,8 @@ const classResolvers = {
     ): Promise<ClassResponseDTO> => {
       return classService.createStudent(student, classId);
     },
+    deleteClass: (_req: undefined, { classId }: { classId: string }) =>
+      classService.deleteClass(classId),
   },
   ClassResponseDTO: {
     teacher: async (parent: ClassResponseDTO) => {

backend/graphql/types/classType.ts

@@ -39,6 +39,7 @@ const classType = gql`
   extend type Mutation {
     createClass(classObj: ClassRequestDTO!): ClassResponseDTO!
     createStudent(student: StudentRequestDTO!, classId: ID!): ClassResponseDTO!
+    deleteClass(classId: ID!): ID
   }
 `;
 

frontend/src/APIClients/mutations/ClassMutations.ts

@@ -18,3 +18,9 @@ export const CREATE_STUDENT = gql`
     }
   }
 `;
+
+export const DELETE_CLASS = gql`
+  mutation DeleteClass($classId: ID!) {
+    deleteClass(classId: $classId)
+  }
+`;

frontend/src/components/teacher/student-management/classrooms/ClassroomCard.tsx

@@ -83,7 +83,7 @@ const ClassroomCard = ({
               {name}
             </Text>
           </LinkOverlay>
-          <ClassroomPopover />
+          <ClassroomPopover classId={id} />
         </HStack>
         {classroomCardBody.map(({ icon, text }, i) => {
           return (

frontend/src/components/teacher/student-management/classrooms/ClassroomPopover.tsx

@@ -1,15 +1,42 @@
-import React from "react";
+import React, { useContext } from "react";
+import { useMutation } from "@apollo/client";
 import { Divider, useDisclosure, VStack } from "@chakra-ui/react";
 
+import { DELETE_CLASS } from "../../../../APIClients/mutations/ClassMutations";
+import { GET_CLASSES_BY_TEACHER } from "../../../../APIClients/queries/ClassQueries";
+import AuthContext from "../../../../contexts/AuthContext";
 import Popover from "../../../common/popover/Popover";
 import PopoverButton from "../../../common/popover/PopoverButton";
 
-const ClassroomPopover = (): React.ReactElement => {
+interface ClassroomPopoverProps {
+  classId: string;
+}
+
+const ClassroomPopover = ({
+  classId,
+}: ClassroomPopoverProps): React.ReactElement => {
   const {
     isOpen: isPopoverOpen,
     onOpen: onPopoverOpen,
     onClose: onPopoverClose,
   } = useDisclosure();
+  const { authenticatedUser } = useContext(AuthContext);
+
+  const { id: teacherId } = authenticatedUser ?? {};
+
+  const [deleteClass] = useMutation<{ deleteClass: string }>(DELETE_CLASS, {
+    variables: { classId },
+    refetchQueries: [
+      {
+        query: GET_CLASSES_BY_TEACHER,
+        variables: { teacherId },
+      },
+    ],
+  });
+
+  const handleDeleteClass = async () => {
+    await deleteClass({ variables: { classId } });
+  };
 
   return (
     <Popover
@@ -20,7 +47,12 @@ const ClassroomPopover = (): React.ReactElement => {
       <VStack spacing={0}>
         <PopoverButton name="Edit" onClick={() => {}} />
         <Divider />
-        <PopoverButton name="Delete" onClick={() => {}} />
+        <PopoverButton
+          name="Delete"
+          onClick={() => {
+            handleDeleteClass();
+          }}
+        />
       </VStack>
     </Popover>
   );