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

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

src/components/Calendar/CalendarItemList.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { MenuItem } from "@mui/material";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
+import { CalendarName } from "./CalendarName";
+
+export function CalendarItemList(
+  userPersonnalCalendars: Calendars[]
+): React.ReactNode {
+  return Object.values(userPersonnalCalendars).map((calendar) => (
+    <MenuItem key={calendar.id} value={calendar.id}>
+      <CalendarName calendar={calendar} />
+    </MenuItem>
+  ));
+}

src/components/Calendar/CalendarName.tsx

@@ -0,0 +1,17 @@
+import { Box, Typography } from "@mui/material";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
+import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
+export function CalendarName({ calendar }: { calendar: Calendars }) {
+  return (
+    <Box style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      <SquareRoundedIcon
+        style={{
+          color: calendar.color?.light ?? "#3788D8",
+          width: 24,
+          height: 24,
+        }}
+      />
+      <Typography sx={{ wordBreak: "break-word" }}>{calendar.name}</Typography>
+    </Box>
+  );
+}

src/components/Calendar/ImportTab.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useAppSelector } from "../../app/hooks";
+import { CalendarItemList } from "./CalendarItemList";
 import { SettingsTab } from "./SettingsTab";
 
 export function ImportTab({
@@ -40,8 +41,8 @@ export function ImportTab({
   const [importFile, setImportFile] = useState<File | null>(null);
   const [importUrl, setImportUrl] = useState("");
   const calendars = useAppSelector((state) => state.calendars.list);
-  const personnalCalendars = Object.keys(calendars).filter(
-    (id) => id.split("/")[0] === userId
+  const personnalCalendars = Object.values(calendars).filter(
+    (cal) => cal.id.split("/")[0] === userId
   );
 
   useEffect(() => {
@@ -109,11 +110,7 @@ export function ImportTab({
           onChange={(e) => setImportTarget(e.target.value)}
         >
           <MenuItem value="new">New calendar</MenuItem>
-          {personnalCalendars.map((id) => (
-            <MenuItem key={id} value={id}>
-              {calendars[id].name}
-            </MenuItem>
-          ))}
+          {CalendarItemList(personnalCalendars)}
         </Select>
       </FormControl>
 

src/components/Event/EventFormFields.tsx

@@ -33,6 +33,7 @@ import {
   addVideoConferenceToDescription,
 } from "../../utils/videoConferenceUtils";
 import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
+import { CalendarItemList } from "../Calendar/CalendarItemList";
 
 // Helper component for field with label
 export const FieldWithLabel = React.memo(
@@ -113,8 +114,8 @@ interface EventFormFieldsProps {
   setEventClass: (eventClass: string) => void;
   timezone: string;
   setTimezone: (timezone: string) => void;
-  calendarid: number;
-  setCalendarid: (calendarid: number) => void;
+  calendarid: string;
+  setCalendarid: (calendarid: string) => void;
   hasVideoConference: boolean;
   setHasVideoConference: (hasVideoConference: boolean) => void;
   meetingLink: string | null;
@@ -144,7 +145,7 @@ interface EventFormFieldsProps {
     newStart: string,
     newEnd: string
   ) => void;
-  onCalendarChange?: (newCalendarId: number) => void;
+  onCalendarChange?: (newCalendarId: string) => void;
 
   // Validation
   onValidationChange?: (isValid: boolean) => void;
@@ -370,7 +371,7 @@ export default function EventFormFields({
     onAllDayChange?.(newAllDay, newStart, newEnd);
   };
 
-  const handleCalendarChange = (newCalendarId: number) => {
+  const handleCalendarChange = (newCalendarId: string) => {
     setCalendarid(newCalendarId);
     onCalendarChange?.(newCalendarId);
   };
@@ -738,14 +739,10 @@ export default function EventFormFields({
             label={!showMore ? "Calendar" : ""}
             displayEmpty
             onChange={(e: SelectChangeEvent) =>
-              handleCalendarChange(Number(e.target.value))
+              handleCalendarChange(e.target.value)
             }
           >
-            {Object.keys(userPersonnalCalendars).map((calendar, index) => (
-              <MenuItem key={index} value={index}>
-                {userPersonnalCalendars[index].name}
-              </MenuItem>
-            ))}
+            {CalendarItemList(userPersonnalCalendars)}
           </Select>
         </FormControl>
       </FieldWithLabel>