Major dependency version update

flojud · May 14, 2024 · fbf433a · fbf433a
1 parent 305b35e
commit fbf433a
Show file tree

Hide file tree

Showing 11 changed files with 7,960 additions and 6,457 deletions.
diff --git a/.github/workflows/firebase-hosting-merge.yml → .github/workflows/build_and_push.yml b/.github/workflows/firebase-hosting-merge.yml → .github/workflows/build_and_push.yml
@@ -11,9 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm i
-      - run: npm run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+      - name: Use Node.js 18.18.2
+        uses: actions/setup-node@v3
+      - name: build project
+        shell: 'bash'
+        run: |
+          npm ci --omit=dev --ignore-scripts
+          npm run build
+      - uses: FirebaseExtended/[email protected]
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_KINDERGARTEN_TIMETRACKER }}'

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
diff --git a/.gitignore b/.gitignore
@@ -130,3 +130,4 @@ build
 
 src/firebase/config.tsx
 .firebase/hosting.YnVpbGQ.cache
+.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -27,6 +27,6 @@
   "triggerTaskOnSave.showStatusBarToggle": true,
   "task.allowAutomaticTasks": "on",
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true
+    "source.organizeImports": "explicit"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,31 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.4",
-    "@mui/icons-material": "^5.13.7",
-    "@mui/material": "^5.13.7",
-    "@mui/x-date-pickers": "^5.0.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^20.3.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "dayjs": "^1.11.9",
-    "firebase": "^9.23.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.13",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
+    "@mui/x-date-pickers": "^7.4.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "dayjs": "^1.11.11",
+    "firebase": "^10.12.0",
     "ga-4-react": "^0.1.281",
     "jspdf": "^2.5.1",
-    "jspdf-autotable": "^3.5.29",
-    "react": "^18.2.0",
+    "jspdf-autotable": "^3.8.2",
+    "react": "^18.3.1",
     "react-csv": "^2.2.2",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^3.3.2"
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -55,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@types/react-csv": "^1.1.3"
+    "@types/react-csv": "^1.1.10",
+    "web-vitals": "^4.0.0"
   }
 }
