adaptdk · velicv · Jun 4, 2017
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-1"]
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <div class="container"></div>
+  </body>
+  <script src="/bundle.js"></script>
+</html>
diff --git a/package.json b/package.json
@@ -1,14 +1,35 @@
 {
   "name": "react-coding-challenge",
   "version": "1.0.0",
-  "description": "A package containing a simple dummy book API, which should be used in the challenge",
+  "description": "Challenge accepted",
+  "main": "index.js",
   "scripts": {
-    "start": "json-server --port 3010 --watch api.json"
+    "start": "json-server --port 3010 --watch api.json &node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
-  "keywords": ["react challenge", "tryouts", "react developer", "hiring"],
-  "author": "Adapt A/S",
+  "keywords": [
+    "react challenge",
+    "tryouts",
+    "react developer",
+    "hiring"
+  ],
+  "author": "velicv",
   "license": "ISC",
   "devDependencies": {
-    "json-server": "0.10.1"
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "json-server": "0.10.1",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
+  },
+  "dependencies": {
+    "axios": "^0.16.2",
+    "babel-preset-stage-1": "^6.24.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
+    "redux": "^3.6.0",
+    "redux-promise": "^0.5.3"
   }
 }
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,52 @@
+
+import axios from 'axios';
+
+const ROOT_URL = 'http://localhost:3010';
+
+export const FETCH_BOOKS = 'FETCH_BOOKS';
+export const SELECT_BOOK = 'SELECT_BOOK';
+export const SAVE_BOOK = 'SAVE_BOOK';
+export const FETCH_SUBJECTS = 'FETCH_SUBJECTS';
+
+export function fetchSubjects() {
+
+    const request = axios.get(`${ROOT_URL}/subjects`);
+
+    return {
+        type: FETCH_SUBJECTS,
+        payload: request
+    };
+}
+
+export function fetchBooks(subject) {
+
+    let payload;
+
+    if (subject) {
+        payload = axios.get(`${ROOT_URL}/books?subjects_like=${subject}`);
+    } else {
+        payload = { data: [] };
+    }
+
+    return {
+        type: FETCH_BOOKS,
+        payload: payload
+    };
+}
+
+export function selectBook(id) {
+    return {
+        type: SELECT_BOOK,
+        payload: id
+    };
+}
+
+export function saveBook(book) {
+
+    const request = axios.put(`${ROOT_URL}/books/${book.id}`, book);
+
+    return {
+        type: SAVE_BOOK,
+        payload: request
+    };
+}
diff --git a/src/components/app.js b/src/components/app.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import SubjectSelection from '../containers/subjectSelection';
+import BookSelection from '../containers/bookSelection';
+import BookForm from '../containers/bookForm';
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+          <SubjectSelection />
+          <BookSelection />
+          <BookForm />
+      </div>
+    );
+  }
+}
diff --git a/src/components/form/formFieldComponent.js b/src/components/form/formFieldComponent.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+export default class FormFieldComponent extends Component {
+
+    getDefaultValue() {
+        return '';
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = { value: props.value || this.getDefaultValue() };
+    }
+
+    handlOnChange() {
+
+        const value = this.formValue(...arguments);
+
+        if (this.props.handleOnChange) {
+            this.props.handleOnChange(value);
+        }
+
+        this.setState({ value: value });
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            value: nextProps.value || this.getDefaultValue()
+        });
+    }
+}
diff --git a/src/components/form/inputArray.js b/src/components/form/inputArray.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import FormFieldComponent from './formFieldComponent';
+import TextField from './textField';
+
+export default class InputArray extends FormFieldComponent {
+
+    getDefaultValue() {
+        return [];
+    }
+
+    formValue(index, newValue) {
+        const value = [...this.state.value];
+        value[index] = newValue;
+        return value;
+    }
+
+    onAddClick() {
+
+        let defaultValue = '';
+
+        if (this.props.options && this.props.options.getDefaultValue) {
+            defaultValue = this.props.options.getDefaultValue();
+        }
+
+        this.handlOnChange(this.state.value.length, defaultValue)
+    }
+
+    renderItem(itemValue, index) {
+
+        const value = this.props.value || [];
+        const options = this.props.options || {};
+        const Type = options.type ? options.type : TextField;
+
+        return (
+            <Type
+                key={index}
+                value={itemValue || null}
+                options={options.options}
+                handleOnChange={this.handlOnChange.bind(this, index)}
+            />
+        );
+    }
+
+    render() {
+        return (
+
+            <div className="inputArray">
+                {this.state.value.map(this.renderItem.bind(this))}
+                <a href="javascript:void(0);" onClick={this.onAddClick.bind(this)}>Add</a>
+            </div>
+        );
+    }
+}
diff --git a/src/components/form/inputSet.js b/src/components/form/inputSet.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import FormFieldComponent from './formFieldComponent';
+
+const labelStyle = { display: 'inline-block', width: 200 };
+const setStyle = { paddingLeft: 20, border: '1px solid lightgray'};
+
+export default class InputSet extends FormFieldComponent {
+
+    getDefaultValue() {
+        return {};
+    }
+
+    formValue(field, newValue) {
+        const value = {...this.state.value};
+        value[field] = newValue;
+        return value;
+    }
+
+    renderField(fieldConfig) {
+
+        const value = this.state.value;
+        return (
+            <div key={fieldConfig.field}>
+                <label style={labelStyle}>{fieldConfig.title}</label>
+                <fieldConfig.type
+                    value={value ? value[fieldConfig.field] : null}
+                    options={fieldConfig.options}
+                    handleOnChange={this.handlOnChange.bind(this, fieldConfig.field)}
+                />
+            </div>
+        );
+    }
+
+    render() {
+
+        if (!this.props.options || !this.props.options.fields) {
+            return null;
+        }
+
+        return (
+            <div style={setStyle} className="inputSet">
+                {this.props.options.fields.map(this.renderField.bind(this))}
+            </div>
+        );
+    }
+}
diff --git a/src/components/form/selectField.js b/src/components/form/selectField.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import FormFieldComponent from './formFieldComponent';
+
+export default class SelectField extends FormFieldComponent {
+
+    formValue(ev) {
+        return ev.target.value;
+    }
+
+    renderOptions(option) {
+        return (
+            <option key={option} value={option}>{option}</option>
+        );
+    }
+
+    render() {
+        return (
+            <select className="selectField" value={this.state.value} onChange={this.handlOnChange.bind(this)}>
+                <option></option>
+                {this.props.options.values.map(this.renderOptions)}
+            </select>
+        );
+    }
+}
diff --git a/src/components/form/textField.js b/src/components/form/textField.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import FormFieldComponent from './formFieldComponent';
+
+export default class TextField extends FormFieldComponent {
+
+    formValue(ev) {
+        return ev.target.value;
+    }
+
+    render() {
+        return (
+            <input className="textField" value={this.state.value} onChange={this.handlOnChange.bind(this)}/>
+        );
+    }
+}