refactor: change toast component

openedx · Aug 13, 2024 · 44b4e1d · 44b4e1d
1 parent 7c59b4a
commit 44b4e1d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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>
   );