Added poll options component and persisting values across route changes

app/components/Voting.js

@@ -23,6 +23,7 @@ import OtherPolls from './flow/OtherPolls';
 import PollCreationCredits from './flow/create/PollCreationCredits';
 import PollTitle from './flow/create/PollTitle';
 import PollDescription from './flow/create/PollDescription';
+import PollOptions from './flow/create/PollOptions';
 
 
 
@@ -97,8 +98,9 @@ class Voting extends PureComponent {
                 <Route path="/addPoll" render={() => <AddPoll togglePoll={togglePoll} getPolls={getPolls} />} />
 
                 <Route path="/poll/create" render={() => <PollCreationCredits poll={this.state.pollCr} resetPoll={this.resetPoll} />} />
-                <Route path="/poll/title" render={() => <PollTitle assignToPoll={this.assignToPoll}  />} />
+                <Route path="/poll/title" render={() => <PollTitle assignToPoll={this.assignToPoll} poll={this.state.pollCr} />} />
                 <Route path="/poll/description" render={() => <PollDescription assignToPoll={this.assignToPoll} poll={this.state.pollCr} />} />
+                <Route path="/poll/options" render={() => <PollOptions assignToPoll={this.assignToPoll} poll={this.state.pollCr} />} />
 
               </Switch>
             </div>

app/components/flow/create/PollDescription.js

@@ -13,9 +13,16 @@ class PollDescription extends Component {
         error: ''
     }
 
+    componentDidMount(){
+        if(this.props.poll.description !== undefined){
+            this.setState({description: this.props.poll.description});
+        }
+    }
+
     handleChange = (event) => {
         this.setState({error: ''});
         if(event.target.value.length <= 500){
+            this.props.assignToPoll({description: event.target.value});
             this.setState({description: event.target.value});
         }
     }
@@ -42,6 +49,7 @@ class PollDescription extends Component {
                 multiline
                 error={this.state.error != ''}
                 fullWidth
+                autoFocus
                 className="inputTxt"
                 margin="normal"
                 InputLabelProps={{
@@ -54,7 +62,7 @@ class PollDescription extends Component {
             <small>{this.state.description.length} of 500</small>
         </div>
         <div className="buttonNav">
-            <Button onClick={this.continue}>Next</Button>
+            <Button onClick={this.continue} disabled={this.state.description.trim().length == 0}>Next</Button>
         </div>
         </Fragment>;
     }

app/components/flow/create/PollOptions.js

@@ -0,0 +1,51 @@
+import React, {Component, Fragment} from 'react';
+import { withRouter } from 'react-router-dom'
+import Typography from '@material-ui/core/Typography'
+import TextField from '@material-ui/core/TextField';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+import Button from '@material-ui/core/Button';
+
+
+class PollOptions extends Component {
+
+    state = {
+        error: ''
+    }
+
+    handleChange = (event) => {
+        this.setState({error: ''});
+        if(event.target.value.length <= 70){
+            this.setState({title: event.target.value});
+        }
+    }
+
+    continue = () => {
+        const {title} = this.state;
+        const {history} = this.props;
+
+        if(title.trim() != ''){
+            this.props.assignToPoll({title});
+            history.push('/poll/description');
+        } else {
+            this.setState({error: "Required"})
+        }
+    }
+
+    render() {
+        return <Fragment>
+        <div className="section pollCreation">
+            <Typography variant="headline">Create a Poll</Typography>
+            <Typography variant="body1">Add options to the poll</Typography>
+
+            <Button>Add option</Button>
+
+        </div>
+        <div className="buttonNav">
+            <Button onClick={this.continue}>Next</Button>
+        </div>
+        </Fragment>;
+    }
+}
+
+export default withRouter(PollOptions);

app/components/flow/create/PollTitle.js

@@ -14,9 +14,16 @@ class PollTitle extends Component {
         error: ''
     }
 
+    componentDidMount(){
+        if(this.props.poll.title !== undefined){
+            this.setState({title: this.props.poll.title});
+        }
+    }
+
     handleChange = (event) => {
         this.setState({error: ''});
         if(event.target.value.length <= 70){
+            this.props.assignToPoll({title: event.target.value});
             this.setState({title: event.target.value});
         }
     }
@@ -40,6 +47,7 @@ class PollTitle extends Component {
             <TextField
                 label="Poll name"
                 multiline
+                autoFocus
                 error={this.state.error != ''}
                 className="inputTxt"
                 placeholder="E.g. What is the best ice cream flavor?"
@@ -56,7 +64,7 @@ class PollTitle extends Component {
             <small>{this.state.title.length} of 70</small>
         </div>
         <div className="buttonNav">
-            <Button onClick={this.continue}>Next</Button>
+            <Button onClick={this.continue} disabled={this.state.title.trim().length == 0}>Next</Button>
         </div>
         </Fragment>;
     }