From 739bb2d7bf93b6ce9c50482c404c155b09cf7ad1 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Thu, 1 Oct 2020 22:51:01 +0300
Subject: [PATCH] Nicer error message

---
 src/App.tsx                     |  7 ++++---
 src/components/ErrorMessage.tsx | 10 ++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ErrorMessage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e85c670..12d94db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import { WorkoutPlot } from './components/WorkoutPlot';
 import { WorkoutStats } from './components/WorkoutStats';
 import { parse } from 'make-workout';
+import { ErrorMessage } from './components/ErrorMessage';
 
 const defaultWorkout = `Name: Hello
 
@@ -13,14 +14,14 @@ Rest: 10:00 75%
 export function App() {
   const [text, setText] = useState(defaultWorkout);
   const [workout, setWorkout] = useState(parse(defaultWorkout));
-  const [error, setError] = useState("");
+  const [error, setError] = useState<string | undefined>(undefined);
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = event.target.value;
     setText(value);
     try {
       setWorkout(parse(value));
-      setError("");
+      setError(undefined);
     } catch (e) {
       setError(e.message);
     }
@@ -31,7 +32,7 @@ export function App() {
       <h1>Workout editor</h1>
       <textarea rows={10} cols={100} onChange={onChange} value={text} />
       <WorkoutPlot />
-      <div>{error}</div>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
       <WorkoutStats workout={workout} />
     </div>
   );
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000..00e9f1f
--- /dev/null
+++ b/src/components/ErrorMessage.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const ErrorMessage = styled.p`
+  color: red;
+  background: #fee;
+  border-radius: 10px;
+  border: 2px solid red;
+  padding: 5px;
+  margin: 10px 0;
+`;
\ No newline at end of file