moving pure functions to util

Author: yoavweber

src/components/CalendarBody.tsx

@@ -1,26 +1,15 @@
-import React from 'react';
-import {
-  add,
-  isSameHour,
-  addHours,
-  startOfDay,
-  startOfWeek,
-  format,
-  getDay,
-  setDay,
-  differenceInMinutes,
-} from 'date-fns';
+import React, { useEffect, useRef } from 'react';
+import { add, format, getDay, setDay, differenceInMinutes } from 'date-fns';
 import { Table } from 'antd';
 
 import {
   GenericEvent,
-  WeekObject,
   CalendarBodyProps,
   EventsObject,
   EventBlockProps,
   ColumnNode,
-  GetWeekDates,
 } from './types';
+import { getDayHoursEvents, sizeEventBox, MIN_BOX_SIZE } from './utils';
 
 const BOX_POSITION_OFFSET = 26;
 const SCROLL_TO_ROW = 19;
@@ -81,85 +70,12 @@ function Calendar<T extends GenericEvent>({
   weekends,
 }: CalendarBodyProps<T>) {
   const rowRef = useRef<null | HTMLDivElement>(null);
-
   useEffect(() => {
     if (rowRef.current) {
       rowRef.current?.scrollIntoView();
     }
   }, [rowRef]);
 
-  const getDayHoursEvents = (
-    value: GetWeekDates,
-    weekObject: WeekObject<T> | undefined
-  ) => {
-    const ALL_DAY_EVENT = 0;
-    const events: EventsObject<T>[] = [];
-
-    for (let i = 0; i < 26; i++) {
-      const startDate = add(startOfDay(startOfWeek(value.startDate)), {
-        days: 1,
-      });
-      const hour = addHours(startDate, i - 1);
-
-      events.push({
-        id: i,
-        hourObject: hour,
-        hour: i != ALL_DAY_EVENT ? format(hour, 'hh a') : 'all-day',
-        Monday:
-          weekObject?.monday &&
-          weekObject?.monday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, hour);
-          }),
-        Tuesday:
-          weekObject?.tuesday &&
-          weekObject?.tuesday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, add(hour, { days: 1 }));
-          }),
-        Wednesday:
-          weekObject?.wednesday &&
-          weekObject?.wednesday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, add(hour, { days: 2 }));
-          }),
-        Thursday:
-          weekObject?.thursday &&
-          weekObject?.thursday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, add(hour, { days: 3 }));
-          }),
-        Friday:
-          weekObject?.friday &&
-          weekObject?.friday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, add(hour, { days: 4 }));
-          }),
-        Saturday:
-          weekObject?.saturday &&
-          weekObject?.saturday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, add(hour, { days: 5 }));
-          }),
-        Sunday:
-          weekObject?.sunday &&
-          weekObject?.sunday.filter(e => {
-            return e.allDay
-              ? i === ALL_DAY_EVENT
-              : isSameHour(e.startTime, add(hour, { days: 6 }));
-          }),
-      });
-    }
-
-    return events;
-  };
-
   const dayList = weekends
     ? [
         'Monday',
@@ -237,7 +153,7 @@ function Calendar<T extends GenericEvent>({
   const tableColumns = [hourColumn, ...dayColumns];
 
   return (
-    <div className="dayViewContainer">
+    <div>
       <Table
         rowKey={record => record.id}
         dataSource={getDayHoursEvents(weekDates, getDayEvents)}
@@ -267,23 +183,4 @@ function Calendar<T extends GenericEvent>({
   );
 }
 
-const sizeEventBox = <T extends GenericEvent>(event: T, hour: Date) => {
-  const eventStartTime = new Date(event.startTime);
-  const eventEndTime = new Date(event.endTime);
-  const boxSize =
-    Math.floor(
-      differenceInMinutes(eventEndTime, eventStartTime) * HOUR_TO_DECIMAL
-    ) < MIN_BOX_SIZE
-      ? MIN_BOX_SIZE
-      : Math.floor(
-          differenceInMinutes(eventEndTime, eventStartTime) * HOUR_TO_DECIMAL
-        );
-  const boxPosition =
-    differenceInMinutes(hour, eventStartTime) * HOUR_TO_DECIMAL > 100
-      ? 0
-      : differenceInMinutes(eventStartTime, hour) * HOUR_TO_DECIMAL;
-
-  return { boxPosition: boxPosition, boxSize: boxSize };
-};
-
 export default Calendar;

src/components/WeeklyCalendar.tsx

@@ -1,23 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Card } from 'antd';
-import {
-  getDay,
-  eachDayOfInterval,
-  startOfWeek,
-  endOfWeek,
-  isSameDay,
-  isSameWeek,
-} from 'date-fns';
+import { startOfWeek, endOfWeek } from 'date-fns';
 
 import Calendar from './CalendarBody';
 import { CalendarHeader } from './CalendarHeader';
-
-import {
-  GenericEvent,
-  CalendarContainerProps,
-  WeekObject,
-  DayName,
-} from './types';
+import { GenericEvent, CalendarContainerProps } from './types';
+import { daysToWeekObject } from './utils';
 
 export function WeeklyCalendar<T extends GenericEvent>({
   events,
@@ -42,58 +30,7 @@ export function WeeklyCalendar<T extends GenericEvent>({
     onSelectDate && onSelectDate(startWeek);
   }, [startWeek]);
 
-  const daysToWeekObject = <T extends GenericEvent>(events: T[]) => {
-    const dayNames: DayName[] = [
-      'sunday',
-      'monday',
-      'tuesday',
-      'wednesday',
-      'thursday',
-      'friday',
-      'saturday',
-    ];
-
-    const weekObject: WeekObject<T> = {
-      sunday: [],
-      monday: [],
-      tuesday: [],
-      wednesday: [],
-      thursday: [],
-      friday: [],
-      saturday: [],
-    };
-
-    if (events == null) {
-      return weekObject;
-    }
-
-    for (const googleEventIndex in events) {
-      const eventStartTimeDay = events[googleEventIndex].startTime;
-      const eventEndTimeDay = events[googleEventIndex].endTime;
-
-      if (!isSameDay(eventStartTimeDay, eventEndTimeDay)) {
-        const result = eachDayOfInterval({
-          start: eventStartTimeDay,
-          end: eventEndTimeDay,
-        });
-        for (const dayInterval in result) {
-          const splitedEvent = { ...events[googleEventIndex] };
-          splitedEvent.startTime = result[dayInterval];
-          splitedEvent.endTime = result[dayInterval];
-          const weekObjectKey: DayName =
-            dayNames[getDay(new Date(result[dayInterval]))];
-          isSameWeek(startWeek, splitedEvent.startTime) &&
-            weekObject[weekObjectKey].push(splitedEvent);
-        }
-      } else {
-        const weekObjectKey: DayName = dayNames[getDay(eventStartTimeDay)];
-        weekObject[weekObjectKey].push(events[googleEventIndex]);
-      }
-    }
-
-    return weekObject;
-  };
-  const weekObject = daysToWeekObject(events);
+  const weekObject = daysToWeekObject(events, startWeek);
 
   return (
     <Card>