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

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

__test__/components/Calendar.test.tsx

@@ -20,6 +20,9 @@ function CalendarTestWrapper() {
 }
 
 describe("CalendarSelection", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
   const today = new Date();
   const start = new Date(today);
   start.setHours(10, 0, 0, 0);
@@ -270,9 +273,49 @@ describe("CalendarSelection", () => {
       )
     ).toHaveClass("event-dot");
   });
+  it("renders calendars with local storage", async () => {
+    const mockCalendarRef = { current: null };
+    localStorage.setItem(
+      "selectedCalendars",
+      JSON.stringify(Object.keys(preloadedState.calendars.list))
+    );
+    await act(async () => {
+      renderWithProviders(
+        <CalendarApp calendarRef={mockCalendarRef} />,
+        preloadedState
+      );
+    });
+
+    expect(screen.getByLabelText("Calendar personnal")).toBeChecked();
+    expect(screen.getByLabelText("Calendar delegated")).toBeChecked();
+    expect(screen.getByLabelText("Calendar shared")).toBeChecked();
+  });
+  it("persist selected calendars in local storage", async () => {
+    const mockCalendarRef = { current: null };
+    await act(async () => {
+      renderWithProviders(
+        <CalendarApp calendarRef={mockCalendarRef} />,
+        preloadedState
+      );
+    });
+
+    expect(screen.getByLabelText("Calendar personnal")).toBeChecked();
+    expect(screen.getByLabelText("Calendar delegated")).not.toBeChecked();
+    expect(screen.getByLabelText("Calendar shared")).not.toBeChecked();
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Calendar personnal"));
+      fireEvent.click(screen.getByLabelText("Calendar shared"));
+    });
+
+    expect(localStorage.getItem("selectedCalendars")).toBe('["user3/cal1"]');
+  });
 });
 
 describe("calendar Availability search", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
   const preloadedState = {
     user: {
       userData: {

__test__/components/CalendarSelection.test.tsx

@@ -6,6 +6,9 @@ import * as calendarThunks from "../../src/features/Calendars/CalendarSlice";
 import userEvent from "@testing-library/user-event";
 
 describe("CalendarSelection", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
   const baseUser = {
     userData: {
       sub: "test",

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(
+      const cached = localStorage.getItem("selectedCalendars");
-        (id) => id.split("/")[0] === userId
+      if (cached && cached.length > 0) {
-      );
+        const parsed = JSON.parse(cached) as string[];
-      setSelectedCalendars(personalCalendarIds);
+        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