diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..399ee1b --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +JWT_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAnk0u5Aag3eJk3FaiG9H+\nv/NLRjiZxFXGJBoOO5Zhal1j8tk1D1vkWRMk+KdCjN998s//62kwYMLkAjOuEoCc\n4Lb6hCeHVIgL+nX9JOxEny0Zi6Koli1KnyQNUZ7vVYHf5NZ7k1h6MShYIzhUPdks\ntiE9nQMtP18JBupccES986iMZw8hra3AGjTBXR6siRePnBa84rYlPhzETjZX4jf6\nM+aDI7+KY3ztrkcBSQL7sbPdILBepBzxHCN1uqUBoYbVTYPZYMmaGsK553KcVds2\nB83LAy626KRAD7Sp1/NwgRIcL55bB1xef/Q+qjSnIOGd4r2JkmjmNLEM4A0p1rEo\nFQIDAQAB\n-----END PUBLIC KEY-----" diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..ceaf933 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,261 @@ +{ + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true + }, + "sourceType": "module" + }, + "plugins": [ + "react" + ], + "rules": { + "accessor-pairs": "error", + "array-bracket-spacing": "error", + "array-callback-return": "error", + "arrow-body-style": "error", + "arrow-parens": "error", + "arrow-spacing": [ + "error", + { + "after": true, + "before": true + } + ], + "block-scoped-var": "error", + "block-spacing": "error", + "brace-style": "error", + "callback-return": "error", + "camelcase": "error", + "capitalized-comments": [ + "error", + "never" + ], + "class-methods-use-this": "error", + "comma-dangle": "error", + "comma-spacing": [ + "error", + { + "after": true, + "before": false + } + ], + "comma-style": "error", + "complexity": "error", + "computed-property-spacing": [ + "error", + "never" + ], + "consistent-return": "error", + "consistent-this": "error", + "curly": "error", + "default-case": "error", + "dot-location": "error", + "dot-notation": "error", + "eol-last": "error", + "eqeqeq": "error", + "func-call-spacing": "error", + "func-name-matching": "error", + "func-names": "error", + "func-style": "error", + "generator-star-spacing": "error", + "global-require": "error", + "guard-for-in": "error", + "handle-callback-err": "error", + "id-blacklist": "error", + "id-length": "error", + "id-match": "error", + "indent": "off", + "init-declarations": "error", + "jsx-quotes": "error", + "key-spacing": "error", + "keyword-spacing": [ + "error", + { + "after": true, + "before": true + } + ], + "line-comment-position": "error", + "linebreak-style": [ + "error", + "unix" + ], + "lines-around-comment": "error", + "lines-around-directive": "error", + "max-depth": "error", + "max-len": "off", + "max-lines": "error", + "max-nested-callbacks": "error", + "max-params": "error", + "max-statements": "error", + "max-statements-per-line": "error", + "multiline-ternary": "error", + "new-cap": "error", + "new-parens": "error", + "newline-after-var": [ + "error", + "never" + ], + "newline-before-return": "off", + "newline-per-chained-call": "error", + "no-alert": "error", + "no-array-constructor": "error", + "no-await-in-loop": "error", + "no-bitwise": "error", + "no-caller": "error", + "no-catch-shadow": "error", + "no-compare-neg-zero": "error", + "no-confusing-arrow": "error", + "no-continue": "error", + "no-div-regex": "error", + "no-duplicate-imports": "error", + "no-else-return": "error", + "no-empty-function": "error", + "no-eq-null": "error", + "no-eval": "error", + "no-extend-native": "error", + "no-extra-bind": "error", + "no-extra-label": "error", + "no-extra-parens": "error", + "no-floating-decimal": "error", + "no-implicit-coercion": "error", + "no-implicit-globals": "error", + "no-implied-eval": "error", + "no-inline-comments": "error", + "no-invalid-this": "error", + "no-iterator": "error", + "no-label-var": "error", + "no-labels": "error", + "no-lone-blocks": "error", + "no-lonely-if": "error", + "no-loop-func": "error", + "no-magic-numbers": "error", + "no-mixed-operators": "error", + "no-mixed-requires": "error", + "no-multi-assign": "error", + "no-multi-spaces": "error", + "no-multi-str": "error", + "no-multiple-empty-lines": "error", + "no-native-reassign": "error", + "no-negated-condition": "error", + "no-negated-in-lhs": "error", + "no-nested-ternary": "error", + "no-new": "error", + "no-new-func": "error", + "no-new-object": "error", + "no-new-require": "error", + "no-new-wrappers": "error", + "no-octal-escape": "error", + "no-param-reassign": "error", + "no-path-concat": "error", + "no-plusplus": "error", + "no-process-env": "error", + "no-process-exit": "error", + "no-proto": "error", + "no-prototype-builtins": "error", + "no-restricted-globals": "error", + "no-restricted-imports": "error", + "no-restricted-modules": "error", + "no-restricted-properties": "error", + "no-restricted-syntax": "error", + "no-return-assign": "error", + "no-return-await": "error", + "no-script-url": "error", + "no-self-compare": "error", + "no-sequences": "error", + "no-shadow": "off", + "no-shadow-restricted-names": "error", + "no-spaced-func": "error", + "no-sync": "error", + "no-tabs": "error", + "no-template-curly-in-string": "error", + "no-ternary": "error", + "no-throw-literal": "error", + "no-trailing-spaces": "error", + "no-undef-init": "error", + "no-undefined": "error", + "no-underscore-dangle": "error", + "no-unmodified-loop-condition": "error", + "no-unneeded-ternary": "error", + "no-unused-expressions": "error", + "no-use-before-define": "error", + "no-useless-call": "error", + "no-useless-computed-key": "error", + "no-useless-concat": "error", + "no-useless-constructor": "error", + "no-useless-escape": "error", + "no-useless-rename": "error", + "no-useless-return": "error", + "no-var": "error", + "no-void": "error", + "no-warning-comments": "error", + "no-whitespace-before-property": "error", + "no-with": "error", + "nonblock-statement-body-position": "error", + "object-curly-newline": "error", + "object-curly-spacing": [ + "error", + "always" + ], + "object-property-newline": "error", + "object-shorthand": "error", + "one-var": "off", + "one-var-declaration-per-line": "error", + "operator-assignment": "error", + "operator-linebreak": "error", + "padded-blocks": "off", + "prefer-arrow-callback": "error", + "prefer-const": "error", + "prefer-destructuring": "error", + "prefer-numeric-literals": "error", + "prefer-promise-reject-errors": "error", + "prefer-reflect": "error", + "prefer-rest-params": "error", + "prefer-spread": "error", + "prefer-template": "error", + "quote-props": "error", + "quotes": [ + "error", + "single" + ], + "radix": "error", + "require-await": "error", + "require-jsdoc": "error", + "rest-spread-spacing": "error", + "semi": "off", + "semi-spacing": "error", + "sort-imports": "off", + "sort-keys": "error", + "sort-vars": "error", + "space-before-blocks": "error", + "space-before-function-paren": "error", + "space-in-parens": "off", + "space-infix-ops": "error", + "space-unary-ops": "error", + "spaced-comment": [ + "error", + "always" + ], + "strict": "error", + "symbol-description": "error", + "template-curly-spacing": "error", + "template-tag-spacing": "error", + "unicode-bom": [ + "error", + "never" + ], + "valid-jsdoc": "error", + "vars-on-top": "error", + "wrap-iife": "error", + "wrap-regex": "error", + "yield-star-spacing": "error", + "yoda": "error" + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 9d04ea4..187e7d8 100644 --- a/.gitignore +++ b/.gitignore @@ -31,8 +31,9 @@ node_modules npm-debug.log # ignore the dist folder that webpack creates for are react app. -public/dist/ +public/dist/* .env + .DS_Store yarn.lock diff --git a/README.md b/README.md index 9ea0cfc..6af733a 100644 --- a/README.md +++ b/README.md @@ -16,10 +16,26 @@ Practicing mock interviews helps the Candidate develop skills for answering tech Specifications and requirements will be assigned based on the items in backlog within the Development project (see the projects tab of the interview-app repository). ### Setup instructions - Install all dependencies by running this in a terminal window -```bash - npm install -``` +If this is the first time you're setting up this repo: + +./go init +./go install_idm + +You will need to create a `.env.development` file in IDM and follow steps 7 & 8 in the idm ReadMe. + +Then, you will need to create a `.env.development` file in this repo and add the JWT_PUBLIC_KEY from IDM. + +If you've worked on this repo in the past, and you're working in the development environment: +./go start + +To run your test and reset the test database: +./go test + +To reset the database and run the migration: +./go reset_db + +For additional help and usage instructions: +./go help ### Start development server Run this in a terminal window diff --git a/app.js b/app.js index 01e4dc8..5fcfcd2 100644 --- a/app.js +++ b/app.js @@ -1,13 +1,52 @@ // in server.js -const express = require('express'); -const app = express(); +import express from 'express' +import authInitialize from './src/config/auth' +import cookieParser from 'cookie-parser' +import bodyParser from 'body-parser' +import path from 'path' +import { parseConfig, getEnv } from './src/config/config' +import webpack from 'webpack' +import webpackDevMiddleware from 'webpack-dev-middleware' +import webpackHotMiddleware from 'webpack-hot-middleware' +import webpackConfig from './webpack.config' +const compiler = webpack(webpackConfig) + +const app = express() + +app.use(bodyParser.json()) +app.use(bodyParser.urlencoded({ extended: false })) +app.use(cookieParser()) + +if(getEnv() === 'development') { + app.use(webpackDevMiddleware(compiler, { + publicPath: webpackConfig.output.publicPath, + filename: webpackConfig.output.filename, + serverSideRender: true, + stats: { + color: true, + hash: false, + timings: true, + chunks: false, + chunkModules: false, + modules: false + } + })) +} + app.use(express.static(__dirname + '/public/dist/')); -app.use(express.static(__dirname + '/src/browser/')); +app.use(express.static(__dirname + '/src/browser/main.js')); + + +authInitialize(app) +/* GET home page. */ +app.get('*', function(req, res, next) { + res.sendFile(path.join(__dirname, 'src/browser/index.html')) +}) -// Heroku by default set an ENV variable called PORT=443 +// Heroku bydefault set an ENV variable called PORT=443 // so that you can access your site with https default port. // Falback port will be 8080; basically for pre-production test in localhost // You will use $ npm run prod for this -app.listen(process.env.PORT || 4000); +app.listen(process.env.PORT || 3000); diff --git a/artifacts/likeable-oryx.md b/artifacts/likeable-oryx.md index 3093a91..0444107 100644 --- a/artifacts/likeable-oryx.md +++ b/artifacts/likeable-oryx.md @@ -6,10 +6,13 @@ Lizz & Ryan Setting up Knex & creating tables ## Project Specs -- [ ] [Issue #20:](https://github.com/GuildCrafts/interview-app/issues/20) Create Database Schema -- [ ] [Issue #1:](https://github.com/GuildCrafts/interview-app/issues/1) Create candidate table -- [ ] [Issue #21:](https://github.com/GuildCrafts/interview-app/issues/21) Create questions table - +- [x] [Issue #20:](https://github.com/GuildCrafts/interview-app/issues/20) Create Database Schema +- [x] [Issue #1:](https://github.com/GuildCrafts/interview-app/issues/1) Create candidate table +- [x] [Issue #21:](https://github.com/GuildCrafts/interview-app/issues/21) Create questions table +- [x] [Issue #28:](https://github.com/GuildCrafts/interview-app/issues/28) Create go file +- [x] [Issue #29:](https://github.com/GuildCrafts/interview-app/issues/29) Setup Istanbul NYC +- [x] [Issue #42:](https://github.com/GuildCrafts/interview-app/issues/42) CRUD +- [x] [Issue #43:](https://github.com/GuildCrafts/interview-app/issues/43) Approver ## Quality * Making sure all tests pass. diff --git a/artifacts/plaint_tiger.md b/artifacts/plaint_tiger.md new file mode 100644 index 0000000..0c9badd --- /dev/null +++ b/artifacts/plaint_tiger.md @@ -0,0 +1,4 @@ +## Specifications + +- [ ] Issue #22 - Add react router as a dependency to the project. +- [ ] Issue #22 - Add react router to front end routes \ No newline at end of file diff --git a/data/questions.json b/data/questions.json index e314372..e18adb8 100644 --- a/data/questions.json +++ b/data/questions.json @@ -1,65 +1,65 @@ -[{"tags": ["core-javascript"], - "level": "2", +[{"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is a closure?", "answer": "Gives access to an outer function's scope from an inner function"}, - {"tags": ["core-javascript"], - "level": "2", + {"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is a promise?", "answer": "Is an object that stands in for a future value"}, - {"tags": ["core-javascript"], - "level": "2", + {"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is a callback?", "answer": "A higher-order function that is passed down to another function to be executed"}, - {"tags": ["core-javascript"], - "level": "2", + {"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is an eventloop?", "answer": "A queue of callback functions that are processed after an async function is executed"}, - {"tags": ["core-javascript"], - "level": "2", + {"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is a higher order function?", "answer": "Takes functions as arguments and/or returns a function"}, - {"tags": ["core-javascript"], - "level": "2", + {"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is the `this` operator?", "answer": "An operator where the value is determined by how a function is called"}, - {"tags": ["core-javascript"], - "level": "2", + {"topics": ["core-javascript"], + "difficulty": "intermediate", "question": "What is a middleware?", "answer": "Functions that have access to the request and response object and can call the next middleware function in the stack"}, - {"tags": ["http"], - "level": "2", + {"topics": ["http"], + "difficulty": "intermediate", "question": "Explain the lifecycle of a web request.", "answer": "Sounds like async to me"}, - {"tags": ["core-javascript"], - "level": "1", + {"topics": ["core-javascript"], + "difficulty": "beginner", "question": "What is an array?", - "answer": "A global object that is used in the construction of high-level, list-like objects"}, - {"tags": ["core-javascript"], - "level": "1", + "answer": "A global object that is used in the construction of high-difficulty, list-like objects"}, + {"topics": ["core-javascript"], + "difficulty": "beginner", "question": "What is an object?", "answer": "A collection of properties that contain a key and a value"}, - {"tags": ["sql"], - "level": "1", + {"topics": ["sql"], + "difficulty": "beginner", "question": "What is a SQL select?", "answer": "A statement used to fetch data from a database table which returns data as result-sets"}, - {"tags": ["sql"], - "level": "1", + {"topics": ["sql"], + "difficulty": "beginner", "question": "What is a SQL join?", "answer": "A clause that combines rows from two or more tables, based on a related column between them"}, - {"tags": ["sql"], - "level": "1", + {"topics": ["sql"], + "difficulty": "beginner", "question": "What is a SQL left (outer) join?", "answer": "Returns all records from the left table, and the matched records from the right table"}, - {"tags": ["sql"], - "level": "1", + {"topics": ["sql"], + "difficulty": "beginner", "question": "What is a SQL inner join?", "answer": "Returns records that have matching values in both tables"}, - {"tags": ["sql"], - "level": "1", + {"topics": ["sql"], + "difficulty": "beginner", "question": "What is a SQL right (outer) join?", "answer": "Returns all records from the right table, and the matched records from the left table"}, - {"tags": ["sql"], - "level": "1", + {"topics": ["sql"], + "difficulty": "beginner", "question": "What is a SQL group by?", "answer": "A statement used with aggregate functions to the group the result-set by one or more columns"} ] diff --git a/docs/EarlyREADME.MD b/docs/EarlyREADME.MD index 1d33809..d1fb310 100644 --- a/docs/EarlyREADME.MD +++ b/docs/EarlyREADME.MD @@ -13,7 +13,7 @@ Create an app that has two player roles; the candidate and the interviewer. Even - [ ] Start page where user can select: - Game mode - Player role - - Difficulty + - Level - Topic @@ -43,7 +43,7 @@ Create an app that has two player roles; the candidate and the interviewer. Even - average time to answer question 2) Questions: -- difficulty/level +- level - topic - point value - time limit diff --git a/docs/IMG_3244.JPG b/docs/IMG_3244.JPG new file mode 100644 index 0000000..7e46a4f Binary files /dev/null and b/docs/IMG_3244.JPG differ diff --git a/go b/go new file mode 100755 index 0000000..001e386 --- /dev/null +++ b/go @@ -0,0 +1,125 @@ +#! /bin/bash + + function help { + echo "Usage" + echo "./go init ........................... Installs all dependencies and makes interview-app ready for development" + echo "./go reset_db [development|test] .... Drops and creates database according to environment argument" + echo "./go start .......................... Starts the server in dev mode" + echo "./go test ........................... Runs reset_db test, then runs test scripts" + } + + function reset_db { + env=${1:-test}q + dbname=interviewdb-${env} + dropdb ${dbname} + createdb ${dbname} + NODE_ENV=${env} npm run migrate + } + + function test { + reset_db test + NODE_ENV=test npm test + } + + function init { + echo "Initializing: add initialization steps here" + npm install + reset_db development + reset_db test + } + + function start { + npm run start:dev + } + + function add_env_var_to_shell { + if [ $SHELL = "/bin/bash" ] ; then + echo "${1}" >> ~/.bashrc + elif [ $SHELL = "bin/zsh" ] ; then + echo "${1}" >> ~/.zshrc + fi + } + + function source_shell_profile { + if [ $SHELL = "/bin/bash" ] ; then + source ~/.bashrc + elif [ $SHELL = "bin/zsh" ] ; then + source ~/.zshrc + fi + } + + function install_idm { + PROJECT_HOME="${PWD}" + IDM_HOME="${PWD}/../idm" + if ! [ -d ${IDM_HOME} ]; then + echo "cloning IDM github repo" + git clone git@github.com:LearnersGuild/idm.git ${IDM_HOME} + else + echo "IDM github already exists. Skipping" + fi + + if ! [ $NODE_ENV ]; then + add_env_var_to_shell "export NODE_ENV=development" + fi + + echo "installing rethinkdb.." + brew install rethinkdb + brew services start rethinkdb + echo "...done installing rethinkdb" + + echo "installing redis..." + brew install redis + brew services start redis + echo "...done installing redis" + + if ! [ -f "../idm/.env.development" ]; then + echo "creating a .env.development file for idm" + cp idm/.env.template ../idm/.env.development + fi + + echo "Going to login to npmjs.org. " + echo "If you dont remember the password, go to npmjs.org to reset password or create new account" + if ! [ -f "${HOME}/.npmrc" ]; then + npm login + fi + add_env_var_to_shell "export NPM_AUTH_TOKEN=$(cat ${HOME}/.npmrc | grep _authToken | cut -d '=' -f2)" + source_shell_profile + cd ${IDM_HOME} + echo "installing npm packages" + npm install + echo "going to create db" + npm run db:create + echo "running migrations" + npm run db:migrate -- up + + echo "Install Mehserve" + npm install mehserve -g + mkdir -p ~/.mehserve + echo 9001 > ~/.mehserve/idm.learnersguild + echo 3000 > ~/.mehserve/interview.learnersguild + mehserve install + echo "!!!! IMPORTANT !!!!" + echo "paste the 5 commands above for successfull mehserve configuration" + } + + if [ -z "${1}" ] ; then + init + echo "What up G" + echo "Additional commands you can run --" + help + exit 0 + fi + + case $1 in + init) init $@ + ;; + reset_db) shift; reset_db $@ + ;; + install_idm) shift; install_idm $@ + ;; + test) shift; test $@ + ;; + start) start + ;; + *) help + esac diff --git a/index.html b/index.html new file mode 100644 index 0000000..8288985 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/package.json b/package.json index 2fe6aa5..0cdf6ad 100644 --- a/package.json +++ b/package.json @@ -4,51 +4,62 @@ "description": "", "scripts": { "start": "./node_modules/.bin/babel-node app.js", - "start:dev": "./node_modules/.bin/webpack-dev-server --content-base public/dist/ --port 3000", + "start:dev": "NODE_ENV=development ./node_modules/.bin/nodemon app.js --exec babel-node", "migrate": "babel-node ./node_modules/.bin/knex --knexfile ./src/database/knexfile.js migrate:latest", "migrate:make": "babel-node ./node_modules/.bin/knex --knexfile ./src/database/knexfile.js migrate:make", "migrate:rollback": "babel-node ./node_modules/.bin/knex --knexfile ./src/database/knexfile.js migrate:rollback", "prod": "./node_modules/.bin/babel-node app.js", "heroku-postbuild": "webpack -p --progress --colors", - "test": "mocha --require babel-register ./tests/*.js", + "test": "NODE_ENV=test ./node_modules/.bin/nyc ./node_modules/.bin/mocha --require babel-register ./test/*/* --require ignore-styles", "migrate": "babel-node ./node_modules/.bin/knex --knexfile ./src/database/knexfile.js migrate:latest", "migrate:make": "babel-node ./node_modules/.bin/knex --knexfile ./src/database/knexfile.js migrate:make", "migrate:rollback": "babel-node ./node_modules/.bin/knex --knexfile ./src/database/knexfile.js migrate:rollback" - }, - "author": "", "license": "MIT", "dependencies": { + "@learnersguild/idm-jwt-auth": "^1.2.1", "babel-cli": "^6.24.0", "babel-core": "^6.24.0", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.24.0", "babel-preset-react": "^6.23.0", + "body-parser": "^1.17.1", + "cookie-parser": "^1.4.3", "css-loader": "^0.27.3", "express": "^4.15.2", "extract-text-webpack-plugin": "^2.1.0", "fs": "0.0.1-security", "html-webpack-plugin": "^2.28.0", + "ignore-styles": "^5.0.1", "json-loader": "^0.5.4", "knex": "^0.12.9", "lodash": "^4.17.4", "path": "^0.12.7", "pg": "^6.1.5", + "query-string": "^4.3.2", "react": "^15.4.2", "react-dom": "^15.4.2", + "react-hot-loader": "^1.3.1", + "react-router": "^4.0.0", + "react-router-dom": "^4.0.0", "react-uikit-flex": "^2.0.3", "style-loader": "^0.16.0", "webpack": "^2.3.0", - "webpack-dev-server": "^2.4.2" + "webpack-dev-middleware": "^1.10.1", + "webpack-hot-middleware": "^2.18.0" }, "devDependencies": { "chai": "^3.5.0", + "chai-enzyme": "^0.6.1", + "dotenv": "^4.0.0", "enzyme": "^2.8.0", "ignore-styles": "^5.0.1", "jsdom": "^9.12.0", "mocha": "^3.2.0", + "nodemon": "^1.11.0", "nyc": "^10.2.0", - "react-addons-test-utils": "^15.4.2" + "react-addons-test-utils": "^15.4.2", + "webpack-dev-server": "^2.4.2" } } diff --git a/src/browser/components/atoms/form-input/index.js b/src/browser/components/atoms/form-input/index.js new file mode 100644 index 0000000..685c9a4 --- /dev/null +++ b/src/browser/components/atoms/form-input/index.js @@ -0,0 +1,15 @@ +import React,{Component} from 'react' + +export default class FormInput extends Component { + constructor() { + super() + } + + render() { + return ( +
+ +
+ ) + } +} diff --git a/src/browser/components/atoms/select-tag/index.js b/src/browser/components/atoms/select-tag/index.js index b2c24a0..ca6c6f3 100644 --- a/src/browser/components/atoms/select-tag/index.js +++ b/src/browser/components/atoms/select-tag/index.js @@ -2,12 +2,12 @@ import React, {Component} from 'react' export default class SelectTag extends Component { render() { - const options = this.props.options.map((option, index) => ) + const options = this.props.options.map((option, index) => ) return (
- {options} diff --git a/src/browser/components/common/router.js b/src/browser/components/common/router.js new file mode 100644 index 0000000..3c47824 --- /dev/null +++ b/src/browser/components/common/router.js @@ -0,0 +1,45 @@ +import React, {Component} from 'react' +import { render } from 'react-dom' +import { BrowserRouter, Route, Link } from 'react-router-dom' +import Landing from '../../components/Pages/Landing/index' + +import Layout from '../common/router' +import Header from '../molecules/header/index' +import GameOptions from '../../components/molecules/game-options/index' +import SelectTag from '../../components/atoms/select-tag/index' +import Profile from '../pages/profile/index' + +export default class Routes extends Component { + render() { + const fakeProfile = { + profileName: {value: "Murphy"}, + topic: {value: "JavaScript"}, + gameMode: {value: "Speaking"} + } + const fakeStats = { + experience: {value: 100, heading: "Experience"}, + difficulty: {value: "Beginner", heading: "Difficulty"} + } + + const LandingComponent = (props, state, params) => + + + const GameOptionsComponent = (props, state, params) => + + + const ProfileComponent = (props, state, params) => + + + + return ( + +
+ + + + +
+ + ) + } +} diff --git a/src/browser/components/molecules/game-options/index.js b/src/browser/components/molecules/game-options/index.js index 7b03db4..28ac64a 100644 --- a/src/browser/components/molecules/game-options/index.js +++ b/src/browser/components/molecules/game-options/index.js @@ -2,9 +2,9 @@ import React, {Component} from 'react' import SelectTag from '../../atoms/select-tag/index' export default class GameOptions extends Component { - constructor() { - super() - this.state = {level: null, tag: null} + constructor(props) { + super(props) + this.state = {difficulty: this.props.parse.difficulty || null, topic: this.props.parse.topic || null} this.handleSubmit = this.handleSubmit.bind(this) } @@ -18,20 +18,23 @@ export default class GameOptions extends Component { } render() { - const tags = this.props.tags || [] - const levels = this.props.levels || [] + const topics = this.props.topics || [] + const difficulty = this.props.difficulty || [] const gameModes = this.props.gameModes || [] + return (

Time to mock interview

Select your options

- - + + + +
- +
) diff --git a/src/browser/components/molecules/header/index.js b/src/browser/components/molecules/header/index.js index cde09b2..d5e071e 100644 --- a/src/browser/components/molecules/header/index.js +++ b/src/browser/components/molecules/header/index.js @@ -1,19 +1,87 @@ import React, {Component} from 'react' import flex from 'react-uikit-flex' - import ProfileBox from '../../atoms/profile-box/index' import StatBox from '../../atoms/stat-box/index' +import AddInput from '../prompt-input/index' + + require('../../../../../public/stylesheets/uikit.min.css') export default class Header extends Component { - constructor() { - super() + constructor(props) { + super(props) } render() { return (