[#77] added complex ui for repetition, fixed broken tests due to new feature

src/components/Event/EventRepeat.tsx

@@ -0,0 +1,164 @@
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  SelectChangeEvent,
+  MenuItem,
+  Box,
+  Stack,
+  Paper,
+  Typography,
+  TextField,
+  Checkbox,
+  List,
+  ListItem,
+  FormControlLabel,
+  FormGroup,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import { useState } from "react";
+import { RepetitionObject } from "../../features/Events/EventsTypes";
+
+export default function RepeatEvent({
+  repetition,
+  setRepetition,
+  isOwn = true,
+}: {
+  repetition: RepetitionObject;
+  setRepetition: Function;
+  isOwn?: boolean;
+}) {
+  console.log(JSON.stringify(repetition));
+
+  const repetitionValues = ["day", "week", "month", "year"];
+  const [interval, setInterval] = useState(repetition.interval ?? 0);
+  const [selectedDays, setSelectedDays] = useState<string[]>(
+    repetition.selectedDays ?? []
+  );
+  const [endOption, setEndOption] = useState("");
+  const [occurrences, setOccurrences] = useState(repetition.occurrences) ?? 0;
+  const [endDate, setEndDate] = useState(repetition.endDate ?? "");
+  const days = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
+
+  const handleDayChange = (day: string) => {
+    setSelectedDays((prev: string[]) =>
+      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+    );
+  };
+  return (
+    <FormControl fullWidth margin="dense" size="small">
+      <InputLabel id="repeat">Repetition</InputLabel>
+      <Select
+        labelId="repeat"
+        value={repetition.freq ?? ""}
+        disabled={!isOwn}
+        label="Repetition"
+        onChange={(e: SelectChangeEvent) =>
+          setRepetition({ ...repetition, freq: e.target.value })
+        }
+      >
+        <MenuItem value={""}>No Repetition</MenuItem>
+        <MenuItem value={"daily"}>Repeat daily</MenuItem>
+        <MenuItem value={"weekly"}>Repeat weekly</MenuItem>
+        <MenuItem value={"monthly"}>Repeat monthly</MenuItem>
+        <MenuItem value={"yearly"}>Repeat yearly</MenuItem>
+      </Select>
+      {repetition.freq && (
+        <Stack>
+          <Box display="flex" alignItems="center" gap={2} mb={2}>
+            <Typography>Interval:</Typography>
+            <TextField
+              type="number"
+              value={interval}
+              onChange={(e) => setInterval(Number(e.target.value))}
+              size="small"
+              sx={{ width: 80 }}
+            />
+
+            <Typography>
+              {
+                repetitionValues[
+                  repetitionValues.findIndex((el) => el === repetition.freq)
+                ]
+              }
+            </Typography>
+          </Box>
+          {repetition.freq === "weekly" && (
+            <Box>
+              <Typography variant="body2" gutterBottom>
+                On days:
+              </Typography>
+              <FormGroup row>
+                {days.map((day) => (
+                  <FormControlLabel
+                    key={day}
+                    control={
+                      <Checkbox
+                        checked={selectedDays.includes(day)}
+                        onChange={() => handleDayChange(day)}
+                      />
+                    }
+                    label={day}
+                  />
+                ))}
+              </FormGroup>
+            </Box>
+          )}
+          <Box>
+            <Typography variant="body2" gutterBottom sx={{ mt: 2 }}>
+              End:
+            </Typography>
+            <RadioGroup
+              value={endOption}
+              onChange={(e) => setEndOption(e.target.value)}
+            >
+              <FormControlLabel
+                value="never"
+                control={<Radio />}
+                label="Never"
+              />
+
+              <FormControlLabel
+                value="after"
+                control={<Radio />}
+                label={
+                  <Box display="flex" alignItems="center" gap={1}>
+                    After
+                    <TextField
+                      type="number"
+                      size="small"
+                      value={occurrences}
+                      onChange={(e) => setOccurrences(Number(e.target.value))}
+                      sx={{ width: 100 }}
+                      inputProps={{ min: 1 }}
+                      disabled={endOption !== "after"}
+                    />
+                    occurrences
+                  </Box>
+                }
+              />
+
+              <FormControlLabel
+                value="on"
+                control={<Radio />}
+                label={
+                  <Box display="flex" alignItems="center" gap={1}>
+                    On
+                    <TextField
+                      type="date"
+                      size="small"
+                      value={endDate}
+                      onChange={(e) => setEndDate(e.target.value)}
+                      disabled={endOption !== "on"}
+                    />
+                  </Box>
+                }
+              />
+            </RadioGroup>
+          </Box>
+        </Stack>
+      )}
+    </FormControl>
+  );
+}

src/components/Menubar/Menubar.tsx

@@ -74,7 +74,7 @@ export function Menubar() {
       >
         <div className="app-grid">
           {applist.map((prop: AppIconProps) => (
-            <AppIcon prop={prop} />
+            <AppIcon key={prop.name} prop={prop} />
           ))}
         </div>
       </Popover>
@@ -96,7 +96,6 @@ export function MainTitle() {
 function AppIcon({ prop }: { prop: AppIconProps }) {
   return (
     <a
-      key={prop.name}
       href={prop.link}
       target="_blank"
       style={{ textDecoration: "none", color: "inherit" }}