add hook to refresh AlertCards every 60 seconds

Author: Yoctoboy

src/components/Alerts/AlertsList/AlertCard.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../../utils/dates';
 import { useTranslationPrefix } from '../../../utils/useTranslationPrefix';
 import { CameraName } from '../../Common/CameraName';
+import { useRefreshEvery } from './useRefreshEvery';
 
 interface AlertCardType {
   isActive: boolean;
@@ -34,6 +35,8 @@ export const AlertCard = ({ isActive, setActive, alert }: AlertCardType) => {
     translationFunction: timeTranslation,
   });
 
+  useRefreshEvery(60); // re-render every 60s
+
   return (
     <Card sx={{ borderRadius: '2px' }}>
       <CardActionArea

src/components/Alerts/AlertsList/useRefreshEvery.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+/*
+ * Use this function when a component should be rerendered every X seconds.
+ * Simply add useRefreshEvery(60) to have your component be refreshed every minute
+ */
+export const useRefreshEvery = (timeInSeconds: number): number => {
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTick((prev) => prev + 1);
+    }, timeInSeconds * 1000);
+
+    return () => clearInterval(interval);
+  }, [timeInSeconds]);
+
+  return tick;
+};