[#205] added calendar list component (#258)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/features/Events/EventDisplayPreview.tsx

@@ -1,3 +1,4 @@
+import { DateSelectArg } from "@fullcalendar/core";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import CircleIcon from "@mui/icons-material/Circle";
 import CloseIcon from "@mui/icons-material/Close";
@@ -5,17 +6,16 @@ import EditIcon from "@mui/icons-material/Edit";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import LockOutlineIcon from "@mui/icons-material/LockOutline";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
+import RepeatIcon from "@mui/icons-material/Repeat";
 import SubjectIcon from "@mui/icons-material/Subject";
 import VideocamIcon from "@mui/icons-material/Videocam";
-import RepeatIcon from "@mui/icons-material/Repeat";
-import LockOutlineIcon from "@mui/icons-material/LockOutline";
+import { Box, Typography } from "@mui/material";
 import EventPopover from "./EventModal";
-import { DateSelectArg } from "@fullcalendar/core";
 import {
-  Box,
   Button,
   Chip,
   DialogActions,
@@ -23,15 +23,13 @@ import {
   Menu,
   MenuItem,
   Tooltip,
-  Typography,
 } from "@mui/material";
 import AvatarGroup from "@mui/material/AvatarGroup";
 import { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { deleteEventAsync } from "../Calendars/CalendarSlice";
-import { dlEvent } from "./EventApi";
-import EventDisplayModal from "./EventDisplay";
-import EventUpdateModal from "./EventUpdateModal";
+import { CalendarName } from "../../components/Calendar/CalendarName";
+import { getTimezoneOffset } from "../../components/Calendar/TimezoneSelector";
+import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
 import ResponsiveDialog from "../../components/Dialog/ResponsiveDialog";
 import { EditModeDialog } from "../../components/Event/EditModeDialog";
 import EventDuplication from "../../components/Event/EventDuplicate";
@@ -41,10 +39,12 @@ import {
 } from "../../components/Event/eventHandlers/eventHandlers";
 import { InfoRow } from "../../components/Event/InfoRow";
 import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
-import { getTimezoneOffset } from "../../components/Calendar/TimezoneSelector";
 import { getCalendarRange } from "../../utils/dateUtils";
-import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
+import { deleteEventAsync } from "../Calendars/CalendarSlice";
+import { dlEvent } from "./EventApi";
+import EventDisplayModal from "./EventDisplay";
 import { CalendarEvent } from "./EventsTypes";
+import EventUpdateModal from "./EventUpdateModal";
 export default function EventPreviewModal({
   eventId,
   calId,
@@ -648,16 +648,7 @@ export default function EventPreviewModal({
           <Box sx={{ minWidth: "25px", marginRight: 2 }}>
             <CalendarTodayIcon />
           </Box>
-          <CircleIcon
-            style={{
-              color: calendar.color?.light ?? "#3788D8",
-              width: 12,
-              height: 12,
-            }}
-          />
-          <Typography sx={{ wordBreak: "break-word" }}>
-            {calendar.name}
-          </Typography>
+          <CalendarName calendar={calendar} />
         </Box>
       </ResponsiveDialog>
       <EditModeDialog

src/features/Events/EventModal.tsx

@@ -52,6 +52,7 @@ function EventPopover({
   const userId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const tempList = useAppSelector((state) => state.calendars.templist);
+  const calList = useAppSelector((state) => state.calendars.list);
   const selectPersonnalCalendars = createSelector(
     (state: any) => state.calendars,
     (calendars: any) =>
@@ -94,9 +95,7 @@ function EventPopover({
   const [start, setStart] = useState(event?.start ? event.start : "");
   const [end, setEnd] = useState(event?.end ? event.end : "");
   const [calendarid, setCalendarid] = useState(
-    event?.calId
-      ? userPersonnalCalendars.findIndex((e) => e.id === event?.calId)
-      : 0
+    event?.calId ?? userPersonnalCalendars[0]?.id
   );
   const [allday, setAllDay] = useState(event?.allday ?? false);
   const [repetition, setRepetition] = useState<RepetitionObject>(
@@ -141,7 +140,7 @@ function EventPopover({
     setLocation("");
     setStart("");
     setEnd("");
-    setCalendarid(0);
+    setCalendarid(userPersonnalCalendars[0].id);
     setAllDay(false);
     setRepetition({} as RepetitionObject);
     setAlarm("");
@@ -293,13 +292,7 @@ function EventPopover({
         setEnd("");
       }
 
-      setCalendarid(
-        event.calId
-          ? userPersonnalCalendarsRef.current.findIndex(
-              (e) => e.id === event.calId
-            )
-          : 0
-      );
+      setCalendarid(userPersonnalCalendars[0].id);
       setRepetition(event.repetition ?? ({} as RepetitionObject));
       setShowRepeat(event.repetition?.freq ? true : false);
       setAttendees(
@@ -354,7 +347,7 @@ function EventPopover({
       setDescription("");
       setAttendees([]);
       setLocation("");
-      setCalendarid(0);
+      setCalendarid(userPersonnalCalendars[0].id);
       setAllDay(false);
       setRepetition({} as RepetitionObject);
       setAlarm("");
@@ -468,9 +461,9 @@ function EventPopover({
     const newEventUID = crypto.randomUUID();
 
     const newEvent: CalendarEvent = {
-      calId: userPersonnalCalendars[calendarid].id,
+      calId: calList[calendarid].id,
       title,
-      URL: `/calendars/${userPersonnalCalendars[calendarid].id}/${newEventUID}.ics`,
+      URL: `/calendars/${calList[calendarid].id}/${newEventUID}.ics`,
       start: new Date(start).toISOString(),
       allday,
       uid: newEventUID,
@@ -491,7 +484,7 @@ function EventPopover({
         },
       ],
       transp: busy,
-      color: userPersonnalCalendars[calendarid]?.color,
+      color: calList[calendarid]?.color,
       alarm: { trigger: alarm, action: "EMAIL" },
       x_openpass_videoconference: meetingLink || undefined,
     };
@@ -515,7 +508,7 @@ function EventPopover({
     // Save to API in background
     await dispatch(
       putEventAsync({
-        cal: userPersonnalCalendars[calendarid],
+        cal: calList[calendarid],
         newEvent,
       })
     );

src/features/Events/EventUpdateModal.tsx

@@ -52,6 +52,7 @@ function EventUpdateModal({
 }) {
   const dispatch = useAppDispatch();
   const tempList = useAppSelector((state) => state.calendars.templist);
+  const calList = useAppSelector((state) => state.calendars.list);
   // Get event from Redux store (cached data) as fallback
   const cachedEvent = useAppSelector(
     (state) => state.calendars.list[calId]?.events[eventId]
@@ -153,7 +154,9 @@ function EventUpdateModal({
     resolveTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
   );
   const [newCalId, setNewCalId] = useState(calId);
-  const [calendarid, setCalendarid] = useState(0);
+  const [calendarid, setCalendarid] = useState(
+    calId ?? userPersonnalCalendars[0]?.id
+  );
 
   const [attendees, setAttendees] = useState<userAttendee[]>([]);
   const [hasVideoConference, setHasVideoConference] = useState(false);
@@ -171,7 +174,7 @@ function EventUpdateModal({
     setLocation("");
     setStart("");
     setEnd("");
-    setCalendarid(0);
+    setCalendarid(userPersonnalCalendars[0].id);
     setAllDay(false);
     setRepetition({} as RepetitionObject);
     setAlarm("");
@@ -235,10 +238,7 @@ function EventUpdateModal({
       }
 
       // Find correct calendar index
-      const currentCalIndex = userPersonnalCalendars.findIndex(
-        (cal) => cal.id === calId
-      );
-      setCalendarid(currentCalIndex >= 0 ? currentCalIndex : 0);
+      setCalendarid(calId);
 
       // Handle repetition properly - check both current event and base event
       const baseEventId = event.uid.split("/")[0];
@@ -327,7 +327,7 @@ function EventUpdateModal({
 
     const organizer = event.organizer;
 
-    const targetCalendar = userPersonnalCalendars[calendarid];
+    const targetCalendar = calList[calendarid];
     if (!targetCalendar) {
       console.error("Target calendar not found");
       return;
@@ -747,7 +747,7 @@ function EventUpdateModal({
         userPersonnalCalendars={userPersonnalCalendars}
         timezoneList={timezoneList}
         onCalendarChange={(newCalendarId) => {
-          const selectedCalendar = userPersonnalCalendars[newCalendarId];
+          const selectedCalendar = calList[newCalendarId];
           if (selectedCalendar) {
             setNewCalId(selectedCalendar.id);
           }