add useDestroyEnrollment hook

Author: gumaerc

frontends/api/src/mitxonline/hooks/enrollment/index.ts

@@ -1,4 +1,23 @@
 import { enrollmentQueries, enrollmentKeys } from "./queries"
 import { enrollmentMutations } from "./mutations"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { enrollmentsApi } from "../../clients"
 
-export { enrollmentQueries, enrollmentMutations, enrollmentKeys }
+const useDestroyEnrollment = (enrollmentId: number) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: () => enrollmentsApi.enrollmentsDestroy({ id: enrollmentId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: enrollmentKeys.enrollmentsList(),
+      })
+    },
+  })
+}
+
+export {
+  enrollmentQueries,
+  enrollmentMutations,
+  enrollmentKeys,
+  useDestroyEnrollment,
+}

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.tsx

@@ -12,11 +12,7 @@ import { Button } from "@mitodl/smoot-design"
 
 import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
 import { useFormik } from "formik"
-import { useMutation, useQueryClient } from "@tanstack/react-query"
-import {
-  enrollmentKeys,
-  enrollmentMutations,
-} from "api/mitxonline-hooks/enrollment"
+import { useDestroyEnrollment } from "api/mitxonline-hooks/enrollment"
 
 const BoldText = styled.span(({ theme }) => ({
   ...theme.typography.subtitle1,
@@ -90,23 +86,15 @@ const UnenrollDialogInner: React.FC<DashboardDialogProps> = ({
   enrollmentId,
 }) => {
   const modal = NiceModal.useModal()
-  const queryClient = useQueryClient()
-  const { mutate, isSuccess } = useMutation(
-    enrollmentMutations.destroyEnrollment(enrollmentId),
-  )
+  const destroyEnrollment = useDestroyEnrollment(enrollmentId)
   const formik = useFormik({
     enableReinitialize: true,
     validateOnChange: false,
     validateOnBlur: false,
     initialValues: {},
     onSubmit: async () => {
-      mutate()
-      if (isSuccess) {
-        queryClient.invalidateQueries({
-          queryKey: enrollmentKeys.enrollmentsList(),
-        })
-        modal.hide()
-      }
+      await destroyEnrollment.mutateAsync()
+      modal.hide()
     },
   })
   return (