fix: refresh group list after adding group

openedx · Nov 15, 2024 · 878277f · 878277f
1 parent 2306588
commit 878277f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/PeopleManagement/CreateGroupModal.jsx b/src/components/PeopleManagement/CreateGroupModal.jsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect } from 'react';
 import { logError } from '@edx/frontend-platform/logging';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { useQueryClient } from '@tanstack/react-query';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { snakeCaseObject } from '@edx/frontend-platform/utils';
 import {
@@ -10,6 +11,7 @@ import {
 import LmsApiService from '../../data/services/LmsApiService';
 import SystemErrorAlertModal from '../learner-credit-management/cards/assignment-allocation-status-modals/SystemErrorAlertModal';
 import CreateGroupModalContent from './CreateGroupModalContent';
+import { learnerCreditManagementQueryKeys } from '../learner-credit-management/data';
 
 const CreateGroupModal = ({
   isModalOpen,
@@ -27,6 +29,7 @@ const CreateGroupModal = ({
     closeModal();
     setCreateButtonState('default');
   };
+  const queryClient = useQueryClient();
 
   const handleCreateGroup = async () => {
     setCreateButtonState('pending');
@@ -38,6 +41,9 @@ const CreateGroupModal = ({
 
     try {
       groupCreationResponse = await LmsApiService.createEnterpriseGroup(options);
+      queryClient.invalidateQueries({
+        queryKey: learnerCreditManagementQueryKeys.group(enterpriseUUID),
+      });
     } catch (err) {
       logError(err);
       setCreateButtonState('error');

diff --git a/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx b/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx
@@ -33,6 +33,11 @@ const subsEnterpriseSubsidiesContextValue = {
   isLoading: false,
 };
 
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+
 jest.mock('../../learner-credit-management/data', () => ({
   ...jest.requireActual('../../learner-credit-management/data'),
   useAllEnterpriseGroups: jest.fn(),