[#77] added repetition proper display and editing

src/components/Event/EventRepeat.tsx

@@ -6,18 +6,15 @@ import {
   MenuItem,
   Box,
   Stack,
-  Paper,
   Typography,
   TextField,
   Checkbox,
-  List,
-  ListItem,
   FormControlLabel,
   FormGroup,
   Radio,
   RadioGroup,
 } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RepetitionObject } from "../../features/Events/EventsTypes";
 
 export default function RepeatEvent({
@@ -29,23 +26,31 @@ export default function RepeatEvent({
   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) => {
+  // derive endOption based on repetition
-    setSelectedDays((prev: string[]) =>
+  const getEndOption = () => {
-      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+    if (repetition.occurrences && repetition.occurrences > 0) return "after";
-    );
+    if (repetition.endDate) return "on";
+    return "never";
   };
+
+  const [endOption, setEndOption] = useState(getEndOption());
+
+  // keep endOption in sync if repetition changes from parent
+  useEffect(() => {
+    setEndOption(getEndOption());
+  }, [repetition.occurrences, repetition.endDate]);
+
+  const handleDayChange = (day: string) => {
+    const updatedDays = repetition.selectedDays?.includes(day)
+      ? repetition.selectedDays.filter((d) => d !== day)
+      : [...(repetition.selectedDays ?? []), day];
+
+    setRepetition({ ...repetition, selectedDays: updatedDays });
+  };
+
   return (
     <FormControl fullWidth margin="dense" size="small">
       <InputLabel id="repeat">Repetition</InputLabel>
@@ -64,18 +69,24 @@ export default function RepeatEvent({
         <MenuItem value={"monthly"}>Repeat monthly</MenuItem>
         <MenuItem value={"yearly"}>Repeat yearly</MenuItem>
       </Select>
+
       {repetition.freq && (
         <Stack>
+          {/* Interval */}
           <Box display="flex" alignItems="center" gap={2} mb={2}>
             <Typography>Interval:</Typography>
             <TextField
               type="number"
-              value={interval}
+              value={repetition.interval ?? 0}
-              onChange={(e) => setInterval(Number(e.target.value))}
+              onChange={(e) =>
+                setRepetition({
+                  ...repetition,
+                  interval: Number(e.target.value),
+                })
+              }
               size="small"
               sx={{ width: 80 }}
             />
-
             <Typography>
               {
                 repetitionValues[
@@ -84,6 +95,8 @@ export default function RepeatEvent({
               }
             </Typography>
           </Box>
+
+          {/* Weekly selection */}
           {repetition.freq === "weekly" && (
             <Box>
               <Typography variant="body2" gutterBottom>
@@ -95,7 +108,9 @@ export default function RepeatEvent({
                     key={day}
                     control={
                       <Checkbox
-                        checked={selectedDays.includes(day)}
+                        checked={
+                          repetition.selectedDays?.includes(day) ?? false
+                        }
                         onChange={() => handleDayChange(day)}
                       />
                     }
@@ -105,13 +120,38 @@ export default function RepeatEvent({
               </FormGroup>
             </Box>
           )}
+
+          {/* End options */}
           <Box>
             <Typography variant="body2" gutterBottom sx={{ mt: 2 }}>
               End:
             </Typography>
             <RadioGroup
               value={endOption}
-              onChange={(e) => setEndOption(e.target.value)}
+              onChange={(e) => {
+                const value = e.target.value;
+                setEndOption(value);
+
+                if (value === "never") {
+                  setRepetition({ ...repetition, occurrences: 0, endDate: "" });
+                }
+                if (value === "after") {
+                  setRepetition({
+                    freq: repetition.freq,
+                    interval: repetition.interval,
+                    occurence: Number(e.target.value),
+                  });
+                }
+                if (value === "on") {
+                  setRepetition({
+                    freq: repetition.freq,
+                    interval: repetition.interval,
+                    endDate: new Date(e.target.value)
+                      .toISOString()
+                      .slice(0, 16),
+                  });
+                }
+              }}
             >
               <FormControlLabel
                 value="never"
@@ -128,8 +168,14 @@ export default function RepeatEvent({
                     <TextField
                       type="number"
                       size="small"
-                      value={occurrences}
+                      value={repetition.occurrences ?? 0}
-                      onChange={(e) => setOccurrences(Number(e.target.value))}
+                      onChange={(e) =>
+                        setRepetition({
+                          freq: repetition.freq,
+                          interval: repetition.interval,
+                          occurence: Number(e.target.value),
+                        })
+                      }
                       sx={{ width: 100 }}
                       inputProps={{ min: 1 }}
                       disabled={endOption !== "after"}
@@ -148,8 +194,14 @@ export default function RepeatEvent({
                     <TextField
                       type="date"
                       size="small"
-                      value={endDate}
+                      value={repetition.endDate ?? ""}
-                      onChange={(e) => setEndDate(e.target.value)}
+                      onChange={(e) =>
+                        setRepetition({
+                          freq: repetition.freq,
+                          interval: repetition.interval,
+                          endDate: e.target.value,
+                        })
+                      }
                       disabled={endOption !== "on"}
                     />
                   </Box>

src/features/Events/EventDisplay.tsx

@@ -124,7 +124,8 @@ export default function EventDisplayModal({
     if (!event || !calendar) {
       onClose({}, "backdropClick");
     }
-  }, [open, eventId, dispatch, onClose]);
+    setRepetition(event.repetition ?? ({} as RepetitionObject));
+  }, [open, eventId, dispatch, onClose, event]);
 
   if (!event || !calendar) return null;
 
@@ -224,315 +225,331 @@ export default function EventDisplayModal({
 
   return (
     <Modal open={open} onClose={onClose}>
-      <Card sx={{ minWidth: 300, width: "50vw", p: 2, position: "absolute" }}>
+      <Box
-        {/* Close button */}
+        sx={{
-        <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+          position: "absolute",
-          <IconButton size="small" onClick={() => onClose({}, "backdropClick")}>
+          top: "5vh",
-            <CloseIcon fontSize="small" />
+          left: "50%",
-          </IconButton>
+          transform: "translate(-50%, -50%)",
-        </Box>
+          width: "50vw",
-
+          maxHeight: "80vh",
-        <CardHeader title={isOwn ? "Edit Event" : "Event Details"} />
+        }}
-
+      >
-        <CardContent sx={{ overflow: "auto" }}>
+        <Card sx={{ p: 2, position: "absolute" }}>
-          {/* Title */}
+          {/* Close button */}
-          <TextField
+          <Box sx={{ position: "absolute", top: 8, right: 8 }}>
-            fullWidth
+            <IconButton
-            disabled={!isOwn}
+              size="small"
-            label="Title"
+              onClick={() => onClose({}, "backdropClick")}
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            size="small"
-            margin="dense"
-          />
-
-          {/* RSVP */}
-          {currentUserAttendee && isOwnCal && (
-            <Card sx={{ my: 1 }}>
-              <ButtonGroup size="small" fullWidth>
-                <Button
-                  color={
-                    currentUserAttendee.partstat === "ACCEPTED"
-                      ? "success"
-                      : "primary"
-                  }
-                  onClick={() => handleRSVP("ACCEPTED")}
-                >
-                  Accept
-                </Button>
-                <Button
-                  color={
-                    currentUserAttendee.partstat === "TENTATIVE"
-                      ? "warning"
-                      : "primary"
-                  }
-                  onClick={() => handleRSVP("TENTATIVE")}
-                >
-                  Maybe
-                </Button>
-                <Button
-                  color={
-                    currentUserAttendee.partstat === "DECLINED"
-                      ? "error"
-                      : "primary"
-                  }
-                  onClick={() => handleRSVP("DECLINED")}
-                >
-                  Decline
-                </Button>
-                <Button
-                  color="primary"
-                  onClick={() => console.log("proposenewtime")}
-                >
-                  Propose new time
-                </Button>
-              </ButtonGroup>
-            </Card>
-          )}
-
-          {/* Calendar selector */}
-          <FormControl fullWidth margin="dense" size="small">
-            <InputLabel id="calendar-select-label">Calendar</InputLabel>
-            <Select
-              disabled={!isOwn}
-              labelId="calendar-select-label"
-              value={calendarid.toString()}
-              label="Calendar"
-              onChange={(e: SelectChangeEvent) => {
-                const newId = Number(e.target.value);
-                setCalendarid(newId);
-                setNewCalId(userPersonnalCalendars[newId].id);
-              }}
             >
-              {calList}
+              <CloseIcon fontSize="small" />
-            </Select>
+            </IconButton>
-          </FormControl>
+          </Box>
 
-          {/* Dates */}
+          <CardHeader title={isOwn ? "Edit Event" : "Event Details"} />
-          <TextField
-            fullWidth
-            label="Start"
-            disabled={!isOwn}
-            type={allday ? "date" : "datetime-local"}
-            value={allday ? start.split("T")[0] : start.slice(0, 16)}
-            onChange={(e) =>
-              setStart(formatLocalDateTime(new Date(e.target.value)))
-            }
-            size="small"
-            margin="dense"
-            InputLabelProps={{ shrink: true }}
-          />
 
-          <TextField
+          <CardContent sx={{ maxHeight: "75vh", overflow: "auto" }}>
-            fullWidth
+            {/* Title */}
-            disabled={!isOwn}
+            <TextField
-            label="End"
+              fullWidth
-            type={allday ? "date" : "datetime-local"}
+              disabled={!isOwn}
-            value={allday ? end.split("T")[0] : end.slice(0, 16)}
+              label="Title"
-            onChange={(e) =>
+              value={title}
-              setEnd(formatLocalDateTime(new Date(e.target.value)))
+              onChange={(e) => setTitle(e.target.value)}
-            }
+              size="small"
-            size="small"
+              margin="dense"
-            margin="dense"
+            />
-            InputLabelProps={{ shrink: true }}
-          />
 
-          <FormControlLabel
+            {/* RSVP */}
-            control={
+            {currentUserAttendee && isOwnCal && (
-              <Checkbox
+              <Card sx={{ my: 1 }}>
+                <ButtonGroup size="small" fullWidth>
+                  <Button
+                    color={
+                      currentUserAttendee.partstat === "ACCEPTED"
+                        ? "success"
+                        : "primary"
+                    }
+                    onClick={() => handleRSVP("ACCEPTED")}
+                  >
+                    Accept
+                  </Button>
+                  <Button
+                    color={
+                      currentUserAttendee.partstat === "TENTATIVE"
+                        ? "warning"
+                        : "primary"
+                    }
+                    onClick={() => handleRSVP("TENTATIVE")}
+                  >
+                    Maybe
+                  </Button>
+                  <Button
+                    color={
+                      currentUserAttendee.partstat === "DECLINED"
+                        ? "error"
+                        : "primary"
+                    }
+                    onClick={() => handleRSVP("DECLINED")}
+                  >
+                    Decline
+                  </Button>
+                  <Button
+                    color="primary"
+                    onClick={() => console.log("proposenewtime")}
+                  >
+                    Propose new time
+                  </Button>
+                </ButtonGroup>
+              </Card>
+            )}
+
+            {/* Calendar selector */}
+            <FormControl fullWidth margin="dense" size="small">
+              <InputLabel id="calendar-select-label">Calendar</InputLabel>
+              <Select
                 disabled={!isOwn}
-                checked={allday}
+                labelId="calendar-select-label"
-                onChange={() => {
+                value={calendarid.toString()}
-                  const endDate = new Date(end);
+                label="Calendar"
-                  const startDate = new Date(start);
+                onChange={(e: SelectChangeEvent) => {
-                  setAllDay(!allday);
+                  const newId = Number(e.target.value);
-                  if (endDate.getDate() === startDate.getDate()) {
+                  setCalendarid(newId);
-                    endDate.setDate(startDate.getDate() + 1);
+                  setNewCalId(userPersonnalCalendars[newId].id);
-                    setEnd(formatLocalDateTime(endDate));
-                  }
-                }}
-              />
-            }
-            label="All day"
-          />
-
-          {/* Description & Location */}
-          <TextField
-            fullWidth
-            disabled={!isOwn}
-            label="Description"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            size="small"
-            margin="dense"
-            multiline
-            rows={2}
-          />
-
-          {isOwn && (
-            <AttendeeSelector
-              attendees={attendees}
-              setAttendees={(value: userAttendee[]) => {
-                const newAttendeeList = attendees.concat(value);
-                setAttendees(newAttendeeList);
-              }}
-            />
-          )}
-
-          <TextField
-            fullWidth
-            label="Location"
-            disabled={!isOwn}
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            size="small"
-            margin="dense"
-          />
-
-          {/* Video */}
-          {event.x_openpass_videoconference && (
-            <InfoRow
-              icon={<VideocamIcon sx={{ fontSize: 18 }} />}
-              text="Video conference available"
-              data={event.x_openpass_videoconference}
-            />
-          )}
-
-          {/* Attendees */}
-          {event.attendee?.length > 0 && (
-            <Box sx={{ mb: 1 }}>
-              <Typography variant="subtitle2">Attendees:</Typography>
-              {organizer.cal_address &&
-                renderAttendeeBadge(organizer, "org", true)}
-              {(showAllAttendees
-                ? attendees
-                : attendees.slice(0, attendeeDisplayLimit)
-              ).map((a, idx) => (
-                <Box key={a.cal_address}>
-                  {renderAttendeeBadge(a, idx.toString())}
-                  {isOwn && (
-                    <IconButton
-                      size="small"
-                      onClick={() => {
-                        const newAttendeesList = [...attendees];
-                        newAttendeesList.splice(idx, 1);
-                        setAttendees(newAttendeesList);
-                      }}
-                    >
-                      <CloseIcon fontSize="small" />
-                    </IconButton>
-                  )}
-                </Box>
-              ))}
-              {attendees.length > attendeeDisplayLimit && (
-                <Typography
-                  variant="body2"
-                  color="primary"
-                  sx={{ cursor: "pointer", mt: 0.5 }}
-                  onClick={() => setShowAllAttendees(!showAllAttendees)}
-                >
-                  {showAllAttendees
-                    ? "Show less"
-                    : `Show more (${
-                        attendees.length - attendeeDisplayLimit
-                      } more)`}
-                </Typography>
-              )}
-            </Box>
-          )}
-
-          <Divider sx={{ my: 1 }} />
-
-          {/* Extended options */}
-          {showMore && (
-            <>
-              <RepeatEvent
-                repetition={repetition}
-                setRepetition={setRepetition}
-                isOwn={isOwn}
-              />
-
-              <FormControl fullWidth margin="dense" size="small">
-                <InputLabel id="alarm">Alarm</InputLabel>
-                <Select
-                  labelId="alarm"
-                  value={alarm}
-                  disabled={!isOwn}
-                  onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
-                >
-                  <MenuItem value={""}>No Alarm</MenuItem>
-                  <MenuItem value={"-PT1M"}>1 minute</MenuItem>
-                  <MenuItem value={"-PT5M"}>2 minutes</MenuItem>
-                  <MenuItem value={"-PT10M"}>10 minutes</MenuItem>
-                  <MenuItem value={"-PT15M"}>15 minutes</MenuItem>
-                  <MenuItem value={"-PT30M"}>30 minutes</MenuItem>
-                  <MenuItem value={"-PT1H"}>1 hours</MenuItem>
-                  <MenuItem value={"-PT2H"}>2 hours</MenuItem>
-                  <MenuItem value={"-PT5H"}>5 hours</MenuItem>
-                  <MenuItem value={"-PT12H"}>12 hours</MenuItem>
-                  <MenuItem value={"-PT1D"}>1 day</MenuItem>
-                  <MenuItem value={"-PT2D"}>2 days</MenuItem>
-                  <MenuItem value={"-PT1W"}>1 week</MenuItem>
-                </Select>
-              </FormControl>
-
-              <FormControl fullWidth margin="dense" size="small">
-                <InputLabel id="Visibility">Visibility</InputLabel>
-                <Select
-                  labelId="Visibility"
-                  label="Visibility"
-                  value={eventClass}
-                  disabled={!isOwn}
-                  onChange={(e: SelectChangeEvent) =>
-                    setEventClass(e.target.value)
-                  }
-                >
-                  <MenuItem value={"PUBLIC"}>Public</MenuItem>
-                  <MenuItem value={"CONFIDENTIAL"}>Show time only</MenuItem>
-                  <MenuItem value={"PRIVATE"}>Private</MenuItem>
-                </Select>
-              </FormControl>
-              {/* Error */}
-              {event.error && (
-                <InfoRow
-                  icon={
-                    <ErrorOutlineIcon color="error" sx={{ fontSize: 18 }} />
-                  }
-                  text={event.error}
-                  error
-                />
-              )}
-            </>
-          )}
-        </CardContent>
-
-        <CardActions>
-          <ButtonGroup>
-            {isOwn && (
-              <IconButton
-                size="small"
-                onClick={() => {
-                  onClose({}, "backdropClick");
-                  dispatch(
-                    deleteEventAsync({ calId, eventId, eventURL: event.URL })
-                  );
                 }}
               >
-                <DeleteIcon fontSize="small" />
+                {calList}
-              </IconButton>
+              </Select>
-            )}
+            </FormControl>
-            <Button size="small" onClick={handleToggleShowMore}>
+
-              {showMore ? "Show Less" : "Show More"}
+            {/* Dates */}
-            </Button>
+            <TextField
+              fullWidth
+              label="Start"
+              disabled={!isOwn}
+              type={allday ? "date" : "datetime-local"}
+              value={allday ? start.split("T")[0] : start.slice(0, 16)}
+              onChange={(e) =>
+                setStart(formatLocalDateTime(new Date(e.target.value)))
+              }
+              size="small"
+              margin="dense"
+              InputLabelProps={{ shrink: true }}
+            />
+
+            <TextField
+              fullWidth
+              disabled={!isOwn}
+              label="End"
+              type={allday ? "date" : "datetime-local"}
+              value={allday ? end.split("T")[0] : end.slice(0, 16)}
+              onChange={(e) =>
+                setEnd(formatLocalDateTime(new Date(e.target.value)))
+              }
+              size="small"
+              margin="dense"
+              InputLabelProps={{ shrink: true }}
+            />
+
+            <FormControlLabel
+              control={
+                <Checkbox
+                  disabled={!isOwn}
+                  checked={allday}
+                  onChange={() => {
+                    const endDate = new Date(end);
+                    const startDate = new Date(start);
+                    setAllDay(!allday);
+                    if (endDate.getDate() === startDate.getDate()) {
+                      endDate.setDate(startDate.getDate() + 1);
+                      setEnd(formatLocalDateTime(endDate));
+                    }
+                  }}
+                />
+              }
+              label="All day"
+            />
+
+            {/* Description & Location */}
+            <TextField
+              fullWidth
+              disabled={!isOwn}
+              label="Description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              size="small"
+              margin="dense"
+              multiline
+              rows={2}
+            />
 
             {isOwn && (
-              <Button size="small" onClick={handleSave}>
+              <AttendeeSelector
-                Save
+                attendees={attendees}
-              </Button>
+                setAttendees={(value: userAttendee[]) => {
+                  const newAttendeeList = attendees.concat(value);
+                  setAttendees(newAttendeeList);
+                }}
+              />
             )}
-          </ButtonGroup>
+
-        </CardActions>
+            <TextField
-      </Card>
+              fullWidth
+              label="Location"
+              disabled={!isOwn}
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              size="small"
+              margin="dense"
+            />
+
+            {/* Video */}
+            {event.x_openpass_videoconference && (
+              <InfoRow
+                icon={<VideocamIcon sx={{ fontSize: 18 }} />}
+                text="Video conference available"
+                data={event.x_openpass_videoconference}
+              />
+            )}
+
+            {/* Attendees */}
+            {event.attendee?.length > 0 && (
+              <Box sx={{ mb: 1 }}>
+                <Typography variant="subtitle2">Attendees:</Typography>
+                {organizer.cal_address &&
+                  renderAttendeeBadge(organizer, "org", true)}
+                {(showAllAttendees
+                  ? attendees
+                  : attendees.slice(0, attendeeDisplayLimit)
+                ).map((a, idx) => (
+                  <Box key={a.cal_address}>
+                    {renderAttendeeBadge(a, idx.toString())}
+                    {isOwn && (
+                      <IconButton
+                        size="small"
+                        onClick={() => {
+                          const newAttendeesList = [...attendees];
+                          newAttendeesList.splice(idx, 1);
+                          setAttendees(newAttendeesList);
+                        }}
+                      >
+                        <CloseIcon fontSize="small" />
+                      </IconButton>
+                    )}
+                  </Box>
+                ))}
+                {attendees.length > attendeeDisplayLimit && (
+                  <Typography
+                    variant="body2"
+                    color="primary"
+                    sx={{ cursor: "pointer", mt: 0.5 }}
+                    onClick={() => setShowAllAttendees(!showAllAttendees)}
+                  >
+                    {showAllAttendees
+                      ? "Show less"
+                      : `Show more (${
+                          attendees.length - attendeeDisplayLimit
+                        } more)`}
+                  </Typography>
+                )}
+              </Box>
+            )}
+
+            <Divider sx={{ my: 1 }} />
+
+            {/* Extended options */}
+            {showMore && (
+              <>
+                <RepeatEvent
+                  repetition={repetition}
+                  setRepetition={setRepetition}
+                  isOwn={isOwn}
+                />
+
+                <FormControl fullWidth margin="dense" size="small">
+                  <InputLabel id="alarm">Alarm</InputLabel>
+                  <Select
+                    labelId="alarm"
+                    value={alarm}
+                    disabled={!isOwn}
+                    onChange={(e: SelectChangeEvent) =>
+                      setAlarm(e.target.value)
+                    }
+                  >
+                    <MenuItem value={""}>No Alarm</MenuItem>
+                    <MenuItem value={"-PT1M"}>1 minute</MenuItem>
+                    <MenuItem value={"-PT5M"}>2 minutes</MenuItem>
+                    <MenuItem value={"-PT10M"}>10 minutes</MenuItem>
+                    <MenuItem value={"-PT15M"}>15 minutes</MenuItem>
+                    <MenuItem value={"-PT30M"}>30 minutes</MenuItem>
+                    <MenuItem value={"-PT1H"}>1 hours</MenuItem>
+                    <MenuItem value={"-PT2H"}>2 hours</MenuItem>
+                    <MenuItem value={"-PT5H"}>5 hours</MenuItem>
+                    <MenuItem value={"-PT12H"}>12 hours</MenuItem>
+                    <MenuItem value={"-PT1D"}>1 day</MenuItem>
+                    <MenuItem value={"-PT2D"}>2 days</MenuItem>
+                    <MenuItem value={"-PT1W"}>1 week</MenuItem>
+                  </Select>
+                </FormControl>
+
+                <FormControl fullWidth margin="dense" size="small">
+                  <InputLabel id="Visibility">Visibility</InputLabel>
+                  <Select
+                    labelId="Visibility"
+                    label="Visibility"
+                    value={eventClass}
+                    disabled={!isOwn}
+                    onChange={(e: SelectChangeEvent) =>
+                      setEventClass(e.target.value)
+                    }
+                  >
+                    <MenuItem value={"PUBLIC"}>Public</MenuItem>
+                    <MenuItem value={"CONFIDENTIAL"}>Show time only</MenuItem>
+                    <MenuItem value={"PRIVATE"}>Private</MenuItem>
+                  </Select>
+                </FormControl>
+                {/* Error */}
+                {event.error && (
+                  <InfoRow
+                    icon={
+                      <ErrorOutlineIcon color="error" sx={{ fontSize: 18 }} />
+                    }
+                    text={event.error}
+                    error
+                  />
+                )}
+              </>
+            )}
+          </CardContent>
+
+          <CardActions>
+            <ButtonGroup>
+              {isOwn && (
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    onClose({}, "backdropClick");
+                    dispatch(
+                      deleteEventAsync({ calId, eventId, eventURL: event.URL })
+                    );
+                  }}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              )}
+              <Button size="small" onClick={handleToggleShowMore}>
+                {showMore ? "Show Less" : "Show More"}
+              </Button>
+
+              {isOwn && (
+                <Button size="small" onClick={handleSave}>
+                  Save
+                </Button>
+              )}
+            </ButtonGroup>
+          </CardActions>
+        </Card>
+      </Box>
     </Modal>
   );
 }

src/features/Events/eventUtils.ts

@@ -84,18 +84,21 @@ export function parseCalendarEvent(
         break;
       case "rrule":
         event.repetition = { freq: value.freq.toLowerCase() };
+        console.log(value);
         if (value.byday) {
+          console.log(value.byday);
           event.repetition.selectedDays = value.byday;
         }
         if (value.until) {
-          event.repetition.selectedDays = value.endDate;
+          event.repetition.endDate = value.until;
         }
         if (value.count) {
-          event.repetition.selectedDays = value.occurrences;
+          event.repetition.occurrences = value.count;
         }
         if (value.interval) {
           event.repetition.interval = value.interval;
         }
+        console.log(event.repetition);
         break;
     }
   }