mock http api

Author: kildem

buildScripts/generateMockData.js

@@ -0,0 +1,22 @@
+/* This script generates mock data for local development.
+ This way you don't have to point to an actual API,
+ but you can enjoy realistic, but randomized data,
+ and rapid page loads due to local, static data.
+ */
+
+/* eslint-disable no-console */
+
+import jsf from 'json-schema-faker';
+import {schema} from './mockDataSchema';
+import fs from 'fs';
+import chalk from 'chalk';
+
+const json = JSON.stringify(jsf(schema));
+
+fs.writeFile("./src/api/db.json", json, function (err) {
+	if (err) {
+		return console.log(chalk.red(err));
+	} else {
+		console.log(chalk.green("Mock data generated."));
+	}
+});

buildScripts/mockDataSchema.js

@@ -0,0 +1,34 @@
+export const schema = {
+	"type": "object",
+	"properties": {
+		"users": {
+			"type": "array",
+			"minItems": 3,
+			"maxItems": 5,
+			"items": {
+				"type": "object",
+				"properties": {
+					"id": {
+						"type": "number",
+						"unique": true,
+						"minimum": 1
+					},
+					"firstName": {
+						"type": "string",
+						"faker": "name.firstName"
+					},
+					"lastName": {
+						"type": "string",
+						"faker": "name.lastName",
+					},
+					"email": {
+						"type": "string",
+						"faker": "internet.email",
+					}
+				},
+				required: ['id', 'firstName', 'lastName', 'email']
+			}
+		}
+	},
+	required: ['users']
+};

buildScripts/srcServer.js

@@ -18,6 +18,15 @@ app.get('/', function (req, res) {
 	res.sendFile(path.join(__dirname, '../src/index.html'));
 });
 
+app.get('/users', function (req,res) {
+	// Hard coding for simplicity. Pretend this hits a real database
+	res.json([
+		{"id": 1, "firstName":"Bob","lastName":"Smith","email":"bob@gmail.com"},
+		{"id": 2, "firstName":"Tammy","lastName":"Norton","email":"tnorton@yahoo.com"},
+		{"id": 3, "firstName":"Tina","lastName":"Lee","email":"lee.tina@gmail.com"}
+	])
+});
+
 app.listen(port, function (err) {
 	if (err) {
 		console.log(err);

package.json

@@ -4,20 +4,23 @@
   "description": "JavaScript development environment",
   "scripts": {
     "prestart": "babel-node buildScripts/startMessage.js",
-    "start": "npm-run-all --parallel security-check open:src lint:watch test:watch",
+    "start": "npm-run-all --parallel security-check open:src lint:watch test:watch start-mockapi",
     "open:src": "babel-node buildScripts/srcServer.js",
     "lint": "esw webpack.config.*, src, buildScripts --color",
     "lint:watch": "npm run lint -- --watch",
     "security-check": "nsp check",
     "localtunnel": "lt --port 3000",
     "share": "npm-run-all --parallel open:src localtunnel",
     "test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"",
-    "test:watch": "npm run test -- --watch"
+    "test:watch": "npm run test -- --watch",
+    "generate-mock-data": "babel-node buildScripts/generateMockData",
+    "prestart-mockapi": "npm run generate-mock-data",
+    "start-mockapi": "json-server --watch src/api/db.json --port 3001"
   },
   "author": "kildem",
   "license": "MIT",
   "dependencies": {
-    "whatwg-fetch": "1.0.0"
+    "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
     "babel-cli": "^6.24.0",

src/api/baseUrl.js

@@ -0,0 +1,15 @@
+export default function getBaseUrl() {
+	const inDevelopment = window.location.hostname === 'localhost';
+	return inDevelopment ? 'http://localhost:3001/' : '/';
+	//return getQueryStringParameterByName('useMockApi') ? 'http://localhost:3001/' : 'https://mysterious-dawn-16770.herokuapp.com/';
+}
+
+function getQueryStringParameterByName(name, url) {
+	if (!url) url = window.location.href;
+	name = name.replace(/[\[\]]/g, "\\$&");
+	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+		results = regex.exec(url);
+	if (!results) return null;
+	if (!results[2]) return '';
+	return decodeURIComponent(results[2].replace(/\+/g, " "));
+}

src/api/db.json

@@ -0,0 +1,10 @@
+{
+  "users": [
+    {
+      "id": 55379073,
+      "firstName": "Einar",
+      "lastName": "Sawayn",
+      "email": "Jesse_Spinka@gmail.com"
+    }
+  ]
+}

src/api/userApi.js

@@ -0,0 +1,32 @@
+import 'whatwg-fetch';
+import getBaseUrl from './baseUrl';
+
+const baseUrl = getBaseUrl();
+
+export function getUsers() {
+	return get('users');
+}
+
+export function deleteUser(id) {
+	return del(`users/${id}`);
+}
+
+function get(url) {
+	return fetch(baseUrl + url).then(onSuccess, onError);
+}
+
+// Can't call func delete since reserved word.
+function del(url) {
+	const request = new Request(baseUrl + url, {
+		method: 'DELETE'
+	});
+	return fetch(request).then(onSuccess, onError);
+}
+
+function onSuccess(resp) {
+	return resp.json();
+}
+
+function onError(error) {
+	console.log(error); // eslint-disable-line no-console
+}

src/index.html

@@ -5,7 +5,17 @@
     <title>Title</title>
 </head>
 <body>
-    <h1>Hello!</h1>
+    <h1>Users</h1>
+    <table>
+        <thead>
+        <th>&nbsp;</th>
+        <th>Id</th>
+        <th>First Name</th>
+        <th>Last Name</th>
+        <th>Email</th>
+        </thead>
+        <tbody id="users"></tbody>
+    </table>
     <script src="bundle.js"></script>
 </body>
 </html>

src/index.js

@@ -1,6 +1,33 @@
-import numeral from 'numeral';
 import './index.css';
+import {getUsers, deleteUser} from './api/userApi';
 
-const courseValue = numeral(1000).format('$0,0.00');
-debugger;
-console.log(`I would pay ${courseValue} for this awesom course!`);
+// Populate table of users via API call.
+getUsers().then(result => {
+	let usersBody = "";
+	
+	result.forEach(user => {
+		usersBody+= `<tr>
+      <td><a href="#" data-id="${user.id}" class="deleteUser">Delete</a></td>
+      <td>${user.id}</td>
+      <td>${user.firstName}</td>
+      <td>${user.lastName}</td>
+      <td>${user.email}</td>
+      </tr>`
+	});
+	global.document.getElementById('users').innerHTML = usersBody;
+	
+	const deleteLinks = global.document.getElementsByClassName('deleteUser');
+	
+	// Must use array.from to create a real array from a DOM collection
+	// getElementsByClassname only returns an "array like" object
+	Array.from(deleteLinks, link => {
+		link.onclick = function(event) {
+			const element = event.target;
+			event.preventDefault();
+			deleteUser(element.attributes["data-id"].value);
+			const row = element.parentNode.parentNode;
+			row.parentNode.removeChild(row);
+		};
+	});
+	
+});

src/index.test.js

@@ -9,11 +9,11 @@ describe('test', () => {
 });
 
 describe('index.html', () => {
-	it('shouldj say hello', (done) => {
+	it('should have h1 says Users', (done) => {
 		const index = fs.readFileSync('./src/index.html', 'utf-8');
 		jsdom.env(index, function (err, window) {
 			const h1 = window.document.getElementsByTagName('h1')[0];
-			expect(h1.innerHTML).to.equal("Hello!");
+			expect(h1.innerHTML).to.equal("Users");
 			done();
 			window.close();
 		})