refac: change variable name more readable

Author: hoon2hooni

components/events/Timetable.tsx

@@ -14,7 +14,10 @@ import {
 } from "@lib/hooks/useMouseAndTouch";
 import useResizeEvent from "@lib/hooks/useResizeEvent";
 import useUrlEventId from "@lib/hooks/useUrlEventId";
-import { generateSelectedArea, getTableIndex } from "@lib/tableHelper";
+import {
+  generateSelectedArea,
+  getColumnIndexAtTimetable,
+} from "@lib/tableHelper";
 import updateCurrentAttendee from "@lib/updateCurrentAttendee";
 import { FC, useCallback, useRef, useState } from "react";
 
@@ -43,7 +46,7 @@ interface TimeProps {
   h: number;
 }
 
-const initialSelectedArea = { x: 0, y: 0, w: 0, h: 0 };
+const initialArea = { x: 0, y: 0, w: 0, h: 0 };
 
 const END_TIME = 24;
 const START_TIME = 8;
@@ -68,52 +71,51 @@ const Timetable: FC<ComponentProps> = ({
   const isUserReady = useDelay(500, currentAttendee);
   const id = useUrlEventId();
   const containerRef = useRef<HTMLDivElement>(null);
-  const currentSelectedAreaRef = useRef<TimeProps>(initialSelectedArea);
-  const initialTableAreaRef = useRef<TimeProps>(initialSelectedArea);
-  const { startClientX, startClientY, setInit } = useMouseAndTouchStartLocation(
-    {
+  const currentSelectedAreaRef = useRef<TimeProps>(initialArea);
+  const timetableAreaRef = useRef<TimeProps>(initialArea);
+  const { startClientX, startClientY, initializeMouseAndTouchStart } =
+    useMouseAndTouchStartLocation({
       ref: containerRef,
       skipEvent: !isUserReady,
-    }
-  );
+    });
   const hasNotStartMove = startClientX === 0 && startClientY === 0;
-  const currentTableIndex = useRef(0);
-  const { moveClientY, setInitMove } = useMouseAndTouchMoveLocation({
-    skipEvent: hasNotStartMove,
-  });
+  const columnIndexOfSelectedAreaRef = useRef(0);
+  const { moveClientY, initializeMouseAndTouchMove } =
+    useMouseAndTouchMoveLocation({
+      skipEvent: hasNotStartMove,
+    });
 
-  const [initialTableArea, setInitialTableArea] = useState(initialSelectedArea);
-  const currentWidth = (initialTableArea.w - 1 * 6) / 7;
+  const [timetableArea, setTimetableArea] = useState(initialArea);
 
-  currentTableIndex.current = getTableIndex(
-    initialTableArea.w / 7,
+  columnIndexOfSelectedAreaRef.current = getColumnIndexAtTimetable(
+    timetableArea.w / 7,
     startClientX
   );
 
   currentSelectedAreaRef.current = generateSelectedArea(
     hasNotStartMove,
     moveClientY,
     startClientY,
-    initialTableArea,
-    startClientX,
-    currentWidth
+    timetableArea,
+    startClientX
   );
+
   const resizeTimeTableHandler = () => {
     if (containerRef.current) {
       const { x, y, width, height } =
         containerRef.current.getBoundingClientRect();
-      setInitialTableArea({ x, y, w: width, h: height });
-      initialTableAreaRef.current = { x, y, w: width, h: height };
+      setTimetableArea({ x, y, w: width, h: height });
+      timetableAreaRef.current = { x, y, w: width, h: height };
     }
   };
 
   useResizeEvent(resizeTimeTableHandler);
 
   const updateAttendeesAndResetSelectedArea = useCallback(() => {
     const resetSelectedArea = () => {
-      setInit({ clientX: 0, clientY: 0 });
-      currentSelectedAreaRef.current = initialSelectedArea;
-      setInitMove({ clientX: 0, clientY: 0 });
+      initializeMouseAndTouchStart();
+      initializeMouseAndTouchMove();
+      currentSelectedAreaRef.current = initialArea;
     };
 
     const currentSelectedArea = currentSelectedAreaRef.current;
@@ -124,9 +126,9 @@ const Timetable: FC<ComponentProps> = ({
 
     const selectedDates = getSelectedDatesWithSelectedArea(
       currentSelectedArea,
-      initialTableAreaRef.current,
+      timetableAreaRef.current,
       startDate,
-      currentTableIndex.current,
+      columnIndexOfSelectedAreaRef.current,
       currentPageIndex
     );
 
@@ -150,10 +152,10 @@ const Timetable: FC<ComponentProps> = ({
     attendees,
     currentAttendee,
     isEraseMode,
-    setInit,
     startDate,
     currentPageIndex,
-    setInitMove,
+    initializeMouseAndTouchMove,
+    initializeMouseAndTouchStart,
     id,
   ]);
 
@@ -215,7 +217,7 @@ const Timetable: FC<ComponentProps> = ({
           />
         );
       })}
-      <TimesWrapper height={initialTableArea.h}>
+      <TimesWrapper height={timetableArea.h}>
         {DAY_TIME_ARRAY[0].map((hour) => (
           <TimeUnit key={hour}>{hour}:00</TimeUnit>
         ))}

lib/hooks/useMouseAndTouch.ts

@@ -1,7 +1,7 @@
 import { normalizeTouchAndMouseEvent } from "@lib/handleCrossPlatform";
 import { getIsMobile } from "@lib/handleCrossPlatform";
 import type { RefObject } from "react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 type MouseEventType = "mousemove" | "mousedown";
 type TouchEventType = "touchmove" | "touchstart";
 type MouseAndTouchEventConfig = {
@@ -14,29 +14,45 @@ type ExceptEventType = Omit<MouseAndTouchEventConfig, "eventType">;
 export const useMouseAndTouchStartLocation = (config: ExceptEventType = {}) => {
   const isMobile = getIsMobile();
   const eventType = isMobile ? "touchstart" : "mousedown";
-  const { clientX, clientY, setStart } = useMouseAndTouchLocation({
+  const {
+    clientX,
+    clientY,
+    setEvent: setStart,
+  } = useMouseAndTouchLocation({
     eventType: eventType,
     ...config,
   });
+  const initializeMouseAndTouchStart = useCallback(
+    () => setStart({ clientX: 0, clientY: 0 }),
+    [setStart]
+  );
   return {
     startClientX: clientX,
     startClientY: clientY,
     setInit: setStart,
+    initializeMouseAndTouchStart,
   } as const;
 };
 
 export const useMouseAndTouchMoveLocation = (config: ExceptEventType = {}) => {
   const isMobile = getIsMobile();
   const eventType = isMobile ? "touchmove" : "mousemove";
-  const { clientX, clientY, setStart } = useMouseAndTouchLocation({
+  const {
+    clientX,
+    clientY,
+    setEvent: setMove,
+  } = useMouseAndTouchLocation({
     eventType: eventType,
     ...config,
   });
-
+  const initializeMouseAndTouchMove = useCallback(
+    () => setMove({ clientX: 0, clientY: 0 }),
+    [setMove]
+  );
   return {
     moveClientX: clientX,
     moveClientY: clientY,
-    setInitMove: setStart,
+    initializeMouseAndTouchMove,
   } as const;
 };
 
@@ -81,5 +97,5 @@ const useMouseAndTouchLocation = ({
     };
   }, [ref, eventType, skipEvent]);
 
-  return { clientX, clientY, setStart: setEvent } as const;
+  return { clientX, clientY, setEvent } as const;
 };

lib/tableHelper.ts

@@ -2,97 +2,92 @@ const PADDING_X = 40;
 const COLUMN_COUNT = 7;
 const END_TIME = 24;
 const START_TIME = 8;
-const initialSelectedArea = { x: 0, y: 0, w: 0, h: 0 };
+const initialArea = { x: 0, y: 0, w: 0, h: 0 };
 
 export const generateSelectedArea = (
   hasNotStartMove: boolean,
-  moveClientY: number,
+  currentClientY: number,
   startClientY: number,
-  initialTableArea: { x: number; y: number; w: number; h: number },
-  startClientX: number,
-  currentWidth: number
+  timetableArea: { x: number; y: number; w: number; h: number },
+  startClientX: number
 ) => {
   if (hasNotStartMove) {
-    return initialSelectedArea;
+    return initialArea;
   }
-
-  if (moveClientY <= startClientY && moveClientY !== 0) {
-    return generateSelectedAreaUpperSide(
-      initialTableArea,
+  if (currentClientY <= startClientY && currentClientY !== 0) {
+    return generateSelectedAreaWhenUserMoveUp(
+      timetableArea,
       startClientX,
-      moveClientY,
+      currentClientY,
       startClientY
     );
   }
 
-  return generateSelectedAreaBelow(
-    initialTableArea,
+  return generateSelectedAreaWhenUserMoveDown(
+    timetableArea,
     startClientY,
-    currentWidth,
-    moveClientY,
-    getCurrentX(initialTableArea.w, startClientX)
+    currentClientY,
+    startClientX
   );
 };
 
-const generateSelectedAreaUpperSide = (
-  initialTableArea: { x: number; y: number; w: number; h: number },
+const generateSelectedAreaWhenUserMoveUp = (
+  timetableArea: { x: number; y: number; w: number; h: number },
   startClientX: number,
-  moveClientY: number,
+  currentClientY: number,
   startClientY: number
 ) => {
-  const currentY =
-    moveClientY >= initialTableArea.y ? moveClientY : initialTableArea.y;
-  const currentH = startClientY - currentY;
+  const selectedAreaY =
+    currentClientY >= timetableArea.y ? currentClientY : timetableArea.y;
+  const selectedAreaHeight = startClientY - selectedAreaY;
   return {
-    x: getCurrentX(initialTableArea.w, startClientX),
-    y: currentY,
-    w: getCurrentColumnWidth(initialTableArea.w),
-    h: currentH,
+    x: getSelectedAreaX(timetableArea.w, startClientX),
+    y: selectedAreaY,
+    w: getSelectedAreaWidth(timetableArea.w),
+    h: selectedAreaHeight,
   };
 };
 
-const generateSelectedAreaBelow = (
-  initialTableArea: { x: number; y: number; w: number; h: number },
+const generateSelectedAreaWhenUserMoveDown = (
+  timetableArea: { x: number; y: number; w: number; h: number },
   startClientY: number,
-  currentWidth: number,
-  moveClientY: number,
-  currentX: number
+  currentClientY: number,
+  startClientX: number
 ) => {
-  const startHeight =
-    (initialTableArea.h - (END_TIME - START_TIME - 1)) /
+  const minHeight =
+    (timetableArea.h - (END_TIME - START_TIME - 1)) /
     (END_TIME - START_TIME) /
     3;
 
-  const currentY = startClientY;
-  const currentW = currentWidth;
-  const currentH =
-    moveClientY >= initialTableArea.y + initialTableArea.h
-      ? initialTableArea.y + initialTableArea.h - currentY
-      : moveClientY - startClientY;
+  const selectedAreaY = startClientY;
+  const selectedAreaHeight =
+    currentClientY >= timetableArea.y + timetableArea.h
+      ? timetableArea.y + timetableArea.h - selectedAreaY
+      : currentClientY - startClientY;
 
   return {
-    x: currentX,
-    y: currentY,
-    w: currentW,
-    h: Math.max(currentH, startHeight),
+    x: getSelectedAreaX(timetableArea.w, startClientX),
+    y: selectedAreaY,
+    w: getSelectedAreaWidth(timetableArea.w),
+    h: Math.max(selectedAreaHeight, minHeight),
   };
 };
 
-const getCurrentX = (area: number, startClientX: number) => {
+const getSelectedAreaX = (area: number, startClientX: number) => {
   const widthWidthGap = area / COLUMN_COUNT;
-  const tableIndex = getTableIndex(widthWidthGap, startClientX);
-  return getXOfTable(1, getCurrentColumnWidth(area), tableIndex);
+  return getXOfTable(
+    1,
+    getSelectedAreaWidth(area),
+    getColumnIndexAtTimetable(widthWidthGap, startClientX)
+  );
 };
 
-
-export const getTableIndex = (width: number, clientX: number) => {
+export const getColumnIndexAtTimetable = (width: number, clientX: number) => {
   return Math.floor((clientX - PADDING_X) / width);
 };
 
-
 export const getXOfTable = (gap: number, width: number, index: number) => {
   return PADDING_X + index * (gap + width);
 };
 
-
-const getCurrentColumnWidth = (totalWidth: number) => (totalWidth - 1 * 6) / 7;
+const getSelectedAreaWidth = (totalWidth: number) => (totalWidth - 1 * 6) / 7;