fix(ui): changes for vite & mui 6

- fix styling of date picker
- fix rendering of available slots
- use [Grid v2](https://mui.com/material-ui/migration/migration-grid-v2/)

backend/package.json

@@ -69,11 +69,11 @@
     "eslint-config-react-app": "^7.0.1",
     "jest": "^29.7.0",
     "nodemon": "^3.0.1",
-    "supertest": "^6.3.3",
+    "supertest": "^7.0.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "vitest": "^0.34.6"
+    "vitest": "^2.1.1"
   },
   "eslintConfig": {
     "extends": [

backend/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "es6",
     "allowJs": true,
     "strict": false,
     "skipLibCheck": true,

client/src/helpers/services/event_services.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import type { Event, IntervalSet } from "common";
+import { Event, IntervalSet } from "common";
 
 export async function saveUserEvent(
   token: string,

client/src/pages/Booking.tsx

@@ -8,14 +8,14 @@ import { StaticDatePicker, PickersDay, PickersDayProps } from '@mui/x-date-picke
 import {
   createTheme,
   ThemeProvider,
+  styled
 } from "@mui/material/styles";
 
 import {
   Avatar,
   Box,
   Button,
   Container,
-  Grid,
   Paper,
   Stepper,
   Step,
@@ -24,6 +24,7 @@ import {
   Typography,
 } from "@mui/material";
 
+import Grid from '@mui/material/Grid2';
 
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
@@ -36,7 +37,7 @@ import clsx from "clsx";
 import { Day, addMonths, addDays, addMinutes, format, startOfDay, endOfDay } from "date-fns";
 import BookDetails from "../components/BookDetails";
 import { insertIntoGoogle } from "../helpers/services/google_services";
-import type { EMPTY_EVENT, Event, Slot, IntervalSet } from "common";
+import { EMPTY_EVENT, Event, Slot, IntervalSet } from "common";
 import { UserDocument } from "../helpers/UserDocument";
 
 const theme = createTheme({
@@ -48,14 +49,6 @@ const theme = createTheme({
         },
       },
     },
-    /*
-    MuiPickersDay: {
-      styleOverrides: {
-        root: {
-          borderRadius: "50%",
-        },
-      },
-    },*/
     MuiTypography: {
       defaultProps: {
         variantMapping: {
@@ -281,11 +274,23 @@ const Booking = (props: any) => {
     }
   };
 
+  const StyledPickersDay = styled(PickersDay)(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightLight,
+    "&.highlight": {
+      fontWeight: theme.typography.fontWeightBold,
+      "&:hover, &:focus": {
+        backgroundColor: theme.palette.primary.light,
+        color: theme.palette.primary.contrastText,
+      },
+    },
+  }));
+
   const renderPickerDay = (
     props: PickersDayProps<Date> & { selectedDate: Date | null }) => {
-    const { day, selectedDate, ...other } = props;
+    const { day, selectedDate } = props;
+    //console.log("rendering day: %o %o", day, props);
     return (
-      <PickersDay
+      <StyledPickersDay
         {...props}
         disableMargin
         disabled={!checkDay(day)}
@@ -336,9 +341,9 @@ const Booking = (props: any) => {
           direction="row"
           alignItems="flex-start"
         >
-          {times.map((time) => (
-            <Grid item>
-              <Button variant="contained" onClick={handleTime(time)}>
+          {times.map((time, index) => (
+            <Grid item key={index}>
+              <Button variant="text" onClick={handleTime(time)}>
                 {format(time, "HH:mm")}
               </Button>
             </Grid>
@@ -466,7 +471,7 @@ const Booking = (props: any) => {
                       onChange={handleDateChange}
                       onMonthChange={handleMonthChange}
                       slots={{ day: renderPickerDay }}
-                      slotProps={{ day: { selectedDay: selectedDate } as any }}
+
                     />
                   </Grid>
 

common/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "ES6",
     "allowJs": true,
     "strict": false,
     "baseUrl": "./",
@@ -14,12 +14,17 @@
     "emitDecoratorMetadata": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node"
+    ]
   },
   "include": [
     "src/*.ts",
     "src/test/intervalSet.spec.ts",
     "src/test/freeBusy.spec.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }