[#64] added creation modal to list and api call

src/components/Calendar/Calendar.tsx

@@ -14,6 +14,7 @@ import { CalendarEvent } from "../../features/Events/EventsTypes";
 import CalendarSelection from "./CalendarSelection";
 import {
   getCalendarDetailAsync,
+  getCalendarsListAsync,
   getEventAsync,
   putEventAsync,
   updateEventLocal,
@@ -92,6 +93,7 @@ export default function CalendarApp() {
 
   let filteredEvents: CalendarEvent[] = [];
   selectedCalendars.forEach((id) => {
+    if (calendars[id].events) {
       filteredEvents = filteredEvents
         .concat(
           Object.keys(calendars[id].events).map(
@@ -99,6 +101,7 @@ export default function CalendarApp() {
           )
         )
         .filter((event) => !(event.status === "CANCELLED"));
+    }
   });
 
   useEffect(() => {
@@ -125,7 +128,6 @@ export default function CalendarApp() {
   const [openEventDisplay, setOpenEventDisplay] = useState(false);
   const [eventDisplayedId, setEventDisplayedId] = useState("");
   const [eventDisplayedCalId, setEventDisplayedCalId] = useState("");
-  const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
   const [selectedRange, setSelectedRange] = useState<DateSelectArg | null>(
     null
   );
@@ -248,7 +250,6 @@ export default function CalendarApp() {
           selectedCalendars={selectedCalendars}
           setSelectedCalendars={setSelectedCalendars}
         />
-        <button onClick={() => setAnchorElCal(document.body)}>+</button>
       </div>
       <div className="calendar">
         <ImportAlert />
@@ -270,7 +271,8 @@ export default function CalendarApp() {
           customButtons={{
             refresh: {
               text: "↻",
-              click: () => {
+              click: async () => {
+                await dispatch(getCalendarsListAsync());
                 selectedCalendars.forEach((id) => {
                   if (!pending && rangeKey) {
                     dispatch(
@@ -521,11 +523,6 @@ export default function CalendarApp() {
           setSelectedRange={setSelectedRange}
           calendarRef={calendarRef}
         />
-        <CalendarPopover
-          anchorEl={anchorElCal}
-          open={Boolean(anchorElCal)}
-          onClose={() => setAnchorElCal(null)}
-        />
         {openEventDisplay && eventDisplayedId && eventDisplayedCalId && (
           <EventPreviewModal
             eventId={eventDisplayedId}

src/components/Calendar/CalendarSelection.tsx

@@ -1,4 +1,8 @@
+import { Button } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import AddIcon from "@mui/icons-material/Add";
+import { useEffect, useState } from "react";
+import CalendarPopover from "../../features/Calendars/CalendarModal";
 
 export default function CalendarSelection({
   selectedCalendars,
@@ -24,11 +28,18 @@ export default function CalendarSelection({
     );
   };
 
+  useEffect(() => {}, [calendars]);
+  const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
+
   return (
+    <>
       <div>
-      <span className="calendarListHeader">
+        <div className="calendarListHeader">
           <h3>Personnal Calendars</h3>
-      </span>
+          <Button onClick={() => setAnchorElCal(document.body)}>
+            <AddIcon />
+          </Button>
+        </div>
         {personnalCalendars.map((id) => {
           return (
             <div key={id}>
@@ -85,5 +96,11 @@ export default function CalendarSelection({
           </>
         )}
       </div>
+      <CalendarPopover
+        anchorEl={anchorElCal}
+        open={Boolean(anchorElCal)}
+        onClose={() => setAnchorElCal(null)}
+      />
+    </>
   );
 }

src/features/Calendars/CalendarApi.ts

@@ -30,3 +30,24 @@ export async function getCalendar(
   const calendar = await response.json();
   return calendar;
 }
+
+export async function postCalendar(
+  userId: string,
+  calId: string,
+  color: string,
+  name: string,
+  desc: string
+) {
+  const response = await api.post(`dav/calendars/${userId}.json`, {
+    headers: {
+      Accept: "application/json, text/plain, */*",
+    },
+    body: JSON.stringify({
+      id: calId,
+      "dav:name": name,
+      "apple:color": color,
+      "caldav:description": desc,
+    }),
+  });
+  return response;
+}

src/features/Calendars/CalendarModal.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { createCalendar } from "./CalendarSlice";
+import { createCalendar, createCalendarAsync } from "./CalendarSlice";
-import { useAppDispatch } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   Popover,
   TextField,
@@ -21,14 +21,18 @@ function CalendarPopover({
   onClose: (Calendar: {}, reason: "backdropClick" | "escapeKeyDown") => void;
 }) {
   const dispatch = useAppDispatch();
-
+  const userId =
+    useAppSelector((state) => state.user.userData.openpaasId) ?? "";
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [color, setColor] = useState("");
   const [timeZone, setTimeZone] = useState("");
   const timezones = Intl.supportedValuesOf?.("timeZone") ?? [];
   const handleSave = () => {
-    dispatch(createCalendar({ name, description, color }));
+    const calId = crypto.randomUUID();
+    dispatch(
+      createCalendarAsync({ name, desc: description, color, userId, calId })
+    );
     onClose({}, "backdropClick");
 
     // Reset
@@ -68,7 +72,7 @@ function CalendarPopover({
           gutterBottom
           style={{ backgroundColor: color }}
         >
-          Create a Calendar
+          Calendar configuration
         </Typography>
         <TextField
           fullWidth

src/features/Calendars/CalendarSlice.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Calendars } from "./CalendarTypes";
 import { CalendarEvent } from "../Events/EventsTypes";
-import { getCalendar, getCalendars } from "./CalendarApi";
+import { getCalendar, getCalendars, postCalendar } from "./CalendarApi";
 import { getOpenPaasUser, getUserDetails } from "../User/userAPI";
 import { parseCalendarEvent } from "../Events/eventUtils";
 import { deleteEvent, getEvent, moveEvent, putEvent } from "../Events/EventApi";
@@ -157,6 +157,14 @@ export const deleteEventAsync = createAsyncThunk<
   return { calId, eventId };
 });
 
+export const createCalendarAsync = createAsyncThunk<
+  { userId: string; calId: string; color: string; name: string; desc: string }, // Return type
+  { userId: string; calId: string; color: string; name: string; desc: string } // Arg type
+>("calendars/createCalendar", async ({ userId, calId, color, name, desc }) => {
+  const response = await postCalendar(userId, calId, color, name, desc);
+  return { userId, calId, color, name, desc };
+});
+
 const CalendarSlice = createSlice({
   name: "calendars",
   initialState: { list: {} as Record<string, Calendars>, pending: false },
@@ -206,9 +214,7 @@ const CalendarSlice = createSlice({
         getCalendarsListAsync.fulfilled,
         (state, action: PayloadAction<Record<string, Calendars>>) => {
           state.pending = false;
-          Object.keys(action.payload).forEach((id) => {
+          state.list = action.payload;
-            state.list[id] = action.payload[id];
-          });
         }
       )
       .addCase(
@@ -324,6 +330,15 @@ const CalendarSlice = createSlice({
           ];
         }
       })
+      .addCase(createCalendarAsync.fulfilled, (state, action) => {
+        state.pending = false;
+        state.list[`${action.payload.userId}/${action.payload.calId}`] = {
+          color: action.payload.color,
+          id: `${action.payload.userId}/${action.payload.calId}`,
+          description: action.payload.desc,
+          name: action.payload.name,
+        } as unknown as Calendars;
+      })
       .addCase(getCalendarDetailAsync.pending, (state) => {
         state.pending = true;
       })
@@ -341,6 +356,9 @@ const CalendarSlice = createSlice({
       })
       .addCase(deleteEventAsync.pending, (state) => {
         state.pending = true;
+      })
+      .addCase(createCalendarAsync.pending, (state) => {
+        state.pending = true;
       });
   },
 });

src/features/Events/ImportAlert.tsx

@@ -18,8 +18,9 @@ export default function ImportAlert() {
   return (
     <>
       {Object.keys(calendars).map((calendarId) =>
-        Object.keys(calendars[calendarId].events)
+        calendars[calendarId]?.events
-          .filter((id) => calendars[calendarId].events[id].error)
+          ? Object.keys(calendars[calendarId]?.events)
+              .filter((id) => calendars[calendarId]?.events[id].error)
               .map((id) => {
                 const isVisible =
                   visibleAlerts[calendars[calendarId].events[id].uid] ?? true; // default to visible
@@ -40,6 +41,7 @@ export default function ImportAlert() {
                   </Collapse>
                 );
               })
+          : []
       )}
     </>
   );