From 1a3c82b2a59ccb7bebbbdb26d77ab681974fbc20 Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Fri, 19 Jun 2020 07:27:04 -0700
Subject: [PATCH] Indicate errored views in control view

---
 src/web/control.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/web/control.js b/src/web/control.js
index 1217ae3..2041b40 100644
--- a/src/web/control.js
+++ b/src/web/control.js
@@ -114,12 +114,13 @@ function App({ wsEndpoint }) {
             <StyledGridLine>
               {range(0, 3).map((x) => {
                 const idx = 3 * y + x
-                const { streamId, isListening } = stateIdxMap.get(idx)
+                const { streamId, isListening, state } = stateIdxMap.get(idx)
                 return (
                   <GridInput
                     idx={idx}
                     onChangeSpace={handleSetView}
                     spaceValue={streamId}
+                    isError={state === 'error'}
                     isListening={isListening}
                     onSetListening={handleSetListening}
                   />
@@ -153,6 +154,7 @@ function GridInput({
   idx,
   onChangeSpace,
   spaceValue,
+  isError,
   isListening,
   onSetListening,
 }) {
@@ -188,6 +190,7 @@ function GridInput({
       <StyledGridInput
         name={idx}
         value={editingValue || spaceValue || ''}
+        isError={isError}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onClick={handleClick}
@@ -246,7 +249,7 @@ const StyledGridInput = styled.input`
   width: 150px;
   height: 50px;
   padding: 20px;
-  border: 2px solid black;
+  border: 2px solid ${({ isError }) => (isError ? 'red' : 'black')};
   font-size: 20px;
   text-align: center;