Develop

package.json

@@ -20,7 +20,9 @@
 		"husky": "^0.14.3",
 		"json-server": "^0.12.1",
 		"lint-staged": "^5.0.0",
-		"prettier": "^1.8.2"
+		"prettier": "^1.8.2",
+		"react-redux": "^5.0.6",
+		"redux": "^3.7.2"
 	},
 	"scripts": {
 		"jsonserver": "json-server json-server/db.json --watch --port 3005",

src/app/Routes.js

@@ -9,6 +9,9 @@ import RecruitmentDashboard from './RecruitmentDashboard';
 import TakeTest from './TakeTest';
 import TrainingPaths from './TrainingPaths';
 
+import StartTest from './TakeTest/startTest';
+import ShowQuestions from './TakeTest/showQuestions';
+
 const Routes = () =>
   <div>
     <Route path={'/candidates'} component={Candidates} />
@@ -18,6 +21,8 @@ const Routes = () =>
     <Route path={'/recruitment-dashboard'} component={RecruitmentDashboard} />
     <Route path={'/training-paths'} component={TrainingPaths} />
     <Route path={'/take-test'} component={TakeTest} />
+    <Route path={'/startTest'} component={StartTest} />
+    <Route path={'/showQuestions'} component={ShowQuestions} />
     <Route path={'/'} exact component={App} />
   </div>;
 

src/app/TakeTest/Database/data.json

@@ -0,0 +1,64 @@
+{
+  "testTypes": {
+    "Java-Junior": {
+      "questions": [
+        {
+          "question": "jjQuestion0",
+          "answer": "jjAnswer0"
+        },
+        {
+          "question": "jjQuestion1",
+          "answer": "jjAnswer1"
+        },
+        {
+          "question": "jjQuestion2",
+          "answer": "jjAnswer2"
+        },
+        {
+          "question": "jjQuestion3",
+          "answer": "jjAnswer3"
+        }
+      ]
+    },
+    "Java-Medior": {
+      "questions": [
+        {
+          "question": "jmQuestion0",
+          "answer": "jmAnswer0"
+        },
+        {
+          "question": "jmQuestion1",
+          "answer": "jmAnswer1"
+        },
+        {
+          "question": "jmQuestion2",
+          "answer": "jmAnswer2"
+        },
+        {
+          "question": "jmQuestion3",
+          "answer": "jmAnswer3"
+        }
+      ]
+    },
+    "Java-Senior": {
+      "questions": [
+        {
+          "question": "jsQuestion0",
+          "answer": "jsAnswer0"
+        },
+        {
+          "question": "jsQuestion1",
+          "answer": "jsAnswer1"
+        },
+        {
+          "question": "jsQuestion2",
+          "answer": "jsAnswer2"
+        },
+        {
+          "question": "jsQuestion3",
+          "answer": "jsAnswer3"
+        }
+      ]
+    }
+  }
+}

src/app/TakeTest/actions.js

@@ -0,0 +1,10 @@
+export const FETCH_QUESTIONS = 'FETCH_QUESTIONS';
+export const UPDATE_CANDIDATE_NAME = 'UPDATE_CANDIDATE_NAME';
+
+export function fetchQuestions(data) {
+  return { type: FETCH_QUESTIONS, data };
+}
+
+export function updateCandidateName(candidateName) {
+  return { type: UPDATE_CANDIDATE_NAME, candidateName };
+}

src/app/TakeTest/createANewTest.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './style.css';
+
+class CreateANewTest extends React.Component {
+  state = {
+    candidateName: '',
+    testTypes: [],
+    selectedTestType: ''
+  };
+
+  updateSelectedTestType = e => {
+    this.setState({ selectedTestType: e.target.value });
+  };
+
+  updateCandidateName = e => {
+    this.setState({ candidateName: e.target.value });
+  };
+
+  getQuestionsByTestType = () => {
+    const selectedType = this.state.selectedTestType;
+    return selectedType ? this.props.questions[selectedType].questions : null;
+  };
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ testTypes: Object.keys(nextProps.questions) });
+    this.setState({ selectedTestType: Object.keys(nextProps.questions)[0] });
+  }
+
+  setTestTypeOptions = () => {
+    const testTypes = this.state.testTypes;
+    const options = [];
+    for (var i = 0; i < testTypes.length; i++) {
+      options.push(
+        <option value={testTypes[i]} key={testTypes[i]}>
+          {testTypes[i]}
+        </option>
+      );
+    }
+    return options;
+  };
+
+  render() {
+    return (
+      <div className="container-fluid col-md-12">
+        <div className="row">
+          <div className="col-md-8 col-offset-2">
+            <label>Write A candidate Name:</label>
+            <input
+              type="text"
+              placeholder="Candidate Name"
+              value={this.state.candidateName}
+              onChange={this.updateCandidateName}
+            />
+          </div>
+          <div className=" row col-md-8 col-offset-2">
+            <label>Select candidate skill test level: </label>
+            <select onChange={this.updateSelectedTestType}>
+              {this.setTestTypeOptions()}
+            </select>
+          </div>
+        </div>
+        <button>
+          <Link
+            to={{
+              pathname: '/startTest',
+              candidateName: this.state.candidateName,
+              testType: this.state.selectedTestType,
+              questions: this.getQuestionsByTestType()
+            }}
+          >
+            Create a New Test
+          </Link>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default CreateANewTest;

src/app/TakeTest/header.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class Header extends React.Component {
+  render() {
+    return (
+      <div>
+        CandidateName: {this.props.candidateName}
+        <br />
+        TestType: {this.props.testType}
+        <br />
+      </div>
+    );
+  }
+}
+
+export default Header;

src/app/TakeTest/index.js

@@ -1,10 +1,46 @@
 import React from 'react';
+import CreateANewTest from './createANewTest';
+import { createStore } from 'redux';
+import { connect } from 'react-redux';
+import TestApp from './reducers';
+import { fetchQuestions } from './actions';
 
-const Mock = ({ match }) =>
-  <div>
-    <p>
-      {match.url}
-    </p>
-  </div>;
+const defaultState = {
+  questions: []
+};
+const store = createStore(TestApp, defaultState);
 
-export default Mock;
+class TakeTestHome extends React.Component {
+  state = {
+    questions: []
+  };
+
+  componentWillMount() {
+    fetch('http://localhost:3000/testTypes')
+      .then(response => {
+        return response.json();
+      })
+      .then(data => {
+        store.dispatch(fetchQuestions(data));
+      })
+      .catch(e => {
+        console.log(e);
+      });
+
+    store.subscribe(() => {
+      this.setState({
+        questions: store.getState()
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div className="container-fluid col-md-12">
+        <CreateANewTest questions={this.state.questions} />
+      </div>
+    );
+  }
+}
+
+export default TakeTestHome;

src/app/TakeTest/question.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+class Question extends React.Component {
+  updateProvidedAnswer = e => {
+    this.props.useProvidedAnswer(e.target.value);
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.question}
+        <input
+          type="text"
+          value={this.props.answer}
+          onChange={this.updateProvidedAnswer}
+        />
+      </div>
+    );
+  }
+}
+
+export default Question;

src/app/TakeTest/reducers.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FETCH_QUESTIONS, UPDATE_CANDIDATE_NAME } from './actions';
+
+export default function TestApp(state = [], action) {
+  switch (action.type) {
+    case FETCH_QUESTIONS:
+      return action.data;
+    case UPDATE_CANDIDATE_NAME:
+      return action.candidateName;
+    default:
+      return state;
+  }
+}

src/app/TakeTest/reviewQuestions.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import Question from './question';
+import './style.css';
+
+class ReviewQuestions extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      providedAnswers: this.props.providedAnswers,
+      questions: this.props.questions
+    };
+  }
+
+  providedAnswer(answer) {
+    const _providedAnswers = this.state.providedAnswers.splice(0);
+    _providedAnswers[this.state.currentIndex] = answer;
+    this.setState({ providedAnswers: _providedAnswers });
+    this.props.onAnswersChange(_providedAnswers, false);
+  }
+
+  saveChanges = () => {
+    this.props.onAnswersChange(this.state.providedAnswers, true);
+  };
+
+  getReviewedItems() {
+    let reviewedItems = [];
+    this.state.questions.forEach(function(question, index) {
+      reviewedItems.push(
+        <Question
+          key={index}
+          question={question.question}
+          answer={this.state.providedAnswers[index]}
+          useProvidedAnswer={this.providedAnswer.bind(this)}
+        />
+      );
+    }, this);
+
+    return reviewedItems;
+  }
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      providedAnswers: nextProps.providedAnswers,
+      questions: nextProps.questions
+    });
+  }
+  render() {
+    return (
+      <div className={this.props.shouldDisplay ? '' : 'hidden'}>
+        <br />
+        {this.getReviewedItems()}
+        <br />
+        <div>
+          <button type="submit" onClick={this.saveChanges.bind(this)}>
+            Save Changes
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+export default ReviewQuestions;