fix: Corrects the events passed into each day

bruceharrison1984 · Jul 22, 2023 · 1f25686 · 1f25686
1 parent 01e3d17
commit 1f25686
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 37 deletions.
diff --git a/packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts b/packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts
@@ -242,6 +242,12 @@ describe('Date Adapter', () => {
           dateTwo: new Date(2022, 1, 9),
           expected: true,
         },
+        {
+          targetDate: new Date('2023-07-26T23:00:00.000Z'),
+          dateOne: new Date('2023-07-27T06:00:00.000Z'),
+          dateTwo: new Date('2023-07-27T12:00:00.000Z'),
+          expected: true,
+        },
       ])(
         '$targetDate between $dateOne and $dateTwo returns $expected',
         ({ targetDate, dateOne, dateTwo, expected }) => {

diff --git a/packages/Schedulely/src/layouts/monthLayout/MonthLayout.tsx b/packages/Schedulely/src/layouts/monthLayout/MonthLayout.tsx
@@ -14,13 +14,13 @@ export const MonthLayout = () => {
   return (
     <div className="calendar-body-container">
       <HighlightProvider>
-        {calendarWithEvents.map(({ daysInWeek, events }, idx) => (
+        {calendarWithEvents.map(({ daysInWeek, events, eventsOnDays }, idx) => (
           <div
             key={daysInWeek[0].toISOString()}
             className="week-container"
             data-week={idx}
           >
-            <EventIntersectionProvider eventsInWeek={events}>
+            <EventIntersectionProvider eventsOnDays={eventsOnDays}>
               <EventWeekLayout eventsInWeek={events} daysInweek={daysInWeek} />
               <WeekLayout dates={daysInWeek} />
             </EventIntersectionProvider>

diff --git a/packages/Schedulely/src/providers/CalendarProvider.tsx b/packages/Schedulely/src/providers/CalendarProvider.tsx
@@ -125,12 +125,16 @@ export const CalendarProvider = ({
               x.start.valueOf() -
               (y.end.valueOf() - y.end.valueOf())
           ),
-        eventsOnDays: week.map((day) => ({
-          date: day,
-          events: events.filter(
-            (event) => event.start <= day && event.end >= day
-          ),
-        })),
+        eventsOnDays: week.map((day) => {
+          const endOfDay = new Date(day);
+          endOfDay.setDate(day.getDate() + 1);
+          return {
+            date: day,
+            events: events.filter((event) =>
+              dateAdapter.isDateBetween(day, event.start, event.end)
+            ),
+          };
+        }),
       })),
     [calendarView, events, dateAdapter]
   );

diff --git a/packages/Schedulely/src/providers/EventIntersectionProvider.tsx b/packages/Schedulely/src/providers/EventIntersectionProvider.tsx
@@ -1,4 +1,4 @@
-import { EventIntersectionState, InternalCalendarEvent } from '@/types';
+import { EventIntersectionState, InternalEventWeek } from '@/types';
 import {
   ReactNode,
   createContext,
@@ -7,7 +7,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useCalendar } from '@/hooks/useCalendar';
 
 export const EventIntersectionContext =
   createContext<EventIntersectionState | null>(null);
@@ -21,30 +20,19 @@ EventIntersectionContext.displayName = 'EventIntersectionContext';
  */
 export const EventIntersectionProvider = ({
   children,
-  eventsInWeek,
+  eventsOnDays,
 }: {
   children: ReactNode;
-  eventsInWeek: InternalCalendarEvent[];
+  eventsOnDays: InternalEventWeek['eventsOnDays'];
 }) => {
-  const {
-    dateAdapter: { isDateBetween },
-  } = useCalendar();
-
   const [parentContainerRef, setParentContainerRef] =
     useState<HTMLElement | null>(null);
 
-  const [eventVisibility, setEventVisibility] = useState<
-    Record<string, InternalCalendarEvent>
-  >({});
-
   const observerRef = useRef<IntersectionObserver | undefined>();
 
   const getEventsOnDate = useCallback(
-    (date: Date) =>
-      Object.values(eventVisibility).filter((x) =>
-        isDateBetween(date, x.start, x.end)
-      ),
-    [eventVisibility, isDateBetween]
+    (date: Date) => eventsOnDays.find((x) => x.date === date)?.events ?? [],
+    [eventsOnDays]
   );
 
   /**
@@ -57,8 +45,6 @@ export const EventIntersectionProvider = ({
   const checkIntersection: IntersectionObserverCallback = useCallback(
     (entries) =>
       entries.map((x) => {
-        var eventId = x.target.attributes.getNamedItem('data-eventid')?.value;
-
         const currentStyle =
           x.target
             .getAttribute('style')
@@ -71,17 +57,8 @@ export const EventIntersectionProvider = ({
           currentStyle.push('visibility: hidden');
           x.target.setAttribute('style', currentStyle.join(';'));
         }
-
-        const matchingEvent = eventsInWeek.find((x) => x.id === eventId);
-        if (matchingEvent === undefined) return;
-
-        setEventVisibility((current) => {
-          current[matchingEvent.id] = matchingEvent;
-          current[matchingEvent.id].visible = x.isIntersecting;
-          return { ...current };
-        });
       }),
-    [eventsInWeek]
+    []
   );
 
   useEffect(() => {