From c76cfc3bfe892d4264f14fb6c27e3f98c7241a62 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Fri, 2 Oct 2020 12:24:52 +0300
Subject: [PATCH] Move bar color logic inside Bar

---
 src/components/Bar.tsx         | 14 ++++++++++++--
 src/components/WorkoutPlot.tsx | 13 ++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
index 92091c0..324868d 100644
--- a/src/components/Bar.tsx
+++ b/src/components/Bar.tsx
@@ -1,18 +1,28 @@
 import styled from "styled-components";
+import { ZoneIndex } from "make-workout";
 
 export type BarProps = {
   width: string;
   height: string;
-  background: string;
+  zone: ZoneIndex;
 };
 
+const zoneColorsMap: Record<ZoneIndex, string> = {
+  0: "#7f7f7f",
+  1: "#338cff",
+  2: "#59bf59",
+  3: "#ffcc3f",
+  4: "#ff6639",
+  5: "#ff330c",
+}
+
 export const Bar = styled.div<BarProps>`
   display: inline-block;
   border-radius: 10px;
   margin-right: 0.1%;
   vertical-align: bottom;
   height: ${(props) => props.height};
-  background: ${(props) => props.background};
+  background: ${(props) => zoneColorsMap[props.zone]};
   width: ${(props) => props.width};
   transition: width 0.1s, height 0.1s, background-color 0.1s;
 `;
diff --git a/src/components/WorkoutPlot.tsx b/src/components/WorkoutPlot.tsx
index f47c73d..1bca8ec 100644
--- a/src/components/WorkoutPlot.tsx
+++ b/src/components/WorkoutPlot.tsx
@@ -1,19 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { Interval, Intensity, Duration, totalDuration, ZoneIndex, intensityToZoneIndex, maximumIntensity } from "make-workout";
+import { Interval, Intensity, Duration, totalDuration, intensityToZoneIndex, maximumIntensity } from "make-workout";
 import { BarProps, Bar } from "./Bar";
 
-const zoneColorsMap: Record<ZoneIndex, string> = {
-  0: "#7f7f7f",
-  1: "#338cff",
-  2: "#59bf59",
-  3: "#ffcc3f",
-  4: "#ff6639",
-  5: "#ff330c",
-}
-
 const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
-  background: zoneColorsMap[intensityToZoneIndex(interval.intensity)],
+  zone: intensityToZoneIndex(interval.intensity),
   width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`,
   height: `${interval.intensity.value / maxIntensity.value * 100}%`,
 });