From df66c2c7bb3d58c4df01bccaae01f883d2f108bd Mon Sep 17 00:00:00 2001
From: Jonas Pauthier <jonas.pauthier@gmail.com>
Date: Sun, 8 Apr 2018 22:57:51 +0200
Subject: [PATCH] Fix #16: disable submit button when form is not valid

---
 src/components/TimerForm/Submit.js | 4 ++--
 src/components/TimerForm/index.js  | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/TimerForm/Submit.js b/src/components/TimerForm/Submit.js
index 4838b87..6ab1b7f 100644
--- a/src/components/TimerForm/Submit.js
+++ b/src/components/TimerForm/Submit.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { primaryColor, media } from 'styles';
 
 export default styled.input`
-  background-color: ${primaryColor};
+  background-color: ${props => (props.disabled ? '#eaccd9' : primaryColor)};
   color: white;
   border: 0;
   font-weight: 700;
@@ -12,7 +12,7 @@ export default styled.input`
   margin: auto;
   width: 80%;
   font-size: 1.5em;
-  cursor: pointer;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
 
   ${media.tablet`
       margin: 40px auto;
diff --git a/src/components/TimerForm/index.js b/src/components/TimerForm/index.js
index 9db0b35..eab3bfa 100644
--- a/src/components/TimerForm/index.js
+++ b/src/components/TimerForm/index.js
@@ -18,13 +18,18 @@ class TimerForm extends Component {
   handleSubmit = event => {
     event.preventDefault();
 
-    if (this.state.name === '' || this.state.duration === '00:00') {
+    if (!this.isValid()) {
       return;
     }
 
     this.props.onValidate(this.state);
   };
 
+  isValid = () => {
+    const { name, duration } = this.state;
+    return name && duration && duration !== '00:00';
+  };
+
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
@@ -38,7 +43,7 @@ class TimerForm extends Component {
 
         <Input type="time" name="duration" value={this.state.duration} onChange={this.handleChange} />
 
-        <Submit type="submit" value="Start" />
+        <Submit type="submit" value="Start" disabled={!this.isValid()} />
       </form>
     );
   }