refactor: Migrate processingNotification from redux store to use the functions in ToastContext

src/certificates/data/thunks.ts

@@ -1,9 +1,6 @@
 /* istanbul ignore file */
 import { RequestStatus } from '../../data/constants';
-import {
-  hideProcessingNotification,
-  showProcessingNotification,
-} from '../../generic/processing-notification/data/slice';
+import { showToastOutsideReact, closeToastOutsideReact } from '../../generic/toast-context';
 import { handleResponseErrors } from '../../generic/saving-error-alert';
 import { NOTIFICATION_MESSAGES } from '../../constants';
 import {
@@ -45,7 +42,7 @@ export function fetchCertificates(courseId) {
 export function createCourseCertificate(courseId, certificate) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+    showToastOutsideReact(NOTIFICATION_MESSAGES.saving);
 
     try {
       const certificateValues = await createCertificate(courseId, certificate);
@@ -55,15 +52,15 @@ export function createCourseCertificate(courseId, certificate) {
     } catch (error) {
       return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
-      dispatch(hideProcessingNotification());
+      closeToastOutsideReact();
     }
   };
 }
 
 export function updateCourseCertificate(courseId, certificate) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+    showToastOutsideReact(NOTIFICATION_MESSAGES.saving);
 
     try {
       const certificatesValues = await updateCertificate(courseId, certificate);
@@ -73,15 +70,15 @@ export function updateCourseCertificate(courseId, certificate) {
     } catch (error) {
       return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
-      dispatch(hideProcessingNotification());
+      closeToastOutsideReact();
     }
   };
 }
 
 export function deleteCourseCertificate(courseId, certificateId) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+    showToastOutsideReact(NOTIFICATION_MESSAGES.deleting);
 
     try {
       await deleteCertificate(courseId, certificateId);
@@ -91,18 +88,17 @@ export function deleteCourseCertificate(courseId, certificateId) {
     } catch (error) {
       return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
-      dispatch(hideProcessingNotification());
+      closeToastOutsideReact();
     }
   };
 }
 
 export function updateCertificateActiveStatus(courseId, path, activationStatus) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-
-    dispatch(showProcessingNotification(
+    showToastOutsideReact(
       activationStatus ? ACTIVATION_MESSAGES.activating : ACTIVATION_MESSAGES.deactivating,
-    ));
+    );
 
     try {
       await updateActiveStatus(path, activationStatus);
@@ -112,7 +108,7 @@ export function updateCertificateActiveStatus(courseId, path, activationStatus)
     } catch (error) {
       return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
-      dispatch(hideProcessingNotification());
+      closeToastOutsideReact();
     }
   };
 }

src/certificates/layout/MainLayout.jsx

@@ -3,7 +3,6 @@ import { Container, Layout } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { SavingErrorAlert } from '../../generic/saving-error-alert';
-import ProcessingNotification from '../../generic/processing-notification';
 import SubHeader from '../../generic/sub-header/SubHeader';
 import messages from '../messages';
 import CertificatesSidebar from './certificates-sidebar/CertificatesSidebar';
