resizable answers table

src/components/AnswerKeyForm/index.js

@@ -8,9 +8,11 @@ class AnswerKeyForm extends React.Component {
 
     this.state = {
       courseName: '',
-      answers: Array(props.numberOfTests * props.numberOfQuestionsPerTest).fill(
-        null
-      ),
+      numTests: 10,
+      numQuestionsPerTest: 10,
+      answers: Array(
+        props.defaultNumTests * props.defaultNumQuestionsPerTest
+      ).fill(null),
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
@@ -18,6 +20,17 @@ class AnswerKeyForm extends React.Component {
     console.log(this.state.answers);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    // resize the answers array (and clear it) if
+    // the size parameters were changed
+    if (
+      this.state.numTests !== prevState.numTests ||
+      this.state.numQuestionsPerTest !== prevState.numQuestionsPerTest
+    ) {
+      this.updateAnswersSize();
+    }
+  }
+
   handleAnswerChange(target, answerIndex) {
     const answers = this.state.answers.slice();
     answers[answerIndex] = target.value;
@@ -29,27 +42,47 @@ class AnswerKeyForm extends React.Component {
     console.log(answers);
   }
 
+  updateAnswersSize() {
+    const newSize = this.state.numTests * this.state.numQuestionsPerTest;
+    const resizedAnswers = Array(newSize).fill(null);
+    const prevAnswers = this.state.answers.slice();
+
+    for (
+      let i = 0;
+      i < Math.min(resizedAnswers.length, prevAnswers.length);
+      i++
+    ) {
+      resizedAnswers[i] = prevAnswers[i];
+    }
+
+    this.setState({
+      answers: resizedAnswers,
+    });
+  }
+
   handleInputChange(event) {
     const target = event.target;
-    const value = target.value;
+    const value =
+      target.type === 'number' ? Number(target.value) : target.value;
     const name = target.name;
 
     this.setState({
       [name]: value,
     });
-
-    console.log(this.state);
   }
 
   render() {
-    const testRows = [...Array(this.props.numberOfTests).keys()].map(
+    const testRows = [...Array(this.state.numTests).keys()].map(
       (test, index) => (
         <QuestionsRow
           key={index}
           testNum={test + 1}
-          numQuestions={this.props.numberOfQuestionsPerTest}
+          numQuestions={this.state.numQuestionsPerTest}
           onChange={(target, question) =>
-            this.handleAnswerChange(target, (test + 1) * question)
+            this.handleAnswerChange(
+              target,
+              test * this.state.numQuestionsPerTest + question
+            )
           }
         />
       )
@@ -67,17 +100,38 @@ class AnswerKeyForm extends React.Component {
             onChange={this.handleInputChange}
           />
 
+          <div className="row">
+            <div className="six columns">
+              <label>Num. tests</label>
+              <input
+                type="number"
+                name="numTests"
+                value={this.state.numTests}
+                onChange={this.handleInputChange}
+              />
+            </div>
+            <div className="six columns">
+              <label>Num. questions per tests</label>
+              <input
+                type="number"
+                name="numQuestionsPerTest"
+                value={this.state.numQuestionsPerTest}
+                onChange={this.handleInputChange}
+              />
+            </div>
+          </div>
+
           <table className="u-full-width answerkeyform__table">
             <thead>
               <tr>
-                <th colSpan={this.props.numberOfQuestionsPerTest + 1}>
+                <th colSpan={this.state.numQuestionsPerTest + 1}>
                   Test answers
                 </th>
               </tr>
             </thead>
             <tbody>{testRows}</tbody>
           </table>
-          <input class="button-primary" type="submit" value="Save" />
+          <input className="button-primary" type="submit" value="Save" />
         </form>
       </div>
     );

src/components/App.js

@@ -8,7 +8,7 @@ class App extends Component {
       <div className="App">
         <NavBar />
         <div className="container">
-          <AnswerKeyForm numberOfTests={10} numberOfQuestionsPerTest={10} />
+          <AnswerKeyForm defaultNumTests={10} defaultNumQuestionsPerTest={10} />
         </div>
       </div>
     );