fix: infinity loop cause by change layout, adjust style

__test__/components/Calendar.test.tsx

@@ -128,7 +128,10 @@ describe("CalendarSelection", () => {
   };
   it("renders calendars", async () => {
     const mockCalendarRef = { current: null };
-    renderWithProviders(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      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(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      preloadedState
+    );
     expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
     expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
     expect(screen.getByText("Other Calendars")).toBeInTheDocument();

__test__/components/EventModifications.test.tsx

@@ -70,7 +70,10 @@ describe("CalendarApp integration", () => {
     };
 
     const mockCalendarRef = { current: null };
-    renderWithProviders(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      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(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      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(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      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(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      preloadedState
+    );
 
     const eventEls = screen.getAllByText("Public Event");
     const found = eventEls.some((eventEl) =>

__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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       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(
-      <Menubar 
+      <Menubar
         calendarRef={mockCalendarRef}
         onRefresh={mockOnRefresh}
         currentDate={mockCurrentDate}
-      />, 
+      />,
       preloadedState
     );
     const appsButton = screen.getByTestId("AppsIcon");

__test__/components/MiniCalendarColor.test.tsx

@@ -45,7 +45,10 @@ describe("MiniCalendar", () => {
       },
     };
     const mockCalendarRef = { current: null };
-    renderWithProviders(<CalendarApp calendarRef={mockCalendarRef} />, preloadedState);
+    renderWithProviders(
+      <CalendarApp calendarRef={mockCalendarRef} />,
+      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");
   });
-
-
-
-
 });
-

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<string[]>([]);
+  const fetchedRangesRef = useRef<Record<string, string>>({});
 
   // 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,

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;
 }

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;
-}
+}