fixed polling, added vagrant

fullstack101 · Oct 1, 2016 · 8c64e58 · 8c64e58
1 parent 83e1197
commit 8c64e58
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 48 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1 +1,3 @@
-{ "presets": ["es2015"] }
+{
+  "presets": [ "es2015" ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 dist/
 node_modules/
-.vscode/
+.vscode/
+.vagrant/
diff --git a/Vagrantfile b/Vagrantfile
@@ -0,0 +1,24 @@
+# -*- mode: ruby -*-
+# vi: set ft=ruby :
+
+Vagrant.configure("2") do |config|
+  config.vm.box = "minimal/trusty64"
+
+  config.vm.network "forwarded_port", guest: 6701, host: 6701
+
+  config.vm.synced_folder ".", "/todo-app"
+
+  config.vm.provider "virtualbox" do |vb|
+    vb.memory = "1024"
+    vb.customize ["modifyvm", :id, "--usb", "off"]
+    vb.customize ["modifyvm", :id, "--usbehci", "off"]
+  end
+
+  config.vm.provision "shell", inline: <<-SHELL
+    sudo apt-get update
+    sudo apt-get install -y curl
+    curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+    sudo apt-get install -y nodejs
+    sudo apt-get install -y build-essential
+    SHELL
+end
diff --git a/client/app.js b/client/app.js
@@ -1,4 +1,4 @@
-import { todoService } from './service';
+import todoService from './service';
 import createList from './list';
 import createFlash from './flash';
 import renderForm from './form';
@@ -16,7 +16,7 @@ const remove = removeUrl => todoService.remove(removeUrl)
                             .then(flash('removed successfully!'));
 
 const mainLoop = () => todoService.pollChanges()
-                            .then(list)
+                            .then(renderList)
                             .then(mainLoop);
 
 window.actions = { add, remove };

diff --git a/client/flash.js b/client/flash.js
@@ -4,4 +4,4 @@ const createFlash = element => message => {
     setTimeout(() => { element.style.display = "none"; }, 2000);
 };
 
-module.exports = createFlash;
+module.exports = createFlash;
diff --git a/client/form.js b/client/form.js
@@ -1,8 +1,11 @@
-module.exports = element => {
+const renderForm = element => {
     element.innerHTML = `<input id="new-todo" />
         <button onclick="(function () {
             var input = document.getElementById('new-todo');
             actions.add(input.value);
             input.value=null;
-        }())">Submit</button>`;
-};
+            input.focus();
+        }())">Add To-Do</button>`;
+};
+
+module.exports = renderForm;
diff --git a/client/index.html b/client/index.html
@@ -1,6 +1,6 @@
 <body>
     <div id="flash"></div>
-    <div id="todo-list"></div>
     <div id="todo-form"></div>
+    <div id="todo-list"></div>
     <script src="app.js"></script>
-</body>
+</body>
diff --git a/client/service.js b/client/service.js
@@ -1,12 +1,13 @@
 import 'whatwg-fetch';
 
-const apiURL = 'http://localhost:6701';
+const delayPromise = ms => new Promise(y => setTimeout(y, ms)).then(() => console.log("after fail"));
+
 const todoService = {
     list() {
-        return fetch(apiURL + '/list').then(data => data.json());
+        return fetch('/list?').then(data => data.json());
     },
     add(item) {
-        return fetch(apiURL + '/add', {
+        return fetch('/add', {
             method: 'POST',
             body: JSON.stringify(item),
             headers: new Headers({ 'Content-Type' : 'application/json'})
@@ -16,30 +17,15 @@ const todoService = {
         return fetch(removeUrl, { method: 'POST' }).then(data => data.json());
     },
     pollChanges() {
-        return fetch(apiURL + '/poll');
+        return fetch('/poll?', {
+          headers: new Headers({
+            'pragma': 'no-cache',
+            'cache-control': 'no-cache'
+          })
+        })
+          .then(data => data.json())
+          .catch(error => delayPromise(2000));
     }
 };
 
-
-//mock service
-const items = [
-    { text: "item 1" },
-    { text: "item 2" },
-    { text: "get milk" }
-];
-
-const mockService = {
-    list() {
-        return Promise.resolve(items);
-    },
-    add(item) {
-        items.push(item);
-        return Promise.resolve({message: "added successfully"});
-    },
-    remove(index) {
-        items.splice(index, 1);
-        return Promise.resolve({message: "removed successfully"});
-    }
-}
-
-module.exports = { todoService, mockService };
+module.exports = todoService;
diff --git a/gulpfile.js b/gulpfile.js
@@ -7,7 +7,7 @@ gulp.task('default', () => {
   return gulp.src('client/*.js')
     .pipe(sourcemaps.init())
     .pipe(babel({
-      presets: ['es2015']
+      "presets": [ "es2015" ]
     }))
     .pipe(sourcemaps.write())
     .pipe(gulp.dest('dist/tmp'))

diff --git a/package.json b/package.json
@@ -9,15 +9,17 @@
   "author": "Mihail Mikov",
   "license": "ISC",
   "devDependencies": {
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
     "babel-preset-es2015": "^6.14.0",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
-    "gulp-browserify": "^0.5.1"
+    "gulp-browserify": "^0.5.1",
+    "gulp-sourcemaps": "^1.6.0"
   },
   "dependencies": {
     "body-parser": "^1.15.2",
     "express": "^4.14.0",
-    "gulp-sourcemaps": "^1.6.0",
     "uuid-v4": "^0.1.0",
     "whatwg-fetch": "^1.0.0"
   }

diff --git a/server/polling.js b/server/polling.js
@@ -1,11 +1,20 @@
+'use strict';
+
 const polling = new Set();
 
 module.exports = {
     subscribe(callback) {
         polling.add(callback);
-        return () => polling.delete(callback);
+        return () => {
+          callback.DONE = true;
+        };
     },
     publish(message) {
-      polling.forEach(cb => cb(message));
+      polling.forEach(cb => {
+        if (cb.DONE !== true) {
+          cb(message);
+        }
+      });
+      polling.clear();
     }
 };
diff --git a/server/server.js b/server/server.js
@@ -14,6 +14,11 @@ const polling = require('./polling');
 
 const app = express();
 
+const listWithActions = () => todos.list().map(item => {
+  item.removeUrl = `/remove/${item.id}`;
+  return item;
+});
+
 app.use(bodyparser.json());
 
 app.use((req, res, next) => {
@@ -31,10 +36,7 @@ app.get('/app.js', (req, res) => {
 });
 
 app.get('/list', (req, res) => {
-    res.json(todos.list().map(item => {
-      item.removeUrl = `/remove/${item.id}`;
-      return item;
-    }));
+    res.json(listWithActions());
 });
 
 app.get('/poll', (req, res) => {
@@ -47,16 +49,16 @@ app.post('/add', (req, res) => {
     const item = { text: req.body.text };
     const message = { message: "added successfully" };
     todos.add(item);
-    polling.publish(message);
     res.json(message);
+    polling.publish(listWithActions());
 });
 
 app.post('/remove/:id', (req, res) => {
     const id = req.params.id;
     const message = { message: "removed successfully" };
     todos.remove(id);
-    polling.publish(message);
     res.json(message);
+    polling.publish(listWithActions());
 });
 
 app.listen(6701);