diff --git a/__test__/components/Calendar.test.tsx b/__test__/components/Calendar.test.tsx
index 5f08660..6d155cc 100644
--- a/__test__/components/Calendar.test.tsx
+++ b/__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(
+ ,
+ 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(
+ ,
+ 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: {
diff --git a/__test__/components/CalendarSelection.test.tsx b/__test__/components/CalendarSelection.test.tsx
index 4ac36c9..0f60714 100644
--- a/__test__/components/CalendarSelection.test.tsx
+++ b/__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",
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index 72bcdce..728dc94 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/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);
}, [
diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx
index 908c9f2..13a054b 100644
--- a/src/components/Calendar/CalendarSelection.tsx
+++ b/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 (
+ delegatedCalendars.includes(id)
+ )}
/>
+ sharedCalendars.includes(id)
+ )}
/>