diff --git a/src/components/absences/AbsencesYearPage.tsx b/src/components/absences/AbsencesYearPage.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import CircleIcon from '@mui/icons-material/Circle';
-import { Button, Card, CardContent, Grid, List, ListItem, ListItemIcon, ListItemText, Stack, TextField, Typography } from '@mui/material';
-import { LocalizationProvider, PickersDay, PickersDayProps, StaticDatePicker } from '@mui/x-date-pickers';
+import { Button, Card, CardContent, Grid, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { LocalizationProvider, PickersDay, StaticDatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/de';
 import locale from 'dayjs/locale/de';
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { AuthContext } from '../../contexts/AuthContextProvider';
 import useStore from '../../hooks/useStore';
 import { IProfile } from '../../interfaces/Types';
@@ -16,50 +17,15 @@ import MainContainer from '../common/MainContainer';
 import AbsencesCard from './AbsencesCard';
 import NewAbsence from './NewAbsence';
 
-type HighlightedDay = {
-  date: Dayjs;
-  styles: React.CSSProperties;
-};
-
 const AbsencesYearPage = () => {
   const [value, setValue] = useState<Dayjs | null>(null);
   const [month, setMonth] = useState<Dayjs | null>(null);
   const [days, setDays] = useState<Dayjs[]>([]);
   const [showAbsenceButton, setShowAbsenceButton] = useState<boolean>(true);
-  const [highlightedDays, setHighlightedDays] = useState<HighlightedDay[]>([]);
   const authContext = useContext(AuthContext);
   const profile = authContext!.profile as IProfile;
   const { getAbsence } = useStore();
 
-  /*
-  Everytime the date range changes it checks for workdays,
-  weekends, holidays, vacation, etc and colors the days.
-  */
-  useEffect(() => {
-    setHighlightedDays([]);
-    days.forEach((day) => {
-      // check if it is a workday
-      const isWorkday = HolidayUtils.checkIsWorkday(profile.workingdays, day.locale({ ...locale }), profile.state);
-      if (!isWorkday)
-        setHighlightedDays((prevState) => [
-          ...prevState,
-          { date: day, styles: { backgroundColor: HolidayUtils.absenceColors.keinArbeitstag } },
-        ]);
-
-      // check if it is a holiday
-      getAbsence(day.unix())
-        .then((absence) => {
-          if (absence && absence.absencetype) {
-            setHighlightedDays((prevState) => [
-              ...prevState,
-              { date: day, styles: { backgroundColor: HolidayUtils.absenceCalendarColor(absence.absencetype) } },
-            ]);
-          }
-        })
-        .finally(() => {});
-    });
-  }, [days]);
-
   /*
   Simple Date Range calculation based on the calendar selection
   */
@@ -106,16 +72,49 @@ const AbsencesYearPage = () => {
     }
   }, [month]);
 
-  const renderWeekPickerDay = (date: Dayjs, selectedDates: Array<Dayjs | null>, pickersDayProps: PickersDayProps<Dayjs>) => {
-    if (highlightedDays) {
-      const matchedStyles = highlightedDays.reduce((a, v) => {
-        return date.isSame(v.date) ? v.styles : a;
-      }, {});
-      return <PickersDay {...pickersDayProps} sx={{ ...matchedStyles }} />;
-    } else {
-      return <PickersDay {...pickersDayProps} />;
-    }
+  /*
+  Highlight the days in the calendar based on the absence type.
+  */
+  const HighlightedDay = styled(PickersDay)(() => ({}));
+
+  const highlighter = (props: any) => {
+    // eslint-disable-next-line react/prop-types
+    const { day, outsideCurrentMonth, ...other } = props;
+    if (!outsideCurrentMonth) console.log(day);
+
+    // check if it is a workday
+    const isWorkday = HolidayUtils.checkIsWorkday(profile.workingdays, day, profile.state);
+    if (!isWorkday)
+      return (
+        <HighlightedDay
+          {...other}
+          sx={{ backgroundColor: HolidayUtils.absenceColors.keinArbeitstag }}
+          outsideCurrentMonth={outsideCurrentMonth}
+          day={day}
+        />
+      );
+
+    // check if it is a holiday
+
+    // todo: reduc store recduces api calls simpler checks possible
+    getAbsence(dayjs(day).unix())
+      .then((absence) => {
+        if (absence && absence.absencetype) {
+          return (
+            <HighlightedDay
+              {...other}
+              outsideCurrentMonth={outsideCurrentMonth}
+              day={day}
+              sx={{ backgroundColor: HolidayUtils.absenceCalendarColor(absence.absencetype) }}
+            />
+          );
+        }
+      })
+      .finally(() => {});
+
+    return <HighlightedDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />;
   };
+
   return (
     <>
       <MainContainer>
@@ -135,8 +134,13 @@ const AbsencesYearPage = () => {
                     onChange={(newValue) => {
                       setValue(newValue);
                     }}
+                    /*
                     renderInput={(params) => <TextField {...params} />}
                     renderDay={renderWeekPickerDay}
+                    */
+                    slots={{
+                      day: highlighter,
+                    }}
                   />
                 </LocalizationProvider>
 

diff --git a/src/components/common/DateRangePicker.tsx b/src/components/common/DateRangePicker.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Box } from '@mui/material';
-import TextField from '@mui/material/TextField';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers/';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import * as dayjs from 'dayjs';
@@ -63,7 +62,6 @@ const DateRangePicker: FC<DateRangePickerProps> = ({ onChange }: DateRangePicker
             onChange={(newValue) => {
               setFrom(newValue);
             }}
-            renderInput={(params) => <TextField {...params} />}
           />
         </LocalizationProvider>
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
@@ -73,7 +71,6 @@ const DateRangePicker: FC<DateRangePickerProps> = ({ onChange }: DateRangePicker
             onChange={(newValue) => {
               setTo(newValue);
             }}
-            renderInput={(params) => <TextField {...params} />}
           />
         </LocalizationProvider>
       </Box>

diff --git a/src/components/common/MonthPicker.tsx b/src/components/common/MonthPicker.tsx
@@ -1,4 +1,4 @@
-import { Box, TextField } from '@mui/material';
+import { Box } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import * as dayjs from 'dayjs';
@@ -72,6 +72,7 @@ const MonthPicker = ({ onChange }: MonthPickerProps) => {
         }}>
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
           <DatePicker
+            sx={{ width: '100%' }}
             views={['year', 'month']}
             label="Monat"
             minDate={firstTime}
@@ -80,7 +81,6 @@ const MonthPicker = ({ onChange }: MonthPickerProps) => {
             onChange={(value) => {
               setPickedMonth(value);
             }}
-            renderInput={(params) => <TextField {...params} sx={{ width: '100%' }} />}
           />
         </LocalizationProvider>
       </Box>

diff --git a/src/hooks/useAddToHomescreenPrompt.tsx b/src/hooks/useAddToHomescreenPrompt.tsx
@@ -18,8 +18,8 @@ export function useAddToHomescreenPrompt(): [IBeforeInstallPromptEvent | null, (
       setState(e);
     };
 
-    window.addEventListener('beforeinstallprompt', ready);
-    return () => window.removeEventListener('beforeinstallprompt', ready);
+    window.addEventListener('beforeinstallprompt', ready as EventListenerOrEventListenerObject);
+    return () => window.removeEventListener('beforeinstallprompt', ready as EventListenerOrEventListenerObject);
   }, []);
 
   useEffect(() => {

diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts