From b06ae138f7ac1e37d82f3f1b8bf5bbe3bf5c45bd Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Wed, 16 Feb 2022 21:32:37 -0600
Subject: [PATCH] refactor: TimelineBlockView

---
 .../components/Timeline/TimelineBlockView.tsx | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/web/src/components/Timeline/TimelineBlockView.tsx b/web/src/components/Timeline/TimelineBlockView.tsx
index 18d5d6233..e3a9a7a40 100644
--- a/web/src/components/Timeline/TimelineBlockView.tsx
+++ b/web/src/components/Timeline/TimelineBlockView.tsx
@@ -1,5 +1,7 @@
 import { h } from 'preact';
-import { TimelineEventBlock } from './Timeline';
+import { useCallback } from 'preact/hooks';
+import { getColorFromTimelineEvent } from '../../utils/Timeline/timelineEventUtils';
+import { TimelineEventBlock } from './TimelineEventBlock';
 
 interface TimelineBlockViewProps {
   block: TimelineEventBlock;
@@ -7,24 +9,12 @@ interface TimelineBlockViewProps {
 }
 
 export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => {
-  const onClickHandler = () => onClick(block);
-
-  const getColor = (eventBlock: TimelineEventBlock) => {
-    if (eventBlock.label === 'car') {
-      return 'red';
-    } else if (eventBlock.label === 'person') {
-      return 'blue';
-    } else if (eventBlock.label === 'dog') {
-      return 'green';
-    }
-    return 'gray';
-  };
-
+  const onClickHandler = useCallback(() => onClick(block), [block]);
   return (
     <div
       key={block.id}
       onClick={onClickHandler}
-      className={`absolute z-10 rounded-full bg-${getColor(block)}-400 h-2`}
+      className={`absolute z-10 rounded-full bg-${getColorFromTimelineEvent(block)}-400 h-2`}
       style={{
         top: `${block.yOffset}px`,
         left: `${block.positionX}px`,