[#72] added duplicate button and fixed tests broken by new interaction between components

src/components/Event/EventDuplicate.tsx

@@ -0,0 +1,52 @@
+import { IconButton } from "@mui/material";
+import { CalendarEvent } from "../../features/Events/EventsTypes";
+import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
+import { useRef, useState } from "react";
+import EventPopover from "../../features/Events/EventModal";
+import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
+
+export default function EventDuplication({
+  onClose,
+  event,
+}: {
+  onClose: Function;
+  event: CalendarEvent;
+}) {
+  const [openModal, setOpenModal] = useState(false);
+  const [selectedRange, setSelectedRange] = useState<DateSelectArg | null>({
+    start: new Date(event.start),
+    startStr: new Date(event.start).toISOString(),
+    end: new Date(event.end ?? ""),
+    endStr: new Date(event.end ?? "").toISOString(),
+    allDay: event.allday ?? false,
+  } as DateSelectArg);
+  const calendarRef = useRef<CalendarApi | null>(null);
+
+  const handleClosePopover = () => {
+    calendarRef.current?.unselect();
+    setSelectedRange(null);
+    setOpenModal(!openModal);
+    onClose({}, "backdropClick");
+  };
+  return (
+    <>
+      <IconButton
+        size="small"
+        onClick={() => {
+          setOpenModal(true);
+        }}
+      >
+        <AddToPhotosIcon fontSize="small" />
+      </IconButton>
+      <EventPopover
+        anchorEl={null}
+        open={openModal}
+        selectedRange={selectedRange}
+        setSelectedRange={setSelectedRange}
+        calendarRef={calendarRef}
+        onClose={handleClosePopover}
+        event={event}
+      />
+    </>
+  );
+}

src/features/Events/EventDisplay.tsx

@@ -47,6 +47,7 @@ import { CalendarEvent, RepetitionObject } from "./EventsTypes";
 import { isValidUrl } from "../../utils/apiUtils";
 import { formatLocalDateTime } from "./EventModal";
 import RepeatEvent from "../../components/Event/EventRepeat";
+import EventDuplication from "../../components/Event/EventDuplicate";
 
 export default function EventDisplayModal({
   eventId,
@@ -243,6 +244,7 @@ export default function EventDisplayModal({
         <Card sx={{ p: 2, position: "absolute" }}>
           {/* Close button */}
           <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+            <EventDuplication event={event} onClose={onClose} />
             <IconButton
               size="small"
               onClick={() => onClose({}, "backdropClick")}

src/features/Events/EventModal.tsx

@@ -33,6 +33,7 @@ function EventPopover({
   selectedRange,
   setSelectedRange,
   calendarRef,
+  event,
 }: {
   anchorEl: HTMLElement | null;
   open: boolean;
@@ -40,6 +41,7 @@ function EventPopover({
   selectedRange: DateSelectArg | null;
   setSelectedRange: Function;
   calendarRef: React.RefObject<CalendarApi | null>;
+  event?: CalendarEvent;
 }) {
   const dispatch = useAppDispatch();
 
@@ -63,20 +65,32 @@ function EventPopover({
   const timezones = TIMEZONES.aliases;
   const [showMore, setShowMore] = useState(false);
 
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [location, setLocation] = useState("");
-  const [start, setStart] = useState("");
-  const [end, setEnd] = useState("");
-  const [calendarid, setCalendarid] = useState(0);
-  const [allday, setAllDay] = useState(false);
-  const [repetition, setRepetition] = useState<RepetitionObject>(
-    {} as RepetitionObject
+  const [title, setTitle] = useState(event?.title ?? "");
+  const [description, setDescription] = useState(event?.description ?? "");
+  const [location, setLocation] = useState(event?.location ?? "");
+  const [start, setStart] = useState(
+    event?.start ? new Date(event.start).toISOString() : ""
   );
-  const [attendees, setAttendees] = useState<userAttendee[]>([]);
-  const [alarm, setAlarm] = useState("");
-  const [eventClass, setEventClass] = useState("PUBLIC");
-  const [busy, setBusy] = useState("OPAQUE");
+  const [end, setEnd] = useState(
+    event?.end ? new Date(event.end)?.toISOString() : ""
+  );
+  const [calendarid, setCalendarid] = useState(
+    event?.calId
+      ? userPersonnalCalendars.findIndex((e) => e.id === event?.calId)
+      : 0
+  );
+  const [allday, setAllDay] = useState(event?.allday ?? false);
+  const [repetition, setRepetition] = useState<RepetitionObject>(
+    event?.repetition ?? ({} as RepetitionObject)
+  );
+  const [attendees, setAttendees] = useState<userAttendee[]>(
+    event?.attendee
+      ? event.attendee.filter((a) => a.cal_address !== organizer.cal_address)
+      : []
+  );
+  const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
+  const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
+  const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
 
   const [timezone, setTimezone] = useState(
     Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -157,7 +171,7 @@ function EventPopover({
       }}
     >
       <Card>
-        <CardHeader title="Create Event" />
+        <CardHeader title={event ? "Duplicate Event" : "Create Event"} />
         <CardContent
           sx={{ maxHeight: "85vh", maxWidth: "40vw", overflow: "auto" }}
         >