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/.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/.gitignore b/devstaff-api-node/.gitignore index b976608..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 ### @@ -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/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 0609295..0a6e77f 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,16 @@ "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", + "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 ( +
    + +
    + ); + } + + 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 new file mode 100644 index 0000000..504b420 --- /dev/null +++ b/devstaff-api-node/public/index.html @@ -0,0 +1,17 @@ + + + + + + + +
    + + + + + + + + + \ 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 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) {