diff --git a/src/generic/processing-notification/index.jsx b/src/generic/processing-notification/index.jsx index 163bf5fd3a..75c718c830 100644 --- a/src/generic/processing-notification/index.jsx +++ b/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 }) => ( ( ProcessingNotification.propTypes = { isShow: PropTypes.bool.isRequired, - title: PropTypes.oneOf(Object.values(NOTIFICATION_MESSAGES)).isRequired, + title: PropTypes.string.isRequired, }; export default ProcessingNotification; diff --git a/src/generic/toast-context/index.test.tsx b/src/generic/toast-context/index.test.tsx index ea00ba3a1d..f7e0a2e4b0 100644 --- a/src/generic/toast-context/index.test.tsx +++ b/src/generic/toast-context/index.test.tsx @@ -50,6 +50,7 @@ describe('', () => { }, }); store = initializeStore(); + jest.useFakeTimers(); }); afterEach(() => { @@ -61,6 +62,13 @@ describe('', () => { expect(await screen.findByText('This is the toast!')).toBeInTheDocument(); }); + it('should close toast after 5000ms', async () => { + render(); + 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(); expect(await screen.findByText('Content')).toBeInTheDocument(); diff --git a/src/generic/toast-context/index.tsx b/src/generic/toast-context/index.tsx index 3e98407844..f4fd2aa332 100644 --- a/src/generic/toast-context/index.tsx +++ b/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) => { {props.children} { toastMessage && ( - - {toastMessage} - + )} );