From 58ead4589101fdfc997c7fe7d02ab7869b27f69c Mon Sep 17 00:00:00 2001 From: Arunas Norvaisa Date: Thu, 18 Apr 2019 12:23:56 +0300 Subject: [PATCH 1/4] initial commit --- ui/.gitignore | 23 + ui/package.json | 26 + ui/public/css/style.css | 47 + ui/public/index.html | 20 + ui/src/App.js | 170 + ui/src/index.js | 11 + ui/src/serviceWorker.js | 135 + ui/yarn.lock | 10107 ++++++++++++++++++++++++++++++++++++++ 8 files changed, 10539 insertions(+) create mode 100644 ui/.gitignore create mode 100644 ui/package.json create mode 100644 ui/public/css/style.css create mode 100644 ui/public/index.html create mode 100644 ui/src/App.js create mode 100644 ui/src/index.js create mode 100644 ui/src/serviceWorker.js create mode 100644 ui/yarn.lock diff --git a/ui/.gitignore b/ui/.gitignore new file mode 100644 index 0000000000..4d29575de8 --- /dev/null +++ b/ui/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/ui/package.json b/ui/package.json new file mode 100644 index 0000000000..5f6fddc58f --- /dev/null +++ b/ui/package.json @@ -0,0 +1,26 @@ +{ + "name": "ui", + "version": "0.1.0", + "private": true, + "dependencies": { + "axios": "^0.18.0", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-scripts": "2.1.8" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/ui/public/css/style.css b/ui/public/css/style.css new file mode 100644 index 0000000000..076984236c --- /dev/null +++ b/ui/public/css/style.css @@ -0,0 +1,47 @@ +html { + width: 95%; + height: 100%; + background-color: #666; + color: #eee; + text-align: center; + margin: 0 auto; + font-size: 62.5%; + box-sizing: border-box; +} + +header h1 { + font-size: 2.6rem +} + +.subject-wrapper, .books-wrapper, .book-wrapper h2, .label { + font-size: 1.8rem; +} + +.subject { + margin: 1.8rem; +} + +.book { + margin: 1rem auto; + width: 80%; + padding: 1.2rem; + color: #000; + background-color: #fff; + border: 0.1rem solid red; + border-radius: 1rem; +} + +.input, .textarea { + width: 60%; + text-align: center; +} + +.input { + height: 3.6rem; + padding: 0 2rem; +} + +.textarea { + height: auto; + padding: .6rem 2rem; +} diff --git a/ui/public/index.html b/ui/public/index.html new file mode 100644 index 0000000000..fa68507ee9 --- /dev/null +++ b/ui/public/index.html @@ -0,0 +1,20 @@ + + + + + + + Adapt UI challenge + + + +
+

Some dummy book API (© AdaptDK)

+
+
+
+ + diff --git a/ui/src/App.js b/ui/src/App.js new file mode 100644 index 0000000000..1664fe315d --- /dev/null +++ b/ui/src/App.js @@ -0,0 +1,170 @@ +import React from 'react'; +import axios from "axios"; + +class App extends React.Component { + state = { + book: null, + books: [], + error: false, + subjects: [] + }; + + subjectURL = "http://localhost:3010/subjects"; + bookURL = "http://localhost:3010/books?subjects_like="; + + getSubjects = () => { + axios + .get(this.subjectURL) + .then(res => { + this.setState({ subjects: res.data, error: false, book: null }); + console.log("State", this.state); + }) + .catch(error => { + this.setState({ error: error.toString() }); + }); + }; + + getBooks = subject => { + axios + .get(this.bookURL + subject) + .then(res => { + this.setState({ books: res.data, error: false, book: null }); + }) + .catch(error => { + this.setState({ error: error.toString() }); + }); + }; + + handleSubjectClick = e => { + this.getBooks(e.target.id); + }; + + handleBookClick = e => { + const id = ~~e.target.id; + let book = this.state.books.filter(item => item.id === id); + book = book[0]; + this.setState({ book, error: false }); + }; + + //Function created just be able to use 'value' filed in inputs + //Otherwise, console errors were thrown + handleChange = () => { + return + }; + + renderSubjects = () => { + return ( +
+

We have the following subjects:

+ {this.state.subjects.map(subject => { + return ( + + {subject} + + ); + })} +
+ ); + }; + + renderBooks = () => { + const { books } = this.state; + return ( +
+
+

We have the following books for this subject:

+ {books.map(book => { + return ( +
+ {book.title} +
+ ); + })} +
+ ); + }; + + renderBook = () => { + const { book } = this.state; + console.log(book); + return ( +
+

We have the following details about {book.title}

+
+