Browse Source

[frontend] Dismiss info alert popup messages after 3 seconds

Ananya_Agarwal 1 year ago
parent
commit
0f1c58c87d

+ 17 - 7
desktop/core/src/desktop/js/reactComponents/AlertComponent/AlertComponent.tsx

@@ -25,15 +25,16 @@ interface HueAlert {
   message: string;
 }
 
+type alertType = 'error' | 'info' | 'warning';
 interface VisibleAlert {
   alert: HueAlert;
-  type: 'error' | 'info' | 'warning';
+  type: alertType;
 }
 
 const AlertComponent: React.FC = () => {
   const [alert, setAlerts] = useState<VisibleAlert[]>([]);
 
-  const updateAlerts = (alert, type) => {
+  const updateAlerts = (alert: HueAlert, type: alertType) => {
     if (!alert.message) {
       return;
     }
@@ -43,7 +44,16 @@ const AlertComponent: React.FC = () => {
       if (activeAlerts.some(activeAlerts => activeAlerts.alert.message === alert.message)) {
         return activeAlerts;
       }
-      return [...activeAlerts, { alert, type }];
+
+      const newAlert:VisibleAlert = { alert, type };
+
+      if(type === 'info') {
+        setTimeout(() => {
+          handleClose(newAlert);
+        }, 3000);
+      }
+
+      return [...activeAlerts, newAlert];
     });
   };
 
@@ -74,14 +84,14 @@ const AlertComponent: React.FC = () => {
     };
   }, []);
 
-  const handleClose = (alertObjToClose: HueAlert) => {
-    const filteredAlerts = alert.filter(alertObj => alertObj.alert !== alertObjToClose);
+  const handleClose = (alertObjToClose: VisibleAlert) => {
+    const filteredAlerts = alert.filter(alertObj => alertObj !== alertObjToClose);
     setAlerts(filteredAlerts);
   };
 
   const { t } = i18nReact.useTranslation();
 
-  const getHeader = alert => {
+  const getHeader = (alert: VisibleAlert) => {
     if (alert.type === 'error') {
       return t('Error');
     } else if (alert.type === 'info') {
@@ -101,7 +111,7 @@ const AlertComponent: React.FC = () => {
           description={alertObj.alert.message}
           showIcon={true}
           closable={true}
-          onClose={() => handleClose(alertObj.alert)}
+          onClose={() => handleClose(alertObj)}
         />
       ))}
     </div>