Move question state up

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+__pycache__/
+.vs_code/

frontend/src/components/SurveyPage/Result.js

@@ -8,16 +8,19 @@ export default class Result extends Component {
    }
  }
  render() {
+   const {titles,questions,answers} = this.props.result;
    return(
      <div style={{backgroundColor: 'orange'}}>
         <h2>Good job, you're done.</h2>
         {
-          Object.keys(this.props.answers).map(
-            function(title, i){
-              return <div><span>{title}: </span><span>{this.answers[title]}</span></div>
-            },
-            {
-              answers: this.props.answers
+          questions.map(
+            function(question, i){
+              return (
+                <div key={i}>
+                  <span>{titles[i]}: </span>
+                  <span>{answers[i]}</span>
+                </div>
+              )
             }
           )
         }

frontend/src/components/SurveyPage/Survey/Question/index.js

@@ -2,26 +2,16 @@ import React, {Component} from 'react';
 import Input from './Input.js';
 
 export default class Question extends Component {
- constructor(props) {
-   super(props)
-   this.state = {
-     response: this.props.value
-   }
- }
- handleChange = (event) => {
-   this.setState({
-     response: event.target.value
-   })
- }
  render() {
    return(
      <div style={{backgroundColor: 'red'}}>
       <h2>{this.props.title}</h2>
       {this.props.text}
       <br/>
-      <input id={this.props.title} name={this.props.title} onChange={this.handleChange} value={this.state.response}/>
+      <input name={this.props.i} onChange={this.props.onChange}/>
+      {this.props.answer}
       <br/>
-      <button onClick={() => this.props.func(this.props.i, this.props.title, this.state.response)}>submit</button>
+      <button onClick={this.props.onSubmit}>submit</button>
      </div>
    )
  }

frontend/src/components/SurveyPage/Survey/index.js

@@ -8,15 +8,9 @@ export default class Survey extends Component {
    super(props)
    this.state = {
      answered: [0, 0, 0],
-     answers: {},
-     questions: [
-       {title: "q1", text:"1"},
-       {title: "q2", text:"2"},
-       {title: "q3", text:"3"}
-       // <Question title = "q1" text="1" i={0} func={this.answerQuestion}/>,
-       // <Question title = "q2" text="2" i={1} func={this.answerQuestion}/>,
-       // <Question title = "q3" text="3" i={2} func={this.answerQuestion}/>
-     ],
+     answers: [],
+     titles : ['q1','q2','q3'],
+     questions: ['1','2','3'],
      i: 0
    }
  }
@@ -25,25 +19,51 @@ export default class Survey extends Component {
      i: x
    });
  }
- answerQuestion = (i, title, answer) => {
-   var ansrd = this.state.answered;
+
+ onChange = (event) => {
+   let answers = [...this.state.answers]
+   answers[event.target.name] = event.target.value
+   this.setState({answers})
+ }
+
+ answerQuestion = (i, answer) => {
+   let ansrd = [...this.state.answered];
    ansrd[i] = 1;
-   var ansrs = this.state.answers;
-   ansrs[title] = answer;
+   var ansrs = [...this.state.answers];
+   ansrs[i] = answer;
    this.setState({
      answered: ansrd,
      answers: ansrs
    })
  }
  render() {
+   const {i,questions,titles,answered,answers} = this.state;
    return(
      <div style={{backgroundColor: 'blue'}}>
         <h2>Survey</h2>
-        <ProgBar ans={this.state.answered} i={this.state.i} func={this.changeQuestion}/>
-        <Question key={this.state.i} title = {this.state.questions[this.state.i]['title']} text={this.state.questions[this.state.i]['text']} i={this.state.i} func={this.answerQuestion} value=""/>
-        {this.state.i != 0 && <button onClick={() => this.changeQuestion(this.state.i-1)}>back</button>}
-        {this.state.i != this.state.questions.length-1 && <button onClick={() => this.changeQuestion(this.state.i+1)}>next</button>}
-        {this.state.i == this.state.questions.length-1 && <button onClick={() => this.props.submit(this.state.answers)}>submit</button>}
+        <ProgBar ans={answered} i={i} func={this.changeQuestion}/>
+        <Question 
+          title = {titles[i]} 
+          text={questions[i]} 
+          key={i} 
+          onSubmit={this.answerQuestion}
+          onChange={this.onChange}
+        />
+        {i != 0 && 
+          <button onClick={() => this.changeQuestion(i-1)}>
+            back
+          </button>
+        }
+        {i != questions.length-1 && 
+          <button onClick={() => this.changeQuestion(i+1)}>
+            next
+          </button>
+        }
+        {i == questions.length-1 && 
+          <button onClick={() => this.props.submit({titles,questions,answers})}>
+          submit
+          </button>
+        }
      </div>
    )
  }

frontend/src/components/SurveyPage/index.js

@@ -10,7 +10,7 @@ export default class SurveyPage extends Component {
      showIntro: true,
      showSurvey: false,
      showResult: false,
-     answers: {}
+     result: {}
    }
  }
  startSurvey = () => {
@@ -19,19 +19,19 @@ export default class SurveyPage extends Component {
      showSurvey: true
    })
  }
- endSurvey = (ans) => {
+ endSurvey = (result) => {
    this.setState({
      showResult: true,
      showSurvey: false,
-     answers: ans
+     result
    })
  }
  reset = () => {
    this.setState({
      showIntro: true,
      showResult: false,
      showSurvey: false,
-     answers: {}
+     result: {}
    })
  }
  render() {
@@ -40,7 +40,7 @@ export default class SurveyPage extends Component {
         <h2>Survey Page</h2>
         {this.state.showIntro && <Intro func={this.startSurvey}/>}
         {this.state.showSurvey && <Survey submit={this.endSurvey}/>}
-        {this.state.showResult && <Result answers={this.state.answers} reset={this.reset}/>}
+        {this.state.showResult && <Result result={this.state.result} reset={this.reset}/>}
      </div>
    )
  }