[#80] added selected calendars local persistance + tests (#281)

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

src/components/Calendar/Calendar.tsx

@@ -102,14 +102,31 @@ export default function CalendarApp({
 
   useEffect(() => {
     if (initialLoadRef.current && Object.keys(calendars).length > 0 && userId) {
-      const personalCalendarIds = Object.keys(calendars).filter(
-        (id) => id.split("/")[0] === userId
-      );
-      setSelectedCalendars(personalCalendarIds);
+      const cached = localStorage.getItem("selectedCalendars");
+      if (cached && cached.length > 0) {
+        const parsed = JSON.parse(cached) as string[];
+        const valid = parsed.filter((id) => calendars[id]);
+        setSelectedCalendars(valid);
+      } else {
+        const personalCalendarIds = Object.keys(calendars).filter(
+          (id) => id.split("/")[0] === userId
+        );
+        setSelectedCalendars(personalCalendarIds);
+      }
       initialLoadRef.current = false;
     }
   }, [calendars, userId]);
 
+  // Save selected cals to cache
+  useEffect(() => {
+    if (Object.keys(calendars).length > 0) {
+      localStorage.setItem(
+        "selectedCalendars",
+        JSON.stringify(selectedCalendars)
+      );
+    }
+  }, [selectedCalendars]);
+
   useEffect(() => {
     updateDarkColor(calendars, theme, dispatch);
   }, [

src/components/Calendar/CalendarSelection.tsx

@@ -4,7 +4,7 @@ import AccordionSummary from "@mui/material/AccordionSummary";
 import Typography from "@mui/material/Typography";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AddIcon from "@mui/icons-material/Add";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import CalendarPopover from "./CalendarModal";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
@@ -40,7 +40,7 @@ function CalendarAccordion({
 
   const [expended, setExpended] = useState(defaultExpanded);
   if (calendars.length === 0 && !showAddButton) return null;
-
+  useEffect(() => setExpended(defaultExpanded), [defaultExpanded]);
   return (
     <Accordion
       defaultExpanded={defaultExpanded}
@@ -149,6 +149,9 @@ export default function CalendarSelection({
             setAnchorElCal(document.body);
             setSelectedCalId(id);
           }}
+          defaultExpanded={selectedCalendars.some((id) =>
+            delegatedCalendars.includes(id)
+          )}
         />
 
         <CalendarAccordion
@@ -164,6 +167,9 @@ export default function CalendarSelection({
             setAnchorElCal(document.body);
             setSelectedCalId(id);
           }}
+          defaultExpanded={selectedCalendars.some((id) =>
+            sharedCalendars.includes(id)
+          )}
         />
       </div>
       <CalendarPopover