Fix #16: disable submit button when form is not valid

Nargonath · Apr 8, 2018 · df66c2c · df66c2c
1 parent 7eda13e
commit df66c2c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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>
     );
   }