[#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>