refactor: 💡 Code refactored

✅ Closes: #140
melfore · Nov 6, 2023 · 9e8d987 · 9e8d987
1 parent d6f31e5
commit 9e8d987
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 95 deletions.
diff --git a/src/grid/Cell/index.tsx b/src/grid/Cell/index.tsx
@@ -9,13 +9,13 @@ interface GridCellProps {
   column: Interval;
   height: number;
   index: number;
-  visibleDayInfo: {
+  hourInfo: {
     backHour?: boolean;
     nextHour?: boolean;
   };
 }
 
-const GridCell = ({ column, height, index, visibleDayInfo }: GridCellProps) => {
+const GridCell = ({ column, height, index, hourInfo: visibleDayInfo }: GridCellProps) => {
   const {
     blocksOffset,
     columnWidth,

diff --git a/src/grid/CellGroup/index.tsx b/src/grid/CellGroup/index.tsx
@@ -11,12 +11,14 @@ interface GridCellGroupProps {
   dayInfo?: {
     thisMonth?: number;
     untilNow?: number;
-    backHour: boolean;
-    nextHour: boolean;
   }[];
+  hourInfo?: {
+    backHour?: boolean;
+    nextHour?: boolean;
+  };
 }
 
-const GridCellGroup = ({ column, index, dayInfo }: GridCellGroupProps) => {
+const GridCellGroup = ({ column, index, dayInfo, hourInfo }: GridCellGroupProps) => {
   const {
     columnWidth,
     resolution: { sizeInUnits, unit, unitAbove },
@@ -43,35 +45,35 @@ const GridCellGroup = ({ column, index, dayInfo }: GridCellGroupProps) => {
     if (unitAbove === "month") {
       const pxUntil =
         index !== 0 ? Duration.fromObject({ ["day"]: dayInfo![index - 1].untilNow }).as("week") / sizeInUnits : 0;
-      if (dayInfo![index].backHour) {
+      if (hourInfo!.backHour) {
         const hourInMonthPx = columnWidth / 168;
         return pxUntil * columnWidth + unitAboveSpanInPx + hourInMonthPx;
       }
-      if (dayInfo![index].nextHour) {
+      if (hourInfo!.nextHour) {
         const hourInMonthPx = columnWidth / 168;
         return pxUntil * columnWidth + unitAboveSpanInPx - hourInMonthPx;
       }
       return pxUntil * columnWidth + unitAboveSpanInPx;
     }
     if (unitAbove === "day") {
-      if (dayInfo![index].backHour) {
+      if (hourInfo!.backHour) {
         return index * unitAboveSpanInPx + columnWidth / sizeInUnits;
       }
-      if (dayInfo![index].nextHour) {
+      if (hourInfo!.nextHour) {
         return index * unitAboveSpanInPx - columnWidth / sizeInUnits;
       }
     }
     if (unitAbove === "week") {
-      if (dayInfo![index].backHour) {
+      if (hourInfo!.backHour) {
         return index * unitAboveSpanInPx + columnWidth / 24;
       }
-      if (dayInfo![index].nextHour) {
+      if (hourInfo!.nextHour) {
         return index * unitAboveSpanInPx - columnWidth / 24;
       }
     }
 
     return index * unitAboveSpanInPx;
-  }, [index, unitAboveSpanInPx, columnWidth, sizeInUnits, dayInfo, unitAbove]);
+  }, [index, unitAboveSpanInPx, columnWidth, sizeInUnits, dayInfo, unitAbove, hourInfo]);
 
   const yPos = useMemo(() => rowHeight * 0.3, [rowHeight]);
 

diff --git a/src/grid/Cells/index.tsx b/src/grid/Cells/index.tsx
@@ -1,11 +1,12 @@
-import React, { memo } from "react";
+import React, { memo, useMemo } from "react";
 
 import { KonvaGroup } from "../../@konva";
 import { useTimelineContext } from "../../timeline/TimelineContext";
-import { daysInMonth, getMonth, getStartMonthsDay, getYear } from "../../utils/time-resolution";
 import GridCell from "../Cell";
 import GridCellGroup from "../CellGroup";
 
+import { dayDetail, timeBlockTz } from "./utils";
+
 interface GridCellsProps {
   height: number;
 }
@@ -17,96 +18,32 @@ const GridCells = ({ height }: GridCellsProps) => {
     visibleTimeBlocks,
     resolution: { unitAbove },
   } = useTimelineContext();
-  const dayInfo: {
-    thisMonth?: number;
-    untilNow?: number;
-    backHour: boolean;
-    nextHour: boolean;
-  }[] = [];
-  const visibleDayInfo: {
-    backHour?: boolean;
-    nextHour?: boolean;
-  }[] = [];
-  const tz = interval.start!.toISO()?.slice(-6);
-  if (unitAbove === "month" || unitAbove === "day" || unitAbove === "week") {
-    aboveTimeBlocks.forEach((column, index) => {
-      const month = getMonth(column);
-      const year = getYear(column);
-      const currentMonthDays = daysInMonth(Number(month), Number(year));
-      if (index === 0) {
-        const startDay = getStartMonthsDay(interval.start!);
-        const daysToMonthEnd = currentMonthDays - Number(startDay) + 1;
-        dayInfo.push({
-          thisMonth: daysToMonthEnd,
-          untilNow: daysToMonthEnd,
-          backHour: false,
-          nextHour: false,
-        });
-        return;
-      }
-      const n = dayInfo[index - 1].untilNow! + currentMonthDays;
-      const tzStart = column.start!.toISO()?.slice(-6);
-      if (tz !== tzStart) {
-        if (Number(tz?.slice(1, 3)) - Number(tzStart!.slice(1, 3)) > 0) {
-          dayInfo.push({
-            thisMonth: currentMonthDays,
-            untilNow: n,
-            backHour: true,
-            nextHour: false,
-          });
-          return;
-        }
-        dayInfo.push({
-          thisMonth: currentMonthDays,
-          untilNow: n,
-          backHour: false,
-          nextHour: true,
-        });
-      }
-
-      dayInfo.push({
-        thisMonth: currentMonthDays,
-        untilNow: n,
-        backHour: false,
-        nextHour: false,
-      });
-    });
-  }
-  visibleTimeBlocks.forEach((column) => {
-    const tzStart = column.start!.toISO()?.slice(-6);
-
-    if (tz !== tzStart) {
-      if (Number(tz?.slice(1, 3)) - Number(tzStart!.slice(1, 3)) > 0) {
-        visibleDayInfo.push({
-          backHour: true,
-          nextHour: false,
-        });
-        return;
-      }
-      visibleDayInfo.push({
-        backHour: false,
-        nextHour: true,
-      });
-    }
-    visibleDayInfo.push({
-      backHour: false,
-      nextHour: false,
-    });
-    return;
-  });
+  const tz = useMemo(() => interval.start!.toISO()!.slice(-6), [interval]);
 
+  const dayInfo = useMemo(
+    () => dayDetail(unitAbove, aboveTimeBlocks, interval),
+    [unitAbove, aboveTimeBlocks, interval]
+  );
+  const aboveHourInfo = useMemo(() => timeBlockTz(aboveTimeBlocks, tz), [tz, aboveTimeBlocks]);
+  const visibileHourInfo = useMemo(() => timeBlockTz(visibleTimeBlocks, tz), [tz, visibleTimeBlocks]);
   return (
     <KonvaGroup>
       {aboveTimeBlocks.map((column, index) => (
-        <GridCellGroup key={`cell-group-${index}`} column={column} index={index} dayInfo={dayInfo} />
+        <GridCellGroup
+          key={`cell-group-${index}`}
+          column={column}
+          index={index}
+          dayInfo={dayInfo}
+          hourInfo={aboveHourInfo[index]}
+        />
       ))}
       {visibleTimeBlocks.map((column, index) => (
         <GridCell
           key={`cell-${index}`}
           column={column}
           height={height}
           index={index}
-          visibleDayInfo={visibleDayInfo[index]}
+          hourInfo={visibileHourInfo[index]}
         />
       ))}
     </KonvaGroup>

diff --git a/src/grid/Cells/utils.ts b/src/grid/Cells/utils.ts
@@ -0,0 +1,66 @@
+import { Interval } from "luxon";
+
+import { daysInMonth, getMonth, getStartMonthsDay, getYear, Scale } from "../../utils/time-resolution";
+
+interface visibleDayInfoProps {
+  backHour?: boolean;
+  nextHour?: boolean;
+}
+
+export const timeBlockTz = (timeBlock: Interval[], initialTz?: string) => {
+  const dayInfoArray: visibleDayInfoProps[] = [];
+  timeBlock.forEach((column) => {
+    const tzStart = column.start!.toISO()?.slice(-6);
+
+    if (initialTz !== tzStart) {
+      if (Number(initialTz?.slice(1, 3)) - Number(tzStart!.slice(1, 3)) > 0) {
+        dayInfoArray.push({
+          backHour: true,
+          nextHour: false,
+        });
+        return;
+      }
+      dayInfoArray.push({
+        backHour: false,
+        nextHour: true,
+      });
+    }
+    dayInfoArray.push({
+      backHour: false,
+      nextHour: false,
+    });
+    return;
+  });
+  return dayInfoArray;
+};
+
+export const dayDetail = (unitAbove: Scale, aboveTimeBlocks: Interval[], interval: Interval) => {
+  if (unitAbove === "month") {
+    const dayInfo: {
+      thisMonth?: number;
+      untilNow?: number;
+    }[] = [];
+    aboveTimeBlocks.forEach((column, index) => {
+      const month = getMonth(column);
+      const year = getYear(column);
+      const currentMonthDays = daysInMonth(Number(month), Number(year));
+      if (index === 0) {
+        const startDay = getStartMonthsDay(interval.start!);
+        const daysToMonthEnd = currentMonthDays - Number(startDay) + 1;
+        dayInfo.push({
+          thisMonth: daysToMonthEnd,
+          untilNow: daysToMonthEnd,
+        });
+        return;
+      }
+      const n = dayInfo[index - 1].untilNow! + currentMonthDays;
+
+      dayInfo.push({
+        thisMonth: currentMonthDays,
+        untilNow: n,
+      });
+    });
+    return dayInfo;
+  }
+  return [];
+};
diff --git a/src/timeline/TimelineContext.tsx b/src/timeline/TimelineContext.tsx
@@ -105,7 +105,7 @@ export const TimelineProvider = ({
   columnWidth: externalColumnWidth,
   debug = false,
   displayTasksLabel = false,
-  dragResolution: externalDragResolution,
+  dragResolution: externalDragResolution = "1min",
   enableDrag = true,
   enableResize = true,
   headerLabel,
@@ -116,7 +116,7 @@ export const TimelineProvider = ({
   onTaskChange,
   tasks: externalTasks = [],
   range: externalRange,
-  resolution: externalResolution = "1min",
+  resolution: externalResolution = "1hrs",
   resources: externalResources,
   rowHeight: externalRowHeight,
   timezone: externalTimezone,