diff --git a/__test__/components/Calendar.test.tsx b/__test__/components/Calendar.test.tsx index 582badf..d60e93a 100644 --- a/__test__/components/Calendar.test.tsx +++ b/__test__/components/Calendar.test.tsx @@ -128,7 +128,10 @@ describe("CalendarSelection", () => { }; it("renders calendars", async () => { const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); expect(screen.getByText("Personnal Calendars")).toBeInTheDocument(); expect(screen.getByText("Delegated Calendars")).toBeInTheDocument(); expect(screen.getByText("Other Calendars")).toBeInTheDocument(); @@ -139,7 +142,10 @@ describe("CalendarSelection", () => { }); it("open accordeon when clicking on button only", () => { const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); expect(screen.getByText("Personnal Calendars")).toBeInTheDocument(); expect(screen.getByText("Delegated Calendars")).toBeInTheDocument(); expect(screen.getByText("Other Calendars")).toBeInTheDocument(); diff --git a/__test__/components/EventModifications.test.tsx b/__test__/components/EventModifications.test.tsx index b212d9c..d76b2ab 100644 --- a/__test__/components/EventModifications.test.tsx +++ b/__test__/components/EventModifications.test.tsx @@ -70,7 +70,10 @@ describe("CalendarApp integration", () => { }; const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); }; it("renders the event on the calendar and calendarRef works", async () => { @@ -159,7 +162,10 @@ describe("CalendarApp integration", () => { title: "Private Event", }); const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); const eventEls = screen.getAllByText("Private Event"); const found = eventEls.some((eventEl) => @@ -174,7 +180,10 @@ describe("CalendarApp integration", () => { title: "Confidential Event", }); const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); const eventEls = screen.getAllByText("Confidential Event"); const found = eventEls.some((eventEl) => @@ -189,7 +198,10 @@ describe("CalendarApp integration", () => { title: "Public Event", }); const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); const eventEls = screen.getAllByText("Public Event"); const found = eventEls.some((eventEl) => diff --git a/__test__/components/Menubar.test.tsx b/__test__/components/Menubar.test.tsx index f351b6e..2e7ffe7 100644 --- a/__test__/components/Menubar.test.tsx +++ b/__test__/components/Menubar.test.tsx @@ -23,14 +23,14 @@ describe("Calendar App Component Display Tests", () => { ]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); const navbarElement = screen.getByText("Twake"); @@ -40,14 +40,14 @@ describe("Calendar App Component Display Tests", () => { (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText(/Twake/i)).toBeInTheDocument(); @@ -58,14 +58,14 @@ describe("Calendar App Component Display Tests", () => { (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText("JD")).toBeInTheDocument(); @@ -86,14 +86,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText("t")).toBeInTheDocument(); @@ -116,14 +116,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText("t")).toBeInTheDocument(); @@ -145,14 +145,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText("t")).toBeInTheDocument(); @@ -174,14 +174,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText("JD")).toBeInTheDocument(); @@ -203,14 +203,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByText("t")).toBeInTheDocument(); @@ -232,14 +232,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); // Should not crash and show empty string @@ -263,14 +263,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); // Should not crash and show empty string @@ -294,14 +294,14 @@ describe("Calendar App Component Display Tests", () => { }; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); // Should not crash and show empty string @@ -313,14 +313,14 @@ describe("Calendar App Component Display Tests", () => { (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); expect(screen.getByTestId("AppsIcon")).toBeInTheDocument(); @@ -330,14 +330,14 @@ describe("Calendar App Component Display Tests", () => { (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); const appsButton = screen.getByTestId("AppsIcon"); @@ -350,14 +350,14 @@ describe("Calendar App Component Display Tests", () => { (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); - const mockCurrentDate = new Date('2024-04-15'); - + const mockCurrentDate = new Date("2024-04-15"); + renderWithProviders( - , + />, preloadedState ); const appsButton = screen.getByTestId("AppsIcon"); diff --git a/__test__/components/MiniCalendarColor.test.tsx b/__test__/components/MiniCalendarColor.test.tsx index 2c34705..4d51021 100644 --- a/__test__/components/MiniCalendarColor.test.tsx +++ b/__test__/components/MiniCalendarColor.test.tsx @@ -45,7 +45,10 @@ describe("MiniCalendar", () => { }, }; const mockCalendarRef = { current: null }; - renderWithProviders(, preloadedState); + renderWithProviders( + , + preloadedState + ); }; it("renders mini calendar with today in orange", async () => { @@ -56,9 +59,4 @@ describe("MiniCalendar", () => { const todayTile = screen.getByTestId(dateTestId); expect(todayTile?.parentElement).toHaveClass("today"); }); - - - - }); - diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 3f4e87d..d0c7d87 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -7,7 +7,7 @@ import { CalendarApi, DateSelectArg } from "@fullcalendar/core"; import ReactCalendar from "react-calendar"; import "./Calendar.css"; import "./CustomCalendar.css"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import EventPopover from "../../features/Events/EventModal"; import { CalendarEvent } from "../../features/Events/EventsTypes"; @@ -86,6 +86,7 @@ export default function CalendarApp({ } }); const [selectedCalendars, setSelectedCalendars] = useState([]); + const fetchedRangesRef = useRef>({}); // Auto-select personal calendars when first loaded useEffect(() => { @@ -119,23 +120,23 @@ export default function CalendarApp({ ); useEffect(() => { + if (!rangeKey) return; selectedCalendars.forEach((id) => { - if (!pending && rangeKey) { - dispatch( - getCalendarDetailAsync({ - calId: id, - match: { - start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start), - end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end), - }, - }) - ); - } + if (fetchedRangesRef.current[id] === rangeKey) return; + fetchedRangesRef.current[id] = rangeKey; + dispatch( + getCalendarDetailAsync({ + calId: id, + match: { + start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start), + end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end), + }, + }) + ); }); }, [ rangeKey, selectedCalendars, - pending, dispatch, calendarRange.start, calendarRange.end, diff --git a/src/components/Calendar/CustomCalendar.css b/src/components/Calendar/CustomCalendar.css index 8bf7bbf..49adfd8 100644 --- a/src/components/Calendar/CustomCalendar.css +++ b/src/components/Calendar/CustomCalendar.css @@ -224,6 +224,10 @@ th.fc-col-header-cell.fc-day:hover .fc-timegrid-slot-label { background-color: #fff !important; } -thead .fc-scroller, tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller { +thead .fc-scroller, +tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller { overflow: hidden !important; +} +.navigation-controls { + margin-right: 40px; } \ No newline at end of file diff --git a/src/components/Menubar/Menubar.css b/src/components/Menubar/Menubar.css index 7ad17db..617bc20 100644 --- a/src/components/Menubar/Menubar.css +++ b/src/components/Menubar/Menubar.css @@ -49,7 +49,7 @@ .menubar-item { display: flex; align-items: center; - width: calc(330px - .5rem); + width: calc(330px - 0.5rem); } .logo { @@ -104,4 +104,4 @@ display: flex; justify-content: flex-end; align-items: center; -} \ No newline at end of file +}