@@ -16,8 +15,6 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
   const {
     errorMessage,
     savingStatus,
-    isShowProcessingNotification,
-    processingNotificationTitle,
   } = useLayout();
 
   return (
@@ -50,10 +47,6 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
         </section>
       </Container>
       <div className="certificates alert-toast">
-        <ProcessingNotification
-          isShow={isShowProcessingNotification}
-          title={processingNotificationTitle}
-        />
         <SavingErrorAlert
           savingStatus={savingStatus}
           errorMessage={errorMessage}

src/certificates/layout/hooks/useLayout.jsx

@@ -2,18 +2,12 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { RequestStatus } from '../../../data/constants';
-import { getProcessingNotification } from '../../../generic/processing-notification/data/selectors';
 import { getSavingStatus, getErrorMessage } from '../../data/selectors';
 
 const useLayout = () => {
   const savingStatus = useSelector(getSavingStatus);
   const errorMessage = useSelector(getErrorMessage);
 
-  const {
-    isShow: isShowProcessingNotification,
-    title: processingNotificationTitle,
-  } = useSelector(getProcessingNotification);
-
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
       window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -23,8 +17,6 @@ const useLayout = () => {
   return {
     errorMessage,
     savingStatus,
-    isShowProcessingNotification,
-    processingNotificationTitle,
   };
 };
 

src/course-outline/CourseOutline.tsx

@@ -20,18 +20,15 @@ import { useLocation } from 'react-router-dom';
 import { CourseAuthoringOutlineSidebarSlot } from '@src/plugin-slots/CourseAuthoringOutlineSidebarSlot';
 
 import { LoadingSpinner } from '@src/generic/Loading';
-import { getProcessingNotification } from '@src/generic/processing-notification/data/selectors';
 import { RequestStatus } from '@src/data/constants';
 import SubHeader from '@src/generic/sub-header/SubHeader';
-import ProcessingNotification from '@src/generic/processing-notification';
 import InternetConnectionAlert from '@src/generic/internet-connection-alert';
 import DeleteModal from '@src/generic/delete-modal/DeleteModal';
 import ConfigureModal from '@src/generic/configure-modal/ConfigureModal';
 import { UnlinkModal } from '@src/generic/unlink-modal';
 import AlertMessage from '@src/generic/alert-message';
 import getPageHeadTitle from '@src/generic/utils';
 import CourseOutlineHeaderActionsSlot from '@src/plugin-slots/CourseOutlineHeaderActionsSlot';
-import { NOTIFICATION_MESSAGES } from '@src/constants';
 import { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
@@ -71,8 +68,6 @@ const CourseOutline = () => {
   const {
     courseId,
     courseUsageKey,
-    handleAddBlock,
-    handleAddAndOpenUnit,
     isUnlinkModalOpen,
     closeUnlinkModal,
     currentSelection,
@@ -95,7 +90,6 @@ const CourseOutline = () => {
     isDisabledReindexButton,
     isHighlightsModalOpen,
     isConfigureModalOpen,
-    isConfigureOpPending,
     isDeleteModalOpen,
     closeHighlightsModal,
     handleConfigureModalClose,
@@ -108,17 +102,14 @@ const CourseOutline = () => {
     handleEnableHighlightsSubmit,
     handleInternetConnectionFailed,
     handleOpenHighlightsModal,
-    isSectionHighlightsUpdatePending,
     handleHighlightsFormSubmit,
     handleConfigureItemSubmit,
     handleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
-    isDuplicatingItem,
     handleVideoSharingOptionChange,
     handlePasteClipboardClick,
-    isPasting,
     notificationDismissUrl,
     discussionsSettings,
     discussionsIncontextLearnmoreUrl,
@@ -161,11 +152,6 @@ const CourseOutline = () => {
     setSections(() => [...sectionsList]);
   };
 
-  const {
-    isShow: isShowProcessingNotification,
-    title: processingNotificationTitle,
-  } = useSelector(getProcessingNotification);
-
   const { data: currentItemData } = useCourseItemData(currentSelection?.currentId);
 
   const itemCategory = currentItemData?.category || '';
@@ -518,20 +504,6 @@ const CourseOutline = () => {
         />
       </Container>
       <div className="alert-toast">
-        <ProcessingNotification
-          // Show processing toast if any mutation is running
-          isShow={
-            isShowProcessingNotification
-            || handleAddBlock.isPending
-            || handleAddAndOpenUnit.isPending
-            || isConfigureOpPending
-            || isSectionHighlightsUpdatePending
-            || isDuplicatingItem
-            || isPasting
-          }
-          // HACK: Use saving as default title till we have a need for better messages
-          title={processingNotificationTitle || NOTIFICATION_MESSAGES.saving}
-        />
         <InternetConnectionAlert
           isFailed={isInternetConnectionAlertFailed}
           isQueryPending={savingStatus === RequestStatus.PENDING}