From 3bd43c993553397233b20cf1e58c793cac1ad885 Mon Sep 17 00:00:00 2001
From: Camille Moussu <66134347+Eriikah@users.noreply.github.com>
Date: Mon, 2 Mar 2026 11:15:46 +0100
Subject: [PATCH] [#572] removed dot for events (#590)

---
 __test__/components/Calendar.test.tsx    | 88 ------------------------
 src/components/Calendar/Calendar.styl    |  9 ---
 src/components/Calendar/Calendar.tsx     |  7 --
 src/components/Calendar/MiniCalendar.tsx | 26 +------
 4 files changed, 3 insertions(+), 127 deletions(-)

diff --git a/__test__/components/Calendar.test.tsx b/__test__/components/Calendar.test.tsx
index 75e68ec..1e7a38e 100644
--- a/__test__/components/Calendar.test.tsx
+++ b/__test__/components/Calendar.test.tsx
@@ -185,94 +185,6 @@ describe("CalendarSelection", () => {
     });
     expect(sharedAccordionSummary).toHaveAttribute("aria-expanded", "true");
   });
-  it("BUGFIX: remove dots in mini calendar when unselecting personal calendar", async () => {
-    await act(async () =>
-      renderWithProviders(<CalendarLayout />, preloadedState)
-    );
-
-    const checkbox = screen.getByLabelText("Calendar personal");
-    // checkbox checked : events shown
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).toHaveClass("event-dot");
-
-    // checkbox unchecked : events hidden
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).not.toHaveClass("event-dot");
-
-    // checkbox rechecked : events shown
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).toHaveClass("event-dot");
-  });
-  it("BUGFIX: remove dots in mini calendar when unselecting delegated calendar", async () => {
-    await act(async () =>
-      renderWithProviders(<CalendarLayout />, preloadedState)
-    );
-
-    // hide personal event first
-    await act(async () => {
-      fireEvent.click(screen.getByLabelText("Calendar personal"));
-    });
-    const checkbox = screen.getByLabelText("Calendar delegated");
-
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).not.toHaveClass("event-dot");
-
-    // checkbox checked : events shown
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).toHaveClass("event-dot");
-  });
-  it("BUGFIX: remove dots in mini calendar when unselecting shared calendar", async () => {
-    await act(async () =>
-      renderWithProviders(<CalendarLayout />, preloadedState)
-    );
-
-    // hide personal event first
-    await act(async () => {
-      fireEvent.click(screen.getByLabelText("Calendar personal"));
-    });
-    const checkbox = screen.getByLabelText("Calendar shared");
-
-    // checkbox unchecked : events hidden
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).not.toHaveClass("event-dot");
-
-    // checkbox checked : events shown
-    await act(async () => {
-      fireEvent.click(checkbox);
-    });
-    expect(
-      screen.getByTestId(
-        `date-${start.getFullYear()}-${start.getMonth()}-${start.getDate()}`
-      )
-    ).toHaveClass("event-dot");
-  });
   it("renders calendars with local storage", async () => {
     const mockCalendarRef = { current: null };
     localStorage.setItem(
diff --git a/src/components/Calendar/Calendar.styl b/src/components/Calendar/Calendar.styl
index 112801f..21d331a 100644
--- a/src/components/Calendar/Calendar.styl
+++ b/src/components/Calendar/Calendar.styl
@@ -127,15 +127,6 @@
   transition background-color 0.2s ease
   cursor pointer
 
-.event-dot
-  margin-top 2px
-  width 6px
-  height 6px
-  background-color #1D192B1F
-  border-radius 50%
-  margin-left auto
-  margin-right auto
-
 .weekSelector
   display flex
   flex-direction column
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index aab4753..3610d7f 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -109,12 +109,6 @@ export default function CalendarApp({
     [calendarIdsString]
   );
 
-  const dottedEvents: CalendarEvent[] = selectedCalendars.flatMap((calId) => {
-    const calendar = calendars[calId];
-    if (!calendar?.events) return [];
-    return Object.values(calendar.events);
-  });
-
   const [currentView, setCurrentView] = useState("timeGridWeek");
   const timezone =
     useAppSelector((state) => state.settings.timeZone) ??
@@ -644,7 +638,6 @@ export default function CalendarApp({
           calendarRef={calendarRef}
           selectedDate={selectedMiniDate}
           setSelectedMiniDate={setSelectedMiniDate}
-          dottedEvents={dottedEvents}
         />
         <Box sx={{ mb: 3, mt: 2 }}>
           <TempCalendarsInput
diff --git a/src/components/Calendar/MiniCalendar.tsx b/src/components/Calendar/MiniCalendar.tsx
index f8aa7db..66c72af 100644
--- a/src/components/Calendar/MiniCalendar.tsx
+++ b/src/components/Calendar/MiniCalendar.tsx
@@ -6,27 +6,23 @@ import {
   formatDateToYYYYMMDDTHHMMSS,
   getCalendarRange,
 } from "@/utils/dateUtils";
+import type { CalendarApi } from "@fullcalendar/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { DateCalendar } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import moment from "moment";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useEffect, useState } from "react";
 import { useI18n } from "twake-i18n";
-import { CalendarEvent } from "@/features/Events/EventsTypes";
-import type { CalendarApi } from "@fullcalendar/core";
 
 export function MiniCalendar({
   calendarRef,
   selectedDate,
-
   setSelectedMiniDate,
-  dottedEvents,
 }: {
   calendarRef: React.MutableRefObject<CalendarApi | null>;
   selectedDate: Date;
   setSelectedMiniDate: (d: Date) => void;
-  dottedEvents: CalendarEvent[];
 }) {
   const dispatch = useAppDispatch();
   const calendars = useAppSelector((state) => state.calendars);
@@ -102,21 +98,10 @@ export function MiniCalendar({
                   })()
                 : false;
 
-            const hasEvents = dottedEvents.some((event) => {
-              const eventDate = new Date(event.start);
-              return (
-                eventDate.getFullYear() === date.getFullYear() &&
-                eventDate.getMonth() === date.getMonth() &&
-                eventDate.getDate() === date.getDate() &&
-                event.status !== "CANCELLED"
-              );
-            });
-
             const classNames = [
               isToday ? "today" : "",
               isSelectedDay ? "selectedDay" : "",
               isInSelectedWeek ? "selectedWeek" : "",
-              hasEvents ? "event-dot" : "",
             ].join(" ");
 
             return {
@@ -144,12 +129,7 @@ export function MiniCalendar({
                 },
               },
               "data-testid": `date-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
-              children: (
-                <>
-                  {ownerState.day.date()}
-                  {hasEvents && <div className="event-dot" />}
-                </>
-              ),
+              children: <>{ownerState.day.date()}</>,
             };
           },
         }}