feat: updated alert info and card components

sigp · Jul 12, 2023 · cf40aa0 · cf40aa0
1 parent f3e2b5a
commit cf40aa0
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 24 deletions.
diff --git a/src/components/AlertCard/AlertCard.tsx b/src/components/AlertCard/AlertCard.tsx
@@ -1,22 +1,27 @@
 import StatusBar, { StatusBarProps } from '../StatusBar/StatusBar'
 import Typography from '../Typography/Typography'
 import { FC } from 'react'
+
 export interface AlertCardProps extends StatusBarProps {
   text: string
   subText: string
+  onClick?: () => void
 }
 
-const AlertCard: FC<AlertCardProps> = ({ text, subText, ...props }) => {
+const AlertCard: FC<AlertCardProps> = ({ text, subText, onClick, ...props }) => {
   return (
-    <div className='w-full h-14 border-t-0 md:border-l-0 border-style500 flex justify-between items-center space-x-2 p-2'>
+    <div className='w-full h-14 group border-b-style500 flex justify-between items-center space-x-2 p-2'>
       <StatusBar {...props} />
       <div className='w-full max-w-tiny'>
         <Typography type='text-caption2'>{text}</Typography>
         <Typography type='text-caption2' isUpperCase>
           {subText}
         </Typography>
       </div>
-      <i className='bi-info-circle-fill text-dark200 dark:text-dark300' />
+      <i
+        onClick={onClick}
+        className='bi-trash-fill cursor-pointer opacity-0 group-hover:opacity-100 text-dark200 dark:text-dark300'
+      />
     </div>
   )
 }

diff --git a/src/components/DiagnosticTable/AlertInfo.tsx b/src/components/DiagnosticTable/AlertInfo.tsx
@@ -2,39 +2,67 @@ import Typography from '../Typography/Typography'
 import AlertCard from '../AlertCard/AlertCard'
 import { useTranslation } from 'react-i18next'
 import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import useDivDimensions from '../../hooks/useDivDimensions'
+import { useEffect, useMemo } from 'react'
+import sortAlertMessagesBySeverity from '../../utilities/sortAlerts'
 
 const AlertInfo = () => {
   const { t } = useTranslation()
-  const { natAlert, peerCountAlert } = useDiagnosticAlerts()
+  const { alerts, dismissAlert, resetDismissed } = useDiagnosticAlerts()
+  const isFiller = alerts.length < 6
+  const { ref, dimensions } = useDivDimensions()
+
+  const sortedAlerts = useMemo(() => {
+    return sortAlertMessagesBySeverity(alerts)
+  }, [alerts])
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      resetDismissed()
+    }, 60000)
+
+    return () => clearInterval(intervalId)
+  }, [])
+
   return (
-    <div className='h-full w-full flex flex-col'>
-      <div className='w-full h-12 flex items-center justify-between px-4 md:border-l-0 border-style500'>
+    <div ref={ref} className='h-full w-full flex flex-col border-l-0 border-t-0 border-style500'>
+      <div className='w-full h-12 flex items-center justify-between px-4 md:border-l-0 border-r-0 border-style500'>
         <Typography type='text-caption1' color='text-primary' darkMode='dark:text-white' isBold>
           {t('alertInfo.alerts')}
         </Typography>
         <Typography type='text-tiny' className='uppercase' color='text-dark400'>
           {t('viewAll')}
         </Typography>
       </div>
-      {natAlert && (
-        <AlertCard
-          status={natAlert.severity}
-          count={3}
-          subText={natAlert.subText}
-          text={natAlert.message}
-        />
-      )}
-      {peerCountAlert && (
-        <AlertCard
-          status={peerCountAlert.severity}
-          count={2}
-          subText={peerCountAlert.subText}
-          text={peerCountAlert.message}
-        />
+      {dimensions && (
+        <div
+          style={{ maxHeight: `${dimensions.height - 48}px` }}
+          className='h-full w-full flex flex-col'
+        >
+          {sortedAlerts.length > 0 && (
+            <div className={`overflow-scroll scrollbar-hide ${!isFiller ? 'flex-1' : ''}`}>
+              {sortedAlerts.map((alert) => {
+                const { severity, subText, message, id } = alert
+                return (
+                  <AlertCard
+                    key={id}
+                    status={severity}
+                    count={3}
+                    onClick={() => dismissAlert(alert)}
+                    subText={subText}
+                    text={message}
+                  />
+                )
+              })}
+            </div>
+          )}
+          {isFiller && (
+            <div className='flex-1 flex items-center justify-center'>
+              <i className='bi bi-lightning-fill text-primary text-h3 opacity-20' />
+            </div>
+          )}
+        </div>
       )}
-      <div className='flex-1 md:border-l-0 border-t-0 border-style500 flex items-center justify-center'>
-        <i className='bi bi-lightning-fill text-primary text-h3 opacity-20' />
-      </div>
     </div>
   )
 }