From c15cbbf5ae020ea431000a845458ab69aa71a0de Mon Sep 17 00:00:00 2001
From: Ben Ramey <ben.ramey@gmail.com>
Date: Fri, 14 Sep 2018 07:23:20 -0500
Subject: [PATCH] Progress on answer key form

---
 src/components/AnswerKeyForm/QuestionsRow.js | 20 ++++++
 src/components/AnswerKeyForm/index.css       | 11 +++
 src/components/AnswerKeyForm/index.js        | 72 +++++++++++++++++++-
 src/components/App.js                        |  6 +-
 src/components/{Header => NavBar}/index.css  |  0
 src/components/{Header => NavBar}/index.js   |  0
 6 files changed, 104 insertions(+), 5 deletions(-)
 create mode 100644 src/components/AnswerKeyForm/QuestionsRow.js
 rename src/components/{Header => NavBar}/index.css (100%)
 rename src/components/{Header => NavBar}/index.js (100%)

diff --git a/src/components/AnswerKeyForm/QuestionsRow.js b/src/components/AnswerKeyForm/QuestionsRow.js
new file mode 100644
index 0000000..9bef18f
--- /dev/null
+++ b/src/components/AnswerKeyForm/QuestionsRow.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function(props) {
+  const cells = [...Array(props.numQuestions).keys()].map((question, index) => (
+    <td key={index}>
+      <input
+        name={'answer_' + props.testNum + ',' + question}
+        type="text"
+        onChange={props.handleInputChange}
+      />
+    </td>
+  ));
+
+  return (
+    <tr className="answerkeyform__table__questionrow">
+      <th>{props.testNum}</th>
+      {cells}
+    </tr>
+  );
+}
diff --git a/src/components/AnswerKeyForm/index.css b/src/components/AnswerKeyForm/index.css
index e69de29..d5d6121 100644
--- a/src/components/AnswerKeyForm/index.css
+++ b/src/components/AnswerKeyForm/index.css
@@ -0,0 +1,11 @@
+.answerkeyform {
+}
+
+.answerkeyform__table input {
+  width: 4rem;
+  margin: 0;
+}
+
+.answerkeyform__table__questionrow td {
+  padding: 1rem;
+}
diff --git a/src/components/AnswerKeyForm/index.js b/src/components/AnswerKeyForm/index.js
index a7f98c8..06bce7a 100644
--- a/src/components/AnswerKeyForm/index.js
+++ b/src/components/AnswerKeyForm/index.js
@@ -1,11 +1,79 @@
-import React, {Component} from 'react';
+import React from 'react';
 import './index.css';
+import QuestionsRow from './QuestionsRow';
+
+class AnswerKeyForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      courseName: '',
+      answers: Array(props.numberOfTests).fill(
+        Array(props.numberOfQuestionsPerTest)
+      ),
+    };
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    console.log(this.state.answers);
+  }
+
+  handleAnswerChange(test, question) {
+    const answers = this.state.answers.slice();
+    const testAnswers = answers[test];
+    testAnswers[question] = value;
+
+    this.setState({
+      answers: answers,
+    });
+  }
+
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value,
+    });
+
+    console.log(this.state);
+  }
 
-class AnswerKeyForm extends Component {
   render() {
+    const testRows = [...Array(this.props.numberOfTests).keys()].map(
+      (test, index) => (
+        <QuestionsRow
+          key={index}
+          testNum={test + 1}
+          numQuestions={this.props.numberOfQuestionsPerTest}
+          handleInputChange={() => this.handleAnswerChange(testNum)}
+        />
+      )
+    );
+
     return (
       <div className="answerkeyform">
         <h1>New Answer Key</h1>
+        <form>
+          <label>Course name</label>
+          <input
+            type="text"
+            name="courseName"
+            value={this.state.courseName}
+            onChange={this.handleInputChange}
+          />
+
+          <table className="u-full-width answerkeyform__table">
+            <thead>
+              <tr>
+                <th colSpan={this.props.numberOfQuestionsPerTest + 1}>
+                  Test answers
+                </th>
+              </tr>
+            </thead>
+            <tbody>{testRows}</tbody>
+          </table>
+        </form>
       </div>
     );
   }
diff --git a/src/components/App.js b/src/components/App.js
index 0ae4100..42dc730 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import Header from './Header';
+import NavBar from './NavBar';
 import AnswerKeyForm from './AnswerKeyForm';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <Header />
+        <NavBar />
         <div className="container">
-          <AnswerKeyForm />
+          <AnswerKeyForm numberOfTests={10} numberOfQuestionsPerTest={10} />
         </div>
       </div>
     );
diff --git a/src/components/Header/index.css b/src/components/NavBar/index.css
similarity index 100%
rename from src/components/Header/index.css
rename to src/components/NavBar/index.css
diff --git a/src/components/Header/index.js b/src/components/NavBar/index.js
similarity index 100%
rename from src/components/Header/index.js
rename to src/components/NavBar/index.js