[#572] removed dot for events (#590)

__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(

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

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

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: (
+              children: <>{ownerState.day.date()}</>,
-                <>
-                  {ownerState.day.date()}
-                  {hasEvents && <div className="event-dot" />}
-                </>
-              ),
             };
           },
         }}