From 2c6fe4b789d3e851db217807472cb24ccf4faac2 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Thu, 1 Oct 2020 22:46:25 +0300
Subject: [PATCH] Add WorkoutStats component

---
 src/App.tsx                     | 16 ++++++++++------
 src/components/WorkoutStats.tsx |  6 ++++++
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/components/WorkoutStats.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1ce69b4..e85c670 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { WorkoutPlot } from './components/WorkoutPlot';
-import { parse, stats } from 'make-workout';
+import { WorkoutStats } from './components/WorkoutStats';
+import { parse } from 'make-workout';
 
 const defaultWorkout = `Name: Hello
 
@@ -11,24 +12,27 @@ Rest: 10:00 75%
 
 export function App() {
   const [text, setText] = useState(defaultWorkout);
-  const [statsText, setStatsText] = useState(stats(parse(defaultWorkout)));
+  const [workout, setWorkout] = useState(parse(defaultWorkout));
+  const [error, setError] = useState("");
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = event.target.value;
     setText(value);
     try {
-      setStatsText(stats(parse(value)));
+      setWorkout(parse(value));
+      setError("");
     } catch (e) {
-      setStatsText(e.message);
+      setError(e.message);
     }
-  }, [setText, setStatsText]);
+  }, [setText, setWorkout, setError]);
   
   return (
     <div>
       <h1>Workout editor</h1>
       <textarea rows={10} cols={100} onChange={onChange} value={text} />
       <WorkoutPlot />
-      <pre>{statsText}</pre>
+      <div>{error}</div>
+      <WorkoutStats workout={workout} />
     </div>
   );
 }
diff --git a/src/components/WorkoutStats.tsx b/src/components/WorkoutStats.tsx
new file mode 100644
index 0000000..f8b5bfa
--- /dev/null
+++ b/src/components/WorkoutStats.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { stats, Workout } from 'make-workout';
+
+export const WorkoutStats: React.FC<{workout: Workout}> = ({ workout }) => (
+  <pre>{stats(workout)}</pre>
+);