From f990531199e0621cf0790dc15474593aa11c67c7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 28 Mar 2024 09:33:58 -0500
Subject: [PATCH] put segment height in hook

---
 web/src/components/timeline/ReviewTimeline.tsx |  9 +++------
 web/src/hooks/use-draggable-element.ts         | 10 ++++------
 web/src/hooks/use-timeline-utils.ts            |  5 +++--
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index b69bf5b5d..49568c82e 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/web/src/components/timeline/ReviewTimeline.tsx
@@ -69,18 +69,15 @@ export function ReviewTimeline({
   );
   const exportSectionRef = useRef<HTMLDivElement>(null);
 
-  const segmentHeight = 8;
-
   const [draggableElementType, setDraggableElementType] =
     useState<DraggableElement>();
 
-  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    {
+  const { alignStartDateToTimeline, alignEndDateToTimeline, segmentHeight } =
+    useTimelineUtils({
       segmentDuration,
       timelineDuration,
       timelineRef,
-    },
-  );
+    });
 
   const paddedExportStartTime = useMemo(() => {
     if (exportStartTime) {
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index 065978399..15b8773b2 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@@ -46,20 +46,18 @@ function useDraggableElement({
   setDraggableElementPosition,
   dense,
 }: DraggableElementProps) {
-  const segmentHeight = 8;
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
   const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
   const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
   const [fullTimelineHeight, setFullTimelineHeight] = useState<number>();
   const [segments, setSegments] = useState<HTMLDivElement[]>([]);
-  const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
-    {
+  const { alignStartDateToTimeline, getCumulativeScrollTop, segmentHeight } =
+    useTimelineUtils({
       segmentDuration: segmentDuration,
       timelineDuration: timelineDuration,
       timelineRef,
-    },
-  );
+    });
 
   const draggingAtTopEdge = useMemo(() => {
     if (clientYPosition && timelineRef.current && scrollEdgeSize) {
@@ -147,7 +145,7 @@ function useDraggableElement({
     (time: number) => {
       return ((timelineStartAligned - time) / segmentDuration) * segmentHeight;
     },
-    [segmentDuration, timelineStartAligned],
+    [segmentDuration, timelineStartAligned, segmentHeight],
   );
 
   const updateDraggableElementPosition = useCallback(
diff --git a/web/src/hooks/use-timeline-utils.ts b/web/src/hooks/use-timeline-utils.ts
index 0bd35a39c..9445a5b49 100644
--- a/web/src/hooks/use-timeline-utils.ts
+++ b/web/src/hooks/use-timeline-utils.ts
@@ -11,6 +11,8 @@ export function useTimelineUtils({
   timelineDuration,
   timelineRef,
 }: TimelineUtilsProps) {
+  const segmentHeight = 8;
+
   const alignEndDateToTimeline = useCallback(
     (time: number): number => {
       const remainder = time % segmentDuration;
@@ -42,8 +44,6 @@ export function useTimelineUtils({
     if (timelineRef?.current && timelineDuration) {
       const { clientHeight: visibleTimelineHeight } = timelineRef.current;
 
-      const segmentHeight = 8;
-
       const visibleTime =
         (visibleTimelineHeight / segmentHeight) * segmentDuration;
 
@@ -56,5 +56,6 @@ export function useTimelineUtils({
     alignStartDateToTimeline,
     getCumulativeScrollTop,
     getVisibleTimelineDuration,
+    segmentHeight,
   };
 }