From 2d728224820c7bdb2a8aaa269216ac9a95f24cee Mon Sep 17 00:00:00 2001 From: Stavros Bastakis Date: Tue, 26 Jul 2016 23:34:29 +0300 Subject: [PATCH 1/4] Rendering Tasks with React --- devstaff-api-node/.babelrc | 3 ++ devstaff-api-node/package.json | 10 +++++- devstaff-api-node/public/index.html | 18 +++++++++++ devstaff-api-node/public/index.jsx | 47 ++++++++++++++++++++++++++++ devstaff-api-node/{ => src}/index.js | 13 +++++--- 5 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 devstaff-api-node/.babelrc create mode 100644 devstaff-api-node/public/index.html create mode 100644 devstaff-api-node/public/index.jsx rename devstaff-api-node/{ => src}/index.js (86%) diff --git a/devstaff-api-node/.babelrc b/devstaff-api-node/.babelrc new file mode 100644 index 0000000..ba124fb --- /dev/null +++ b/devstaff-api-node/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/devstaff-api-node/package.json b/devstaff-api-node/package.json index 0609295..9471b26 100644 --- a/devstaff-api-node/package.json +++ b/devstaff-api-node/package.json @@ -4,7 +4,9 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "babel src/index.js -d build", + "start": "node build/src/index.js" }, "author": "", "license": "ISC", @@ -14,5 +16,11 @@ "express": "^4.13.3", "lodash": "^3.10.1", "moment": "^2.10.6" + }, + "devDependencies": { + "babel": "^6.5.2", + "babel-cli": "^6.11.4", + "babel-core": "^6.11.4", + "babel-preset-es2015": "^6.9.0" } } diff --git a/devstaff-api-node/public/index.html b/devstaff-api-node/public/index.html new file mode 100644 index 0000000..13501f0 --- /dev/null +++ b/devstaff-api-node/public/index.html @@ -0,0 +1,18 @@ + + + + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/devstaff-api-node/public/index.jsx b/devstaff-api-node/public/index.jsx new file mode 100644 index 0000000..cdca602 --- /dev/null +++ b/devstaff-api-node/public/index.jsx @@ -0,0 +1,47 @@ + +class App extends React.Component { + + constructor() { + super(); + + this.state = { + tasks: [] + }; + } + + render() { + var tasks = this.state.tasks.map((task) => ( +
  • +
    Date: {task.cdate}
    +
    Title: {task.title}
    +
    Id: {task.id}
    +
    Description {task.desc}
    +
    +
    • + + )); + + return ( +
    +

    My tasks

    + +
    + ); + } + + fetchTasks() { + jQuery.ajax({ + method: 'GET', + url: '/tasks', + success: (tasks) => { + this.setState({ tasks }) + } + }); + } + + componentDidMount() { + this.fetchTasks(); + } +} + +ReactDOM.render(, document.getElementById('app')); \ No newline at end of file diff --git a/devstaff-api-node/index.js b/devstaff-api-node/src/index.js similarity index 86% rename from devstaff-api-node/index.js rename to devstaff-api-node/src/index.js index 2005b18..0e45b42 100644 --- a/devstaff-api-node/index.js +++ b/devstaff-api-node/src/index.js @@ -1,7 +1,9 @@ -var express = require('express'); -var bodyParser = require('body-parser'); -var moment = require('moment'); -var _ = require('lodash'); +import express from 'express'; +import bodyParser from 'body-parser'; +import moment from 'moment'; +import _ from 'lodash'; +import path from 'path'; + var app = express(); var dbCollection = [ @@ -12,9 +14,10 @@ var dbCollection = [ app.use(bodyParser.json()); // support json encoded bodies app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies +app.use('/public', express.static('public')); app.get('/', function (req, res) { - res.send('Hello World!'); + res.sendFile(path.join(__dirname, '../../public/index.html')); }); app.get('/tasks', function (req, res, next) { From 1cb025df11b5c37b27b1e73e69e04fc128fe00bc Mon Sep 17 00:00:00 2001 From: Stavros Bastakis Date: Wed, 27 Jul 2016 12:47:50 +0300 Subject: [PATCH 2/4] Updated gitignore, created eslintrc file --- devstaff-api-node/.eslintrc.json | 6 +++ devstaff-api-node/.gitignore | 82 ++++++++++++++++++++++++++++++++ devstaff-api-node/package.json | 5 +- 3 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 devstaff-api-node/.eslintrc.json diff --git a/devstaff-api-node/.eslintrc.json b/devstaff-api-node/.eslintrc.json new file mode 100644 index 0000000..7ebbe9b --- /dev/null +++ b/devstaff-api-node/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "airbnb", + "plugins": [ + "react" + ] +} \ No newline at end of file diff --git a/devstaff-api-node/.gitignore b/devstaff-api-node/.gitignore index b976608..1f0ca87 100644 --- a/devstaff-api-node/.gitignore +++ b/devstaff-api-node/.gitignore @@ -36,3 +36,85 @@ config/runtime.yaml # Runtime configuration for swagger app .jsbeautifyrc dist/ + +# Created by https://www.gitignore.io/api/macos,node,visualstudiocode,code + +### macOS ### +*.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + + +### Node ### +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + + +### VisualStudioCode ### +.vscode + +### Code ### +# Visual Studio Code - https://code.visualstudio.com/ +.settings/ +.vscode/ +tsconfig.json +jsconfig.json \ No newline at end of file diff --git a/devstaff-api-node/package.json b/devstaff-api-node/package.json index 9471b26..7d93763 100644 --- a/devstaff-api-node/package.json +++ b/devstaff-api-node/package.json @@ -21,6 +21,9 @@ "babel": "^6.5.2", "babel-cli": "^6.11.4", "babel-core": "^6.11.4", - "babel-preset-es2015": "^6.9.0" + "babel-preset-es2015": "^6.9.0", + "eslint": "^3.1.1", + "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-react": "^5.2.2" } } From bac1bbf7bd0a7a1cc65a77ed9a62d7774a1952f1 Mon Sep 17 00:00:00 2001 From: Stavros Bastakis Date: Wed, 27 Jul 2016 12:51:23 +0300 Subject: [PATCH 3/4] Added build directory to gitignore --- devstaff-api-node/.gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/devstaff-api-node/.gitignore b/devstaff-api-node/.gitignore index 1f0ca87..3cc68db 100644 --- a/devstaff-api-node/.gitignore +++ b/devstaff-api-node/.gitignore @@ -8,7 +8,7 @@ pids lib-cov coverage .lock-wscript -build/Release +build/ node_modules ### SublimeText ### From 1e362fc8f3e3cf6f797e88c183396e664f538e39 Mon Sep 17 00:00:00 2001 From: Stavros Bastakis Date: Wed, 27 Jul 2016 14:47:00 +0300 Subject: [PATCH 4/4] Separated React components and added styles --- devstaff-api-node/.eslintrc | 3 ++ devstaff-api-node/.eslintrc.json | 6 --- devstaff-api-node/README.md | 6 ++- devstaff-api-node/package.json | 2 + devstaff-api-node/public/App.jsx | 78 +++++++++++++++++++++++++++++ devstaff-api-node/public/index.html | 5 +- devstaff-api-node/public/index.jsx | 47 ----------------- devstaff-api-node/public/styles.css | 19 +++++++ 8 files changed, 108 insertions(+), 58 deletions(-) create mode 100644 devstaff-api-node/.eslintrc delete mode 100644 devstaff-api-node/.eslintrc.json create mode 100644 devstaff-api-node/public/App.jsx delete mode 100644 devstaff-api-node/public/index.jsx create mode 100644 devstaff-api-node/public/styles.css diff --git a/devstaff-api-node/.eslintrc b/devstaff-api-node/.eslintrc new file mode 100644 index 0000000..e89ba50 --- /dev/null +++ b/devstaff-api-node/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "airbnb" +} \ No newline at end of file diff --git a/devstaff-api-node/.eslintrc.json b/devstaff-api-node/.eslintrc.json deleted file mode 100644 index 7ebbe9b..0000000 --- a/devstaff-api-node/.eslintrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "airbnb", - "plugins": [ - "react" - ] -} \ No newline at end of file diff --git a/devstaff-api-node/README.md b/devstaff-api-node/README.md index 92135e8..98cec4f 100644 --- a/devstaff-api-node/README.md +++ b/devstaff-api-node/README.md @@ -6,9 +6,11 @@ A simple RESTful API used to view / create / edit / delete tasks. ```bash npm install -node index.js +npm build +npm start ``` ## Usage -It is suggested to use [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en) to start making requests to your API. +It is suggested to use [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en) to start making requests to your API. +If you wish to view the tasks rendered with React you can visit [http://localhost:3000](http://localhost:3000) \ No newline at end of file diff --git a/devstaff-api-node/package.json b/devstaff-api-node/package.json index 7d93763..0a6e77f 100644 --- a/devstaff-api-node/package.json +++ b/devstaff-api-node/package.json @@ -24,6 +24,8 @@ "babel-preset-es2015": "^6.9.0", "eslint": "^3.1.1", "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-import": "^1.12.0", + "eslint-plugin-jsx-a11y": "^2.0.1", "eslint-plugin-react": "^5.2.2" } } diff --git a/devstaff-api-node/public/App.jsx b/devstaff-api-node/public/App.jsx new file mode 100644 index 0000000..23b3dd7 --- /dev/null +++ b/devstaff-api-node/public/App.jsx @@ -0,0 +1,78 @@ +class Task extends React.Component { + + constructor() { + super(); + + this.state = {}; + } + + render() { + const task = this.props.task; + return ( +
    +
    Date: {task.cdate}
    +
    Title: {task.title}
    +
    Id: {task.id}
    +
    Description {task.desc}
    +
    + ); + } +} + +class TasksList extends React.Component { + + constructor() { + super(); + + this.state = { + tasks: [], + }; + } + + render() { + const tasks = this.state.tasks.map((task) => ( +
    • + )); + + return ( +
    +
      {tasks}
    +
    + ); + } + + fetchTasks() { + jQuery.ajax({ + method: 'GET', + url: '/tasks', + success: (tasks) => { + this.setState({ tasks }); + }, + }); + } + + componentDidMount() { + this.fetchTasks(); + } +} + +class App extends React.Component { + constructor() { + super(); + + this.state = { + tasks: [], + }; + } + + render() { + return ( +
    +

    My tasks

    + +
    + ); + } +} + +ReactDOM.render(, document.getElementById('app')); \ No newline at end of file diff --git a/devstaff-api-node/public/index.html b/devstaff-api-node/public/index.html index 13501f0..504b420 100644 --- a/devstaff-api-node/public/index.html +++ b/devstaff-api-node/public/index.html @@ -4,7 +4,6 @@ -
    @@ -12,7 +11,7 @@ - + + - \ No newline at end of file diff --git a/devstaff-api-node/public/index.jsx b/devstaff-api-node/public/index.jsx deleted file mode 100644 index cdca602..0000000 --- a/devstaff-api-node/public/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ - -class App extends React.Component { - - constructor() { - super(); - - this.state = { - tasks: [] - }; - } - - render() { - var tasks = this.state.tasks.map((task) => ( -
  • -
    Date: {task.cdate}
    -
    Title: {task.title}
    -
    Id: {task.id}
    -
    Description {task.desc}
    -
    -
    • - - )); - - return ( -
    -

    My tasks

    -
      {tasks}
    -
    - ); - } - - fetchTasks() { - jQuery.ajax({ - method: 'GET', - url: '/tasks', - success: (tasks) => { - this.setState({ tasks }) - } - }); - } - - componentDidMount() { - this.fetchTasks(); - } -} - -ReactDOM.render(, document.getElementById('app')); \ No newline at end of file diff --git a/devstaff-api-node/public/styles.css b/devstaff-api-node/public/styles.css new file mode 100644 index 0000000..9b91561 --- /dev/null +++ b/devstaff-api-node/public/styles.css @@ -0,0 +1,19 @@ +h1 { + text-align: center; +} + +ul { + list-style: none; + padding: 0; +} + +.task { + background: #eee; + border: 1px solid #ccc; + padding: 5px; + margin-bottom: 5px; +} + +.task .label { + font-weight: bold; +} \ No newline at end of file