Skip to content

Commit ed3457d

Browse files
ChrisChVChrisChV
authored
refactor: Migrate processingNotification from redux store to use the functions in ToastContext (#2917)
- Migrates `processingNotification` from redux store to use the functions in `ToastContext`. - Involves some changes in these pages: - Certificates - Course Outline - Course Unit - Course Updates - Group Configuration - Textbooks
1 parent ca42550 commit ed3457d

27 files changed

Lines changed: 287 additions & 283 deletions

File tree

‎src/certificates/data/thunks.ts‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
/* istanbul ignore file */
22
import { RequestStatus } from '../../data/constants';
3-
import {
4-
hideProcessingNotification,
5-
showProcessingNotification,
6-
} from '../../generic/processing-notification/data/slice';
3+
import { showToastOutsideReact, closeToastOutsideReact } from '../../generic/toast-context';
74
import { handleResponseErrors } from '../../generic/saving-error-alert';
85
import { NOTIFICATION_MESSAGES } from '../../constants';
96
import {
@@ -45,7 +42,7 @@ export function fetchCertificates(courseId) {
4542
export function createCourseCertificate(courseId, certificate) {
4643
return async (dispatch) => {
4744
dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
48-
dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
45+
showToastOutsideReact(NOTIFICATION_MESSAGES.saving);
4946

5047
try {
5148
const certificateValues = await createCertificate(courseId, certificate);
@@ -55,15 +52,15 @@ export function createCourseCertificate(courseId, certificate) {
5552
} catch (error) {
5653
return handleResponseErrors(error, dispatch, updateSavingStatus);
5754
} finally {
58-
dispatch(hideProcessingNotification());
55+
closeToastOutsideReact();
5956
}
6057
};
6158
}
6259

6360
export function updateCourseCertificate(courseId, certificate) {
6461
return async (dispatch) => {
6562
dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
66-
dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
63+
showToastOutsideReact(NOTIFICATION_MESSAGES.saving);
6764

6865
try {
6966
const certificatesValues = await updateCertificate(courseId, certificate);
@@ -73,15 +70,15 @@ export function updateCourseCertificate(courseId, certificate) {
7370
} catch (error) {
7471
return handleResponseErrors(error, dispatch, updateSavingStatus);
7572
} finally {
76-
dispatch(hideProcessingNotification());
73+
closeToastOutsideReact();
7774
}
7875
};
7976
}
8077

8178
export function deleteCourseCertificate(courseId, certificateId) {
8279
return async (dispatch) => {
8380
dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
84-
dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
81+
showToastOutsideReact(NOTIFICATION_MESSAGES.deleting);
8582

8683
try {
8784
await deleteCertificate(courseId, certificateId);
@@ -91,18 +88,17 @@ export function deleteCourseCertificate(courseId, certificateId) {
9188
} catch (error) {
9289
return handleResponseErrors(error, dispatch, updateSavingStatus);
9390
} finally {
94-
dispatch(hideProcessingNotification());
91+
closeToastOutsideReact();
9592
}
9693
};
9794
}
9895

9996
export function updateCertificateActiveStatus(courseId, path, activationStatus) {
10097
return async (dispatch) => {
10198
dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
102-
103-
dispatch(showProcessingNotification(
99+
showToastOutsideReact(
104100
activationStatus ? ACTIVATION_MESSAGES.activating : ACTIVATION_MESSAGES.deactivating,
105-
));
101+
);
106102

107103
try {
108104
await updateActiveStatus(path, activationStatus);
@@ -112,7 +108,7 @@ export function updateCertificateActiveStatus(courseId, path, activationStatus)
112108
} catch (error) {
113109
return handleResponseErrors(error, dispatch, updateSavingStatus);
114110
} finally {
115-
dispatch(hideProcessingNotification());
111+
closeToastOutsideReact();
116112
}
117113
};
118114
}

‎src/certificates/layout/MainLayout.jsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Container, Layout } from '@openedx/paragon';
33
import { useIntl } from '@edx/frontend-platform/i18n';
44

55
import { SavingErrorAlert } from '../../generic/saving-error-alert';
6-
import ProcessingNotification from '../../generic/processing-notification';
76
import SubHeader from '../../generic/sub-header/SubHeader';
87
import messages from '../messages';
98
import CertificatesSidebar from './certificates-sidebar/CertificatesSidebar';
@@ -16,8 +15,6 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
1615
const {
1716
errorMessage,
1817
savingStatus,
19-
isShowProcessingNotification,
20-
processingNotificationTitle,
2118
} = useLayout();
2219

2320
return (
@@ -50,10 +47,6 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
5047
</section>
5148
</Container>
5249
<div className="certificates alert-toast">
53-
<ProcessingNotification
54-
isShow={isShowProcessingNotification}
55-
title={processingNotificationTitle}
56-
/>
5750
<SavingErrorAlert
5851
savingStatus={savingStatus}
5952
errorMessage={errorMessage}

‎src/certificates/layout/hooks/useLayout.jsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,12 @@ import { useEffect } from 'react';
22
import { useSelector } from 'react-redux';
33

44
import { RequestStatus } from '../../../data/constants';
5-
import { getProcessingNotification } from '../../../generic/processing-notification/data/selectors';
65
import { getSavingStatus, getErrorMessage } from '../../data/selectors';
76

87
const useLayout = () => {
98
const savingStatus = useSelector(getSavingStatus);
109
const errorMessage = useSelector(getErrorMessage);
1110

12-
const {
13-
isShow: isShowProcessingNotification,
14-
title: processingNotificationTitle,
15-
} = useSelector(getProcessingNotification);
16-
1711
useEffect(() => {
1812
if (savingStatus === RequestStatus.SUCCESSFUL) {
1913
window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -23,8 +17,6 @@ const useLayout = () => {
2317
return {
2418
errorMessage,
2519
savingStatus,
26-
isShowProcessingNotification,
27-
processingNotificationTitle,
2820
};
2921
};
3022

‎src/course-outline/CourseOutline.tsx‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,15 @@ import { useLocation } from 'react-router-dom';
2020
import { CourseAuthoringOutlineSidebarSlot } from '@src/plugin-slots/CourseAuthoringOutlineSidebarSlot';
2121

2222
import { LoadingSpinner } from '@src/generic/Loading';
23-
import { getProcessingNotification } from '@src/generic/processing-notification/data/selectors';
2423
import { RequestStatus } from '@src/data/constants';
2524
import SubHeader from '@src/generic/sub-header/SubHeader';
26-
import ProcessingNotification from '@src/generic/processing-notification';
2725
import InternetConnectionAlert from '@src/generic/internet-connection-alert';
2826
import DeleteModal from '@src/generic/delete-modal/DeleteModal';
2927
import ConfigureModal from '@src/generic/configure-modal/ConfigureModal';
3028
import { UnlinkModal } from '@src/generic/unlink-modal';
3129
import AlertMessage from '@src/generic/alert-message';
3230
import getPageHeadTitle from '@src/generic/utils';
3331
import CourseOutlineHeaderActionsSlot from '@src/plugin-slots/CourseOutlineHeaderActionsSlot';
34-
import { NOTIFICATION_MESSAGES } from '@src/constants';
3532
import { XBlock } from '@src/data/types';
3633
import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
3734
import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
@@ -71,8 +68,6 @@ const CourseOutline = () => {
7168
const {
7269
courseId,
7370
courseUsageKey,
74-
handleAddBlock,
75-
handleAddAndOpenUnit,
7671
isUnlinkModalOpen,
7772
closeUnlinkModal,
7873
currentSelection,
@@ -95,7 +90,6 @@ const CourseOutline = () => {
9590
isDisabledReindexButton,
9691
isHighlightsModalOpen,
9792
isConfigureModalOpen,
98-
isConfigureOpPending,
9993
isDeleteModalOpen,
10094
closeHighlightsModal,
10195
handleConfigureModalClose,
@@ -108,17 +102,14 @@ const CourseOutline = () => {
108102
handleEnableHighlightsSubmit,
109103
handleInternetConnectionFailed,
110104
handleOpenHighlightsModal,
111-
isSectionHighlightsUpdatePending,
112105
handleHighlightsFormSubmit,
113106
handleConfigureItemSubmit,
114107
handleDeleteItemSubmit,
115108
handleDuplicateSectionSubmit,
116109
handleDuplicateSubsectionSubmit,
117110
handleDuplicateUnitSubmit,
118-
isDuplicatingItem,
119111
handleVideoSharingOptionChange,
120112
handlePasteClipboardClick,
121-
isPasting,
122113
notificationDismissUrl,
123114
discussionsSettings,
124115
discussionsIncontextLearnmoreUrl,
@@ -161,11 +152,6 @@ const CourseOutline = () => {
161152
setSections(() => [...sectionsList]);
162153
};
163154

164-
const {
165-
isShow: isShowProcessingNotification,
166-
title: processingNotificationTitle,
167-
} = useSelector(getProcessingNotification);
168-
169155
const { data: currentItemData } = useCourseItemData(currentSelection?.currentId);
170156

171157
const itemCategory = currentItemData?.category || '';
@@ -523,20 +509,6 @@ const CourseOutline = () => {
523509
/>
524510
</Container>
525511
<div className="alert-toast">
526-
<ProcessingNotification
527-
// Show processing toast if any mutation is running
528-
isShow={
529-
isShowProcessingNotification
530-
|| handleAddBlock.isPending
531-
|| handleAddAndOpenUnit.isPending
532-
|| isConfigureOpPending
533-
|| isSectionHighlightsUpdatePending
534-
|| isDuplicatingItem
535-
|| isPasting
536-
}
537-
// HACK: Use saving as default title till we have a need for better messages
538-
title={processingNotificationTitle || NOTIFICATION_MESSAGES.saving}
539-
/>
540512
<InternetConnectionAlert
541513
isFailed={isInternetConnectionAlertFailed}
542514
isQueryPending={savingStatus === RequestStatus.PENDING}

0 commit comments

Comments
 (0)