Merge pull request #929 from mitodl/910-dashboard-doesnt-refresh-when…

…-user-unenrolls-from-course-in-a-program 910 dashboard doesnt refresh when user unenrolls from course in a program
mitodl · Sep 6, 2022 · 6c364bf · 6c364bf
2 parents 3412289 + 77c0197
commit 6c364bf
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js
@@ -30,7 +30,8 @@ type EnrolledItemCardProps = {
     enrollmentId: number,
     emailsSubscription: string
   ) => Promise<any>,
-  addUserNotification: Function
+  addUserNotification: Function,
+  closeDrawer:Function,
 }
 
 type EnrolledItemCardState = {
@@ -73,7 +74,7 @@ export class EnrolledItemCard extends React.Component<
   }
 
   async onDeactivate(enrollment: RunEnrollment) {
-    const { deactivateEnrollment, addUserNotification } = this.props
+    const { deactivateEnrollment, addUserNotification, closeDrawer } = this.props
 
     if (enrollment.enrollment_mode === "verified") {
       this.toggleVerifiedUnenrollmentModalVisibility()
@@ -91,6 +92,9 @@ export class EnrolledItemCard extends React.Component<
         messageType = ALERT_TYPE_DANGER
         userMessage = `Something went wrong with your request to unenroll. Please contact support at ${SETTINGS.support_email}.`
       }
+      if (typeof closeDrawer === "function") {
+        closeDrawer()
+      }
       addUserNotification({
         "unenroll-status": {
           type:  messageType,
@@ -107,7 +111,7 @@ export class EnrolledItemCard extends React.Component<
   }
 
   async onSubmit(payload: Object) {
-    const { courseEmailsSubscription, addUserNotification } = this.props
+    const { courseEmailsSubscription, addUserNotification, closeDrawer } = this.props
     this.setState({ submittingEnrollmentId: payload.enrollmentId })
     this.toggleEmailSettingsModalVisibility()
     try {
@@ -127,6 +131,9 @@ export class EnrolledItemCard extends React.Component<
         messageType = ALERT_TYPE_DANGER
         userMessage = `Something went wrong with your request to course ${payload.courseNumber} emails subscription. Please contact support at ${SETTINGS.support_email}.`
       }
+      if (typeof closeDrawer === "function") {
+        closeDrawer()
+      }
       addUserNotification({
         "subscription-status": {
           type:  messageType,

diff --git a/frontend/public/src/components/EnrolledItemCard_test.js b/frontend/public/src/components/EnrolledItemCard_test.js
@@ -19,7 +19,8 @@ describe("EnrolledItemCard", () => {
     currentUser,
     isLinkableStub,
     enrollmentCardProps,
-    isFinancialAssistanceAvailableStub
+    isFinancialAssistanceAvailableStub,
+    closeDrawer
 
 
   beforeEach(() => {
@@ -56,6 +57,7 @@ describe("EnrolledItemCard", () => {
             enrollmentCardProps.courseEmailsSubscription
           }
           addUserNotification={enrollmentCardProps.addUserNotification}
+          closeDrawer={closeDrawer}
         />
       )
   })

diff --git a/frontend/public/src/components/ProgramEnrollmentDrawer.js b/frontend/public/src/components/ProgramEnrollmentDrawer.js
@@ -59,6 +59,7 @@ export class ProgramEnrollmentDrawer extends React.Component<ProgramEnrollmentDr
                   currentUser={currentUser}
                   deactivateEnrollment={deactivateEnrollment}
                   courseEmailsSubscription={courseEmailsSubscription}
+                  closeDrawer = {closeDrawer}
                   addUserNotification={addUserNotification}>
                 </EnrolledItemCard>
               ))) : (

diff --git a/frontend/public/src/containers/pages/DashboardPage.js b/frontend/public/src/containers/pages/DashboardPage.js
@@ -64,7 +64,8 @@ type DashboardPageProps = {
     enrollmentId: number,
     emailsSubscription: string
   ) => Promise<any>,
-  addUserNotification: Function
+  addUserNotification: Function,
+  closeDrawer: Function,
 }
 
 type DashboardPageState = {
@@ -259,6 +260,7 @@ export class DashboardPage extends React.Component<
       deactivateEnrollment,
       courseEmailsSubscription,
       addUserNotification,
+      closeDrawer,
     } = this.props
 
     if (isProgramUIEnabled() && programEnrollments) {
@@ -277,6 +279,7 @@ export class DashboardPage extends React.Component<
         deactivateEnrollment={deactivateEnrollment}
         courseEmailsSubscription={courseEmailsSubscription}
         addUserNotification={addUserNotification}
+        closeDrawer={closeDrawer}
       ></EnrolledItemCard>
     )
   }

diff --git a/frontend/public/src/lib/queries/enrollment.js b/frontend/public/src/lib/queries/enrollment.js
@@ -55,7 +55,14 @@ export const deactivateEnrollmentMutation = (enrollmentId: number) => ({
       return emptyOrNil(prevEnrollments)
         ? []
         : prevEnrollments.filter(enrollment => enrollment.id !== enrollmentId)
-    }
+    },
+    program_enrollments: prevProgramEnrollments => {
+      return emptyOrNil(prevProgramEnrollments)
+        ? []
+        : prevProgramEnrollments.map(programEnrollment => {
+          return {...programEnrollment, enrollments: programEnrollment.enrollments.filter(enrollment => enrollment.id !== enrollmentId)}
+        })
+    },
   }
 })