fix: invite learner button properly updates detail view

openedx · Nov 18, 2021 · cb67e9e · cb67e9e
1 parent 5b51d52
commit cb67e9e
Show file tree

Hide file tree

Showing 12 changed files with 388 additions and 151 deletions.
diff --git a/src/components/subscriptions/SubscriptionDetailContextProvider.jsx b/src/components/subscriptions/SubscriptionDetailContextProvider.jsx
@@ -17,7 +17,7 @@ const SubscriptionDetailContextProvider = ({ children, subscription }) => {
   const hasMultipleSubscriptions = subscriptions.count > 1;
   const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
   const [searchQuery, setSearchQuery] = useState(null);
-  const [overview, forceRefresh] = useSubscriptionUsersOverview({
+  const [overview, forceRefreshOverview] = useSubscriptionUsersOverview({
     subscriptionUUID: subscription.uuid,
     search: searchQuery,
     errors,
@@ -34,10 +34,15 @@ const SubscriptionDetailContextProvider = ({ children, subscription }) => {
     userStatusFilter,
   });
 
+  const forceRefreshDetailView = () => {
+    forceRefreshUsers();
+    forceRefreshOverview();
+  };
+
   const context = useMemo(() => ({
     currentPage,
     hasMultipleSubscriptions,
-    forceRefresh,
+    forceRefreshOverview,
     overview,
     searchQuery,
     setCurrentPage,
@@ -47,6 +52,7 @@ const SubscriptionDetailContextProvider = ({ children, subscription }) => {
     forceRefreshUsers,
     loadingUsers,
     setUserStatusFilter,
+    forceRefreshDetailView,
   }), [
     currentPage,
     userStatusFilter,

diff --git a/src/components/subscriptions/SubscriptionDetails.jsx b/src/components/subscriptions/SubscriptionDetails.jsx
@@ -18,7 +18,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
   const {
     hasMultipleSubscriptions,
     subscription,
-    forceRefresh: forceDetailRefresh,
+    forceRefreshDetailView,
   } = useContext(SubscriptionDetailContext);
   const { addToast } = useContext(ToastsContext);
 
@@ -49,7 +49,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
                 <InviteLearnersButton
                   onSuccess={({ numAlreadyAssociated, numSuccessfulAssignments }) => {
                     forceRefresh();
-                    forceDetailRefresh();
+                    forceRefreshDetailView();
                     addToast(`${numAlreadyAssociated} email addresses were previously assigned. ${numSuccessfulAssignments} email addresses were successfully added.`);
                   }}
                   disabled={subscription.isLockedForRenewalProcessing}

diff --git a/src/components/subscriptions/SubscriptionZeroStateMessage.jsx b/src/components/subscriptions/SubscriptionZeroStateMessage.jsx
@@ -8,7 +8,10 @@ import { SubscriptionDetailContext } from './SubscriptionDetailContextProvider';
 const SubscriptionZeroStateMessage = () => {
   const { addToast } = useContext(ToastsContext);
   const { forceRefresh } = useContext(SubscriptionContext);
-  const { subscription } = useContext(SubscriptionDetailContext);
+  const {
+    subscription,
+    forceRefreshDetailView,
+  } = useContext(SubscriptionDetailContext);
   const isSubscriptionExpired = subscription.daysUntilExpiration <= 0;
 
   return (
@@ -21,6 +24,7 @@ const SubscriptionZeroStateMessage = () => {
         <InviteLearnersButton
           onSuccess={({ numSuccessfulAssignments }) => {
             forceRefresh();
+            forceRefreshDetailView();
             addToast(`${numSuccessfulAssignments} email addresses were successfully added.`);
           }}
           disabled={isSubscriptionExpired}

diff --git a/src/components/subscriptions/buttons/InviteLearnersButton.jsx b/src/components/subscriptions/buttons/InviteLearnersButton.jsx
@@ -5,11 +5,13 @@ import InviteLearnersModal from '../../../containers/InviteLearnersModal';
 import ActionButtonWithModal from '../../ActionButtonWithModal';
 import { SubscriptionDetailContext } from '../SubscriptionDetailContextProvider';
 
+export const INVITE_LEARNERS_BUTTON_TEXT = 'Invite learners';
+
 const InviteLearnersButton = ({ onSuccess, onClose, disabled }) => {
   const { overview, subscription } = useContext(SubscriptionDetailContext);
   return (
     <ActionButtonWithModal
-      buttonLabel="Invite learners"
+      buttonLabel={INVITE_LEARNERS_BUTTON_TEXT}
       buttonClassName="invite-learners-btn"
       variant="primary"
       renderModal={({ closeModal }) => (

diff --git a/src/components/subscriptions/buttons/__mocks__/InviteLearnersButton.jsx b/src/components/subscriptions/buttons/__mocks__/InviteLearnersButton.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const INVITE_LEARNERS_BUTTON_TEXT = 'Invite learners';
+
+const MockInviteLearnersButton = ({ onSuccess, disabled }) => (
+  <button onClick={onSuccess} disabled={disabled} type="button">
+    {INVITE_LEARNERS_BUTTON_TEXT}
+  </button>
+);
+
+MockInviteLearnersButton.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+MockInviteLearnersButton.defaultProps = {
+  disabled: false,
+};
+export default MockInviteLearnersButton;
diff --git a/src/components/subscriptions/data/hooks.js b/src/components/subscriptions/data/hooks.js
@@ -23,13 +23,9 @@ const subscriptionInitState = {
 export const useSubscriptions = ({ enterpriseId, errors, setErrors }) => {
   const [subscriptions, setSubscriptions] = useState({ ...subscriptionInitState });
 
-  const forceRefresh = () => {
-    setSubscriptions({ ...subscriptions });
-  };
-
   const [loading, setLoading] = useState(true);
 
-  useEffect((page = 1) => {
+  const loadCustomerAgreementData = (page = 1) => {
     LicenseManagerApiService.fetchCustomerAgreementData({ enterprise_customer_uuid: enterpriseId, page })
       .then((response) => {
         const { data: customerAgreementData } = camelCaseObject(response);
@@ -53,7 +49,6 @@ export const useSubscriptions = ({ enterpriseId, errors, setErrors }) => {
             });
           subscriptionsData.count = subscriptionsData.results.length;
         }
-
         setSubscriptions(subscriptionsData);
       })
       .catch((err) => {
@@ -65,7 +60,13 @@ export const useSubscriptions = ({ enterpriseId, errors, setErrors }) => {
       }).finally(() => {
         setLoading(false);
       });
-  }, [enterpriseId]);
+  };
+
+  const forceRefresh = () => {
+    loadCustomerAgreementData();
+  };
+
+  useEffect(loadCustomerAgreementData, [enterpriseId]);
 
   return {
     subscriptions,

diff --git a/src/components/subscriptions/licenses/LicenseAllocationHeader.jsx b/src/components/subscriptions/licenses/LicenseAllocationHeader.jsx
@@ -6,6 +6,7 @@ const LicenseAllocationHeader = () => {
   const {
     subscription,
   } = useContext(SubscriptionDetailContext);
+
   return (
     <>
       <h2 className="mb-2">License Allocation</h2>

diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
@@ -64,7 +64,7 @@ const LicenseManagementTable = () => {
   const {
     currentPage,
     overview,
-    forceRefresh: forceRefreshOverview,
+    forceRefreshDetailView,
     setSearchQuery,
     setCurrentPage,
     subscription,
@@ -169,16 +169,16 @@ const LicenseManagementTable = () => {
   });
   // Successful action modal callback
   const onRemindSuccess = (clearTableSelectionCallback) => (() => {
+    // Refresh users to get updated lastRemindDate
     clearTableSelectionCallback();
     forceRefreshUsers();
     addToast('Users successfully reminded');
   });
   const onRevokeSuccess = (clearTableSelectionCallback) => (() => {
-    // refresh subscription and user data to get updated revoke count and revoked user list
+    // Refresh subscription and user data to get updated revoke count and revoked list of users
     clearTableSelectionCallback();
     forceRefreshSubscription();
-    forceRefreshUsers();
-    forceRefreshOverview();
+    forceRefreshDetailView();
     addToast('Licenses successfully revoked');
   });