2 files changed, 28 insertions, 5 deletions
diff --git a/Timeline/ClientApp/src/app/common/AlertHost.tsx b/Timeline/ClientApp/src/app/common/AlertHost.tsx
index c815db2b..23b6c5f4 100644
--- a/Timeline/ClientApp/src/app/common/AlertHost.tsx
+++ b/Timeline/ClientApp/src/app/common/AlertHost.tsx
@@ -9,6 +9,7 @@ import {
   kAlertHostId,
   AlertInfo,
 } from './alert-service';
+import { useTranslation } from 'react-i18next';
 
 interface AutoCloseAlertProps {
   alert: AlertInfo;
@@ -17,15 +18,35 @@ interface AutoCloseAlertProps {
 
 export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
   const { alert } = props;
+  const { dismissTime } = alert;
+
+  const { t } = useTranslation();
 
   React.useEffect(() => {
-    const tag = window.setTimeout(props.close, 5000);
-    return () => window.clearTimeout(tag);
-  }, [props.close]);
+    const tag =
+      dismissTime === 'never'
+        ? null
+        : typeof dismissTime === 'number'
+        ? window.setTimeout(props.close, dismissTime)
+        : window.setTimeout(props.close, 5000);
+    return () => {
+      if (tag != null) {
+        window.clearTimeout(tag);
+      }
+    };
+  }, [dismissTime, props.close]);
 
   return (
     <Alert className="m-3" color={alert.type ?? 'primary'} toggle={props.close}>
-      {alert.message}
+      {(() => {
+        const { message } = alert;
+        if (typeof message === 'function') {
+          const Message = message;
+          return <Message />;
+        } else if (typeof message === 'object' && message.type === 'i18n') {
+          return t(message.key);
+        } else return alert.message;
+      })()}
     </Alert>
   );
 };
diff --git a/Timeline/ClientApp/src/app/common/alert-service.ts b/Timeline/ClientApp/src/app/common/alert-service.ts
index 6d3f8af8..79eecc82 100644
--- a/Timeline/ClientApp/src/app/common/alert-service.ts
+++ b/Timeline/ClientApp/src/app/common/alert-service.ts
@@ -1,8 +1,10 @@
+import React from 'react';
 import pull from 'lodash/pull';
 
 export interface AlertInfo {
   type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-  message: string;
+  message: string | React.FC<unknown> | { type: 'i18n'; key: string };
+  dismissTime?: number | 'never';
 }
 
 export interface AlertInfoEx extends AlertInfo {