refactor mutations to accept args on mutation function itself rather than on instantiation, then on success of the create enrollment hook redirect to the courseware url (#2480)

Author: gumaerc

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

@@ -6,38 +6,38 @@ import {
   EnrollmentsApiEnrollmentsPartialUpdateRequest,
 } from "@mitodl/mitxonline-api-axios/v2"
 
-const useCreateEnrollment = (opts: B2bApiB2bEnrollCreateRequest) => {
+const useCreateEnrollment = () => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: () => b2bApi.b2bEnrollCreate(opts),
-    onSuccess: () => {
+    mutationFn: (opts: B2bApiB2bEnrollCreateRequest) =>
+      b2bApi.b2bEnrollCreate(opts),
+    onSettled: () => {
       queryClient.invalidateQueries({
         queryKey: enrollmentKeys.courseRunEnrollmentsList(),
       })
     },
   })
 }
 
-const useUpdateEnrollment = (
-  opts: EnrollmentsApiEnrollmentsPartialUpdateRequest,
-) => {
+const useUpdateEnrollment = () => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: () => courseRunEnrollmentsApi.enrollmentsPartialUpdate(opts),
-    onSuccess: () => {
+    mutationFn: (opts: EnrollmentsApiEnrollmentsPartialUpdateRequest) =>
+      courseRunEnrollmentsApi.enrollmentsPartialUpdate(opts),
+    onSettled: () => {
       queryClient.invalidateQueries({
         queryKey: enrollmentKeys.courseRunEnrollmentsList(),
       })
     },
   })
 }
 
-const useDestroyEnrollment = (enrollmentId: number) => {
+const useDestroyEnrollment = () => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: () =>
+    mutationFn: (enrollmentId: number) =>
       courseRunEnrollmentsApi.enrollmentsDestroy({ id: enrollmentId }),
-    onSuccess: () => {
+    onSettled: () => {
       queryClient.invalidateQueries({
         queryKey: enrollmentKeys.courseRunEnrollmentsList(),
       })

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

@@ -28,6 +28,7 @@ import { EnrollmentStatusIndicator } from "./EnrollmentStatusIndicator"
 import { EmailSettingsDialog, UnenrollDialog } from "./DashboardDialogs"
 import NiceModal from "@ebay/nice-modal-react"
 import { useCreateEnrollment } from "api/mitxonline-hooks/enrollment"
+import { redirect } from "next/navigation"
 
 const CardRoot = styled.div<{
   screenSize: "desktop" | "mobile"
@@ -159,9 +160,7 @@ const CoursewareButton = styled(
     const hasStarted = startDate && isInPast(startDate)
     const hasEnrolled =
       enrollmentStatus && enrollmentStatus !== EnrollmentStatus.NotEnrolled
-    const createEnrollment = useCreateEnrollment({
-      readable_id: coursewareId ?? "",
-    })
+    const createEnrollment = useCreateEnrollment()
     return (hasStarted && href) || !hasEnrolled ? (
       hasEnrolled && href ? (
         <ButtonLink
@@ -181,7 +180,16 @@ const CoursewareButton = styled(
           className={className}
           disabled={createEnrollment.isPending || !coursewareId}
           onClick={async () => {
-            await createEnrollment.mutateAsync()
+            await createEnrollment.mutateAsync(
+              { readable_id: coursewareId ?? "" },
+              {
+                onSuccess: () => {
+                  if (href) {
+                    redirect(href)
+                  }
+                },
+              },
+            )
           }}
           {...others}
         >

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

@@ -42,18 +42,18 @@ const EmailSettingsDialogInner: React.FC<DashboardDialogProps> = ({
       receive_emails: enrollment.receiveEmails ?? true,
     },
     onSubmit: async () => {
-      await updateEnrollment.mutateAsync()
+      await updateEnrollment.mutateAsync({
+        id: enrollment.id,
+        PatchedUpdateCourseRunEnrollmentRequest: {
+          receive_emails: formik.values.receive_emails,
+        },
+      })
       if (!updateEnrollment.isError) {
         modal.hide()
       }
     },
   })
-  const updateEnrollment = useUpdateEnrollment({
-    id: enrollment.id,
-    PatchedUpdateCourseRunEnrollmentRequest: {
-      receive_emails: formik.values.receive_emails,
-    },
-  })
+  const updateEnrollment = useUpdateEnrollment()
   return (
     <FormDialog
       title={"Email Settings"}
@@ -121,14 +121,14 @@ const UnenrollDialogInner: React.FC<DashboardDialogProps> = ({
   enrollment,
 }) => {
   const modal = NiceModal.useModal()
-  const destroyEnrollment = useDestroyEnrollment(enrollment.id)
+  const destroyEnrollment = useDestroyEnrollment()
   const formik = useFormik({
     enableReinitialize: true,
     validateOnChange: false,
     validateOnBlur: false,
     initialValues: {},
     onSubmit: async () => {
-      await destroyEnrollment.mutateAsync()
+      await destroyEnrollment.mutateAsync(enrollment.id)
       if (!destroyEnrollment.isError) {
         modal.hide()
       }