Add App Version Update Button on Home page

src/components/home/AppVersion.tsx

@@ -0,0 +1,42 @@
+import AutorenewIcon from '@mui/icons-material/Autorenew';
+import { IconButton, Stack, Typography } from '@mui/material';
+import packageJson from '../../../package.json';
+import useNotification from '../../hooks/useNotification';
+const AppVersion = () => {
+  const { notifyContext } = useNotification();
+  const APPLICATION_VERSION = packageJson.version;
+
+  /*
+  Update service worker on new version
+  */
+  const updateServiceWorker = () => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready
+        .then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+            notifyContext.addNotification('Deine App wurde aktualisiert', 'success');
+          });
+        })
+        .catch((error) => {
+          notifyContext.addNotification('Ops da hat was nicht geklappt!', 'error');
+          console.error('Service Worker Error: ', error);
+        });
+    } else {
+      notifyContext.addNotification('Es wurde kein Update gefunden', 'info');
+    }
+  };
+
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center" gap={0}>
+      <Typography variant="caption" color="text.disabled">
+        Du nutzt die v{APPLICATION_VERSION}, auf Updates prüfen?
+      </Typography>
+      <IconButton aria-label="delete" size="small" onClick={updateServiceWorker}>
+        <AutorenewIcon fontSize="inherit" />
+      </IconButton>
+    </Stack>
+  );
+};
+
+export default AppVersion;

src/components/home/UserHomePage.tsx

@@ -6,12 +6,13 @@ import { Stack, Typography } from '@mui/material';
 import { BarChart, Gauge, LineChart } from '@mui/x-charts';
 import { Dayjs } from 'dayjs';
 import { useEffect, useState } from 'react';
-import packageJson from '../../../package.json';
+
 import { useAppSelector } from '../../store/hooks';
 import { ReactComponent as HomeSvg } from '../../svg/home.svg';
 import AbsenceUtils from '../../utils/AbsenceUtils';
 import DayjsUtils from '../../utils/DayjsUtils';
 import TimeUtils from '../../utils/TimeUtils';
+import AppVersion from './AppVersion';
 import HomeCard from './HomeCard';
 
 const UserHomePage = () => {
@@ -34,8 +35,6 @@ const UserHomePage = () => {
   const firstDayOfMonth = DayjsUtils.firstDayOfCurrentMonth();
   const startOfCurrentYear = DayjsUtils.startOfCurrentYear();
 
-  const APPLICATION_VERSION = packageJson.version;
-
   const evaluateTimes = useAppSelector((state) => state.times.evaluateTimes);
 
   const dataset = evaluateTimes.map((item) => ({
@@ -190,9 +189,7 @@ const UserHomePage = () => {
           </HomeCard>
         )}
 
-        <Typography variant="caption" color="text.disabled" align="center">
-          v{APPLICATION_VERSION}
-        </Typography>
+        <AppVersion />
       </Stack>
     </Stack>
   );