Refactor Toast to global component (#122)

* Refactor Toast to global component, use eventDispatcher to dispatch toast events * Error handling for TTS
2025-01-08 14:12:38 +01:00
parent 15d8d61841
commit 89b2eba2af
8 changed files with 105 additions and 67 deletions
@@ -1,16 +1,65 @@
+import { eventDispatcher } from '@/utils/event';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';

-const Toast: React.FC<{ message: string; toastClass?: string; alertClass?: string }> = ({
-  message,
-  toastClass,
-  alertClass,
-}) => (
-  <div className={clsx('toast toast-center toast-middle', toastClass)}>
-    <div className={clsx('alert flex items-center justify-center border-0', alertClass)}>
-      <span className='whitespace-normal break-words'>{message}</span>
-    </div>
-  </div>
-);
+export type ToastType = 'info' | 'success' | 'warning' | 'error';

-export default Toast;
+export const Toast = () => {
+  const [toastMessage, setToastMessage] = useState('');
+  const toastType = useRef<ToastType>('info');
+  const toastTimeout = useRef(5000);
+  const messageClass = useRef('');
+  const toastDismissTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const toastClassMap = {
+    info: 'toast-info toast-center toast-middle',
+    success: 'toast-success toast-top toast-end pt-11',
+    warning: 'toast-warning toast-top toast-end pt-11',
+    error: 'toast-error toast-top toast-end pt-11',
+  };
+  const alertClassMap = {
+    info: 'alert-primary',
+    success: 'alert-success',
+    warning: 'alert-warning',
+    error: 'alert-error',
+  };
+
+  useEffect(() => {
+    if (toastDismissTimeout.current) clearTimeout(toastDismissTimeout.current);
+    toastDismissTimeout.current = setTimeout(() => setToastMessage(''), toastTimeout.current);
+    return () => {
+      if (toastDismissTimeout.current) clearTimeout(toastDismissTimeout.current);
+    };
+  }, [toastMessage]);
+
+  const handleShowToast = async (event: CustomEvent) => {
+    const { message, type = 'info', timeout = 5000, className = '' } = event.detail;
+    setToastMessage(message);
+    toastType.current = type;
+    toastTimeout.current = timeout;
+    messageClass.current = className;
+  };
+
+  useEffect(() => {
+    eventDispatcher.on('toast', handleShowToast);
+    return () => {
+      eventDispatcher.off('toast', handleShowToast);
+    };
+  }, []);
+
+  return (
+    toastMessage && (
+      <div className={clsx('toast toast-center toast-middle', toastClassMap[toastType.current])}>
+        <div
+          className={clsx(
+            'alert flex max-w-80 items-center justify-center border-0',
+            alertClassMap[toastType.current],
+          )}
+        >
+          <span className={clsx('whitespace-normal break-words', messageClass.current)}>
+            {toastMessage}
+          </span>
+        </div>
+      </div>
+    )
+  );
+};