Rendering Tasks with React

devstaff-api-node/.babelrc

@@ -0,0 +1,3 @@
+{
+ "presets": ["es2015"]
+}

devstaff-api-node/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "airbnb"
+}

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

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)

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"
   }
 }

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 (
+      <div className="task">
+        <div><span className="label">Date:</span> {task.cdate}</div>
+        <div><span className="label">Title:</span> {task.title}</div>
+        <div><span className="label">Id:</span> {task.id}</div>
+        <div><span className="label">Description</span> {task.desc}</div>
+      </div>
+    );
+  }
+}
+
+class TasksList extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      tasks: [],
+    };
+  }
+
+  render() {
+    const tasks = this.state.tasks.map((task) => (
+      <li key={task.id}><Task task={task} /></li>
+    ));
+
+    return (
+      <div>
+        <ul>{tasks}</ul>
+      </div>
+    );
+  }
+
+  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 (
+      <div>
+        <h1>My tasks</h1>
+        <TasksList />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

devstaff-api-node/public/index.html

@@ -0,0 +1,17 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
+    <script type="text/babel" src="public/App.jsx"></script>
+    <link rel="stylesheet" type="text/css" href="public/styles.css">
+  </body>
+</html>

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;
+}

devstaff-api-node/index.js → 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) {