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) + )} />