refactor: change toast component (#1211)

Author: rpenido

src/generic/processing-notification/index.jsx

@@ -5,8 +5,6 @@ import { Badge, Icon } from '@openedx/paragon';
 import { Settings as IconSettings } from '@openedx/paragon/icons';
 import { capitalize } from 'lodash';
 
-import { NOTIFICATION_MESSAGES } from '../../constants';
-
 const ProcessingNotification = ({ isShow, title }) => (
   <Badge
     className={classNames('processing-notification', {
@@ -24,7 +22,7 @@ const ProcessingNotification = ({ isShow, title }) => (
 
 ProcessingNotification.propTypes = {
   isShow: PropTypes.bool.isRequired,
-  title: PropTypes.oneOf(Object.values(NOTIFICATION_MESSAGES)).isRequired,
+  title: PropTypes.string.isRequired,
 };
 
 export default ProcessingNotification;

src/generic/toast-context/index.test.tsx

@@ -50,6 +50,7 @@ describe('<ToastProvider />', () => {
       },
     });
     store = initializeStore();
+    jest.useFakeTimers();
   });
 
   afterEach(() => {
@@ -61,6 +62,13 @@ describe('<ToastProvider />', () => {
     expect(await screen.findByText('This is the toast!')).toBeInTheDocument();
   });
 
+  it('should close toast after 5000ms', async () => {
+    render(<RootWrapper><TestComponentToShow /></RootWrapper>);
+    expect(await screen.findByText('This is the toast!')).toBeInTheDocument();
+    jest.advanceTimersByTime(6000);
+    expect(screen.queryByText('This is the toast!')).not.toBeInTheDocument();
+  });
+
   it('should close toast', async () => {
     render(<RootWrapper><TestComponentToClose /></RootWrapper>);
     expect(await screen.findByText('Content')).toBeInTheDocument();

src/generic/toast-context/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Toast } from '@openedx/paragon';
+
+import ProcessingNotification from '../processing-notification';
 
 export interface ToastContextData {
   toastMessage: string | null;
@@ -35,7 +36,13 @@ export const ToastProvider = (props: ToastProviderProps) => {
     setToastMessage(null);
   }, []);
 
-  const showToast = React.useCallback((message) => setToastMessage(message), [setToastMessage]);
+  const showToast = React.useCallback((message) => {
+    setToastMessage(message);
+    // Close the toast after 5 seconds
+    setTimeout(() => {
+      setToastMessage(null);
+    }, 5000);
+  }, [setToastMessage]);
   const closeToast = React.useCallback(() => setToastMessage(null), [setToastMessage]);
 
   const context = React.useMemo(() => ({
@@ -48,9 +55,7 @@ export const ToastProvider = (props: ToastProviderProps) => {
     <ToastContext.Provider value={context}>
       {props.children}
       { toastMessage && (
-        <Toast show={toastMessage !== null} onClose={closeToast}>
-          {toastMessage}
-        </Toast>
+        <ProcessingNotification isShow={toastMessage !== null} title={toastMessage} />
       )}
     </ToastContext.Provider>
   );