From 44b4e1dafd9dcdedf4d6edbb777c3a3ee8d64ad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Tue, 13 Aug 2024 18:32:29 -0300
Subject: [PATCH] refactor: change toast component

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

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 }) => (
   <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.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) => {
     <ToastContext.Provider value={context}>
       {props.children}
       { toastMessage && (
-        <Toast show={toastMessage !== null} onClose={closeToast}>
-          {toastMessage}
-        </Toast>
+        <ProcessingNotification isShow={toastMessage !== null} title={toastMessage} />
       )}
     </ToastContext.Provider>
   );