From 21c9e302073ce93f11157992a82e6b96d27057ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 22 Aug 2024 10:50:43 -0300
Subject: [PATCH] refactor: change toast component (#1211)

---
 src/generic/processing-notification/index.jsx |  4 +---
 src/generic/toast-context/index.test.tsx      |  8 ++++++++
 src/generic/toast-context/index.tsx           | 15 ++++++++++-----
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/generic/processing-notification/index.jsx b/src/generic/processing-notification/index.jsx
index 163bf5fd3..75c718c83 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 }) => (
   <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;
diff --git a/src/generic/toast-context/index.test.tsx b/src/generic/toast-context/index.test.tsx
index ea00ba3a1..f7e0a2e4b 100644
--- a/src/generic/toast-context/index.test.tsx
+++ b/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();
diff --git a/src/generic/toast-context/index.tsx b/src/generic/toast-context/index.tsx
index 3e9840784..f4fd2aa33 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) => {
     <ToastContext.Provider value={context}>
       {props.children}
       { toastMessage && (
-        <Toast show={toastMessage !== null} onClose={closeToast}>
-          {toastMessage}
-        </Toast>
+        <ProcessingNotification isShow={toastMessage !== null} title={toastMessage} />
       )}
     </ToastContext.Provider>
   );