[#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,13 +93,15 @@ export default function CalendarApp() {
 
   let filteredEvents: CalendarEvent[] = [];
   selectedCalendars.forEach((id) => {
-    filteredEvents = filteredEvents
-      .concat(
-        Object.keys(calendars[id].events).map(
-          (eventid) => calendars[id].events[eventid]
+    if (calendars[id].events) {
+      filteredEvents = filteredEvents
+        .concat(
+          Object.keys(calendars[id].events).map(
+            (eventid) => calendars[id].events[eventid]
+          )
         )
-      )
-      .filter((event) => !(event.status === "CANCELLED"));
+        .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,32 +28,20 @@ export default function CalendarSelection({
     );
   };
 
+  useEffect(() => {}, [calendars]);
+  const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
+
   return (
-    <div>
-      <span className="calendarListHeader">
-        <h3>Personnal Calendars</h3>
-      </span>
-      {personnalCalendars.map((id) => {
-        return (
-          <div key={id}>
-            <label>
-              <input
-                type="checkbox"
-                style={{ backgroundColor: calendars[id].color }}
-                checked={selectedCalendars.includes(id)}
-                onChange={() => handleCalendarToggle(id)}
-              />
-              {calendars[id].name}
-            </label>
-          </div>
-        );
-      })}
-      {delegatedCalendars.length > 0 && (
-        <>
-          <span className="calendarListHeader">
-            <h3>Delegated Calendars</h3>
-          </span>
-          {delegatedCalendars.map((id) => (
+    <>
+      <div>
+        <div className="calendarListHeader">
+          <h3>Personnal Calendars</h3>
+          <Button onClick={() => setAnchorElCal(document.body)}>
+            <AddIcon />
+          </Button>
+        </div>
+        {personnalCalendars.map((id) => {
+          return (
             <div key={id}>
               <label>
                 <input
@@ -61,29 +53,54 @@ export default function CalendarSelection({
                 {calendars[id].name}
               </label>
             </div>
-          ))}
-        </>
-      )}
-      {sharedCalendars.length > 0 && (
-        <>
-          <span className="calendarListHeader">
-            <h3>Shared Calendars</h3>
-          </span>
-          {sharedCalendars.map((id) => (
-            <div key={id}>
-              <label>
-                <input
-                  type="checkbox"
-                  style={{ backgroundColor: calendars[id].color }}
-                  checked={selectedCalendars.includes(id)}
-                  onChange={() => handleCalendarToggle(id)}
-                />
-                {calendars[id].name}
-              </label>
-            </div>
-          ))}
-        </>
-      )}
-    </div>
+          );
+        })}
+        {delegatedCalendars.length > 0 && (
+          <>
+            <span className="calendarListHeader">
+              <h3>Delegated Calendars</h3>
+            </span>
+            {delegatedCalendars.map((id) => (
+              <div key={id}>
+                <label>
+                  <input
+                    type="checkbox"
+                    style={{ backgroundColor: calendars[id].color }}
+                    checked={selectedCalendars.includes(id)}
+                    onChange={() => handleCalendarToggle(id)}
+                  />
+                  {calendars[id].name}
+                </label>
+              </div>
+            ))}
+          </>
+        )}
+        {sharedCalendars.length > 0 && (
+          <>
+            <span className="calendarListHeader">
+              <h3>Shared Calendars</h3>
+            </span>
+            {sharedCalendars.map((id) => (
+              <div key={id}>
+                <label>
+                  <input
+                    type="checkbox"
+                    style={{ backgroundColor: calendars[id].color }}
+                    checked={selectedCalendars.includes(id)}
+                    onChange={() => handleCalendarToggle(id)}
+                  />
+                  {calendars[id].name}
+                </label>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+      <CalendarPopover
+        anchorEl={anchorElCal}
+        open={Boolean(anchorElCal)}
+        onClose={() => setAnchorElCal(null)}
+      />
+    </>
   );
 }