From 06ffe06f24fe1d27021c0d0bece780169e89a405 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Sun, 7 Feb 2016 13:33:24 -0300 Subject: [PATCH 1/9] [Ivan Diaz] - #8 - Require jquery mockjax --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 96a8b771..074ce4b5 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "gulp-util": "^3.0.6", "humps": "^0.6.0", "jest-cli": "^0.5.10", + "jquery-mockjax": "^2.1.0", "morgan": "^1.6.1", "run-sequence": "^1.1.1", "vinyl-source-stream": "^1.1.0", From 1df686b3a18b5608d164971db629a56f46f3af73 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Wed, 10 Feb 2016 14:35:23 -0300 Subject: [PATCH 2/9] [Ivan Diaz] - #8 - Add fixture files --- src/data/fixtures/user-fixtures.js | 0 src/lib/fixtures-loader.js | 5 +++++ 2 files changed, 5 insertions(+) create mode 100644 src/data/fixtures/user-fixtures.js create mode 100644 src/lib/fixtures-loader.js diff --git a/src/data/fixtures/user-fixtures.js b/src/data/fixtures/user-fixtures.js new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/fixtures-loader.js b/src/lib/fixtures-loader.js new file mode 100644 index 00000000..563f30af --- /dev/null +++ b/src/lib/fixtures-loader.js @@ -0,0 +1,5 @@ +const $ = require('jquery'); +const mockjax = require('jquery-mockjax')($, window); + +// FIXTURES +const From dc08b8f9247c0bed8a6cd575dfea3fbc4032994a Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Wed, 10 Feb 2016 18:35:14 -0300 Subject: [PATCH 3/9] [Ivan Diaz] - #8 - Update fixture structure [skip ci] --- src/app/index.js | 8 ++++++++ src/data/fixtures/user-fixtures.js | 10 ++++++++++ src/lib/fixtures-loader.js | 26 +++++++++++++++++++++++++- 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/src/app/index.js b/src/app/index.js index a3ed6c9c..13c3767b 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -9,4 +9,12 @@ if ( process.env.NODE_ENV !== 'production' ) { window.React = React; } +//TODO: Add env variable to determinate if it should use fixtures +/* +if ( process.env.API !== 'production' ) { + // Mock API calls + require('lib/fixtures/fixtures-loader'); +} +*/ + render(routes, document.getElementById('app')); diff --git a/src/data/fixtures/user-fixtures.js b/src/data/fixtures/user-fixtures.js index e69de29b..4ad43668 100644 --- a/src/data/fixtures/user-fixtures.js +++ b/src/data/fixtures/user-fixtures.js @@ -0,0 +1,10 @@ +module.exports = [ + { + path: 'user/login', + time: 1000, + response: { + 'userid': 12, + 'token': 'CUSTOM_VALUE' + } + } +]; diff --git a/src/lib/fixtures-loader.js b/src/lib/fixtures-loader.js index 563f30af..45c242b2 100644 --- a/src/lib/fixtures-loader.js +++ b/src/lib/fixtures-loader.js @@ -1,5 +1,29 @@ +const _ = require('lodash'); const $ = require('jquery'); const mockjax = require('jquery-mockjax')($, window); +let fixtures = (function () { + let fixturesData = []; + + return { + add(fixtures) { + fixturesData.concat(fixtures); + }, + getAll() { + return fixturesData; + } + } +})(); + // FIXTURES -const +fixtures.add(require('data/fixtures/user-fixtures')); + +_.each(fixtures.getAll(), function (fixture) { + //ADD FIXTURE TO MOCKJAX + mockjax({ + contentType: 'application/json', + url: fixture.path, + responseTime: fixture.time || 500, + responseText: JSON.fixture.response + }); +}); From c075451018916ac57c12d118b8f47439bf8693a9 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Wed, 10 Feb 2016 21:48:41 -0300 Subject: [PATCH 4/9] [Ivan Diaz] - #8 - Create lib-app, standarize fixtures, add --api option to gulp [skip ci] --- gulp/tasks/browserSync.js | 3 ++- gulp/tasks/browserify.js | 6 ++++++ package.json | 3 ++- src/app/index.js | 13 +++++-------- src/app/main/main-layout-header.js | 2 +- src/core-components/button.js | 2 +- src/core-components/checkbox.js | 4 ++-- src/core-components/drop-down.js | 2 +- src/core-components/form.js | 2 +- src/data/fixtures/user-fixtures.js | 4 ++-- src/lib-app/api-call.js | 22 ++++++++++++++++++++++ src/{lib => lib-app}/fixtures-loader.js | 8 +++++--- src/{lib => lib-app}/i18n.js | 0 src/{lib => lib-core}/APIUtils.js | 9 +++------ src/{lib => lib-core}/callback.js | 0 src/{lib => lib-core}/get-icon.js | 0 src/{lib => lib-core}/react-dfs.js | 0 src/{lib => lib-core}/route-transition.js | 0 src/stores/user-store.js | 12 +++++++----- 19 files changed, 60 insertions(+), 32 deletions(-) create mode 100644 src/lib-app/api-call.js rename src/{lib => lib-app}/fixtures-loader.js (73%) rename src/{lib => lib-app}/i18n.js (100%) rename src/{lib => lib-core}/APIUtils.js (86%) rename src/{lib => lib-core}/callback.js (100%) rename src/{lib => lib-core}/get-icon.js (100%) rename src/{lib => lib-core}/react-dfs.js (100%) rename src/{lib => lib-core}/route-transition.js (100%) diff --git a/gulp/tasks/browserSync.js b/gulp/tasks/browserSync.js index 69046d3e..5a2ed387 100644 --- a/gulp/tasks/browserSync.js +++ b/gulp/tasks/browserSync.js @@ -7,7 +7,8 @@ var gulp = require('gulp'); gulp.task('browserSync', function() { browserSync({ - proxy: 'localhost:' + config.serverport + proxy: 'localhost:' + config.serverport, + startPath: 'app' }); }); \ No newline at end of file diff --git a/gulp/tasks/browserify.js b/gulp/tasks/browserify.js index e28b8f93..c63e19fa 100644 --- a/gulp/tasks/browserify.js +++ b/gulp/tasks/browserify.js @@ -15,6 +15,7 @@ var browserSync = require('browser-sync'); var debowerify = require('debowerify'); var handleErrors = require('../util/handle-errors'); var config = require('../config'); +var util = require('gulp-util'); // Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/ function buildScript(file, watch) { @@ -22,6 +23,11 @@ function buildScript(file, watch) { var bundler = browserify({ entries: [config.sourceDir + 'app/' + file], debug: !global.isProd, + insertGlobalVars: { + fixturesEnabled: function() { + return (util.env.api) ? "'enabled'" : "'disabled'"; + } + }, cache: {}, packageCache: {}, fullPaths: true diff --git a/package.json b/package.json index 074ce4b5..97366c3e 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,8 @@ "react-google-recaptcha": "^0.5.2", "react-motion": "^0.3.0", "react-router": "^2.0.0-rc5", - "reflux": "^0.2.9" + "reflux": "^0.2.9", + "sessionstorage": "0.0.1" }, "jest": { "scriptPreprocessor": "./preprocessor.js", diff --git a/src/app/index.js b/src/app/index.js index 13c3767b..a9ee8057 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -5,16 +5,13 @@ import Router from 'react-router'; import routes from './Routes'; if ( process.env.NODE_ENV !== 'production' ) { - // Enable React devtools - window.React = React; + // Enable React devtools + window.React = React; } -//TODO: Add env variable to determinate if it should use fixtures -/* -if ( process.env.API !== 'production' ) { - // Mock API calls - require('lib/fixtures/fixtures-loader'); +//TODO: This should be optional via gulp like: "gulp dev --no-fixtures" +if (fixturesEnabled === 'disabled') { + require('lib-app/fixtures-loader'); } -*/ render(routes, document.getElementById('app')); diff --git a/src/app/main/main-layout-header.js b/src/app/main/main-layout-header.js index c1be8026..ba54472b 100644 --- a/src/app/main/main-layout-header.js +++ b/src/app/main/main-layout-header.js @@ -1,6 +1,6 @@ import React from 'react'; -import i18n from 'lib/i18n'; +import i18n from 'lib-app/i18n'; import CommonActions from 'actions/common-actions'; import Button from 'core-components/button'; diff --git a/src/core-components/button.js b/src/core-components/button.js index 1884cf6b..0322eab7 100644 --- a/src/core-components/button.js +++ b/src/core-components/button.js @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import Router from 'react-router'; -import callback from 'lib/callback'; +import callback from 'lib-core/callback'; let Button = React.createClass({ diff --git a/src/core-components/checkbox.js b/src/core-components/checkbox.js index 1bfff8c4..48f775a2 100644 --- a/src/core-components/checkbox.js +++ b/src/core-components/checkbox.js @@ -2,8 +2,8 @@ import React from 'react'; import classNames from 'classnames'; import _ from 'lodash'; -import callback from 'lib/callback'; -import getIcon from 'lib/get-icon'; +import callback from 'lib-core/callback'; +import getIcon from 'lib-core/get-icon'; let CheckBox = React.createClass({ diff --git a/src/core-components/drop-down.js b/src/core-components/drop-down.js index db276b1f..53f63c57 100644 --- a/src/core-components/drop-down.js +++ b/src/core-components/drop-down.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import _ from 'lodash'; import {Motion, spring} from 'react-motion'; -import callback from 'lib/callback'; +import callback from 'lib-core/callback'; let DropDown = React.createClass({ diff --git a/src/core-components/form.js b/src/core-components/form.js index c1b65fe0..a407602e 100644 --- a/src/core-components/form.js +++ b/src/core-components/form.js @@ -1,7 +1,7 @@ import React from 'react'; import _ from 'lodash'; -import {reactDFS, renderChildrenWithProps} from 'lib/react-dfs'; +import {reactDFS, renderChildrenWithProps} from 'lib-core/react-dfs'; import Input from 'core-components/input'; import Checkbox from 'core-components/checkbox'; diff --git a/src/data/fixtures/user-fixtures.js b/src/data/fixtures/user-fixtures.js index 4ad43668..b280ec80 100644 --- a/src/data/fixtures/user-fixtures.js +++ b/src/data/fixtures/user-fixtures.js @@ -3,8 +3,8 @@ module.exports = [ path: 'user/login', time: 1000, response: { - 'userid': 12, - 'token': 'CUSTOM_VALUE' + 'userId': 12, + 'token': 'cc6b4921e6733d6aafe284ec0d7be57e' } } ]; diff --git a/src/lib-app/api-call.js b/src/lib-app/api-call.js new file mode 100644 index 00000000..a2885b08 --- /dev/null +++ b/src/lib-app/api-call.js @@ -0,0 +1,22 @@ +const _ = require('lodash'); +const APIUtils = require('lib-core/APIUtils'); +const SessionStorage = require('sessionstorage'); + +const root = 'http://localhost:3000/api/'; + +function processData (data) { + return _.extend({ + userId: SessionStorage.getItem('userId'), + token: SessionStorage.getItem('token') + }, data); +} + +module.exports = { + call: function (path, data, callback) { + APIUtils.post(root + path, processData(data)).then(callback); + }, + setConfig: function (userId, token) { + SessionStorage.setItem('userId', userId); + SessionStorage.setItem('token', token); + } +}; \ No newline at end of file diff --git a/src/lib/fixtures-loader.js b/src/lib-app/fixtures-loader.js similarity index 73% rename from src/lib/fixtures-loader.js rename to src/lib-app/fixtures-loader.js index 45c242b2..3d07f8b7 100644 --- a/src/lib/fixtures-loader.js +++ b/src/lib-app/fixtures-loader.js @@ -7,7 +7,9 @@ let fixtures = (function () { return { add(fixtures) { - fixturesData.concat(fixtures); + fixtures.forEach((fixture) => { + fixturesData.push(fixture); + }); }, getAll() { return fixturesData; @@ -22,8 +24,8 @@ _.each(fixtures.getAll(), function (fixture) { //ADD FIXTURE TO MOCKJAX mockjax({ contentType: 'application/json', - url: fixture.path, + url: 'http://localhost:3000/api/' + fixture.path, responseTime: fixture.time || 500, - responseText: JSON.fixture.response + responseText: fixture.response }); }); diff --git a/src/lib/i18n.js b/src/lib-app/i18n.js similarity index 100% rename from src/lib/i18n.js rename to src/lib-app/i18n.js diff --git a/src/lib/APIUtils.js b/src/lib-core/APIUtils.js similarity index 86% rename from src/lib/APIUtils.js rename to src/lib-core/APIUtils.js index d8d5350e..2ba05eea 100644 --- a/src/lib/APIUtils.js +++ b/src/lib-core/APIUtils.js @@ -1,15 +1,12 @@ -'use strict'; - -import $ from 'jquery'; +const _ = require('lodash'); +const $ = require('jquery'); const APIUtils = { - root: 'http://localhost:3000/api/', - getPromise(path, method, data) { return (resolve, reject) => { $.ajax({ - url: this.root + path, + url: path, method: method, data: data, dataType: 'json' diff --git a/src/lib/callback.js b/src/lib-core/callback.js similarity index 100% rename from src/lib/callback.js rename to src/lib-core/callback.js diff --git a/src/lib/get-icon.js b/src/lib-core/get-icon.js similarity index 100% rename from src/lib/get-icon.js rename to src/lib-core/get-icon.js diff --git a/src/lib/react-dfs.js b/src/lib-core/react-dfs.js similarity index 100% rename from src/lib/react-dfs.js rename to src/lib-core/react-dfs.js diff --git a/src/lib/route-transition.js b/src/lib-core/route-transition.js similarity index 100% rename from src/lib/route-transition.js rename to src/lib-core/route-transition.js diff --git a/src/stores/user-store.js b/src/stores/user-store.js index c5f3227c..ffea77b7 100644 --- a/src/stores/user-store.js +++ b/src/stores/user-store.js @@ -1,7 +1,7 @@ -import Reflux from 'reflux'; -import APIUtils from 'lib/APIUtils'; +const Reflux = require('reflux'); +const API = require('lib-app/api-call'); -import UserActions from 'actions/user-actions'; +const UserActions = require('actions/user-actions'); let UserStore = Reflux.createStore({ @@ -15,8 +15,10 @@ let UserStore = Reflux.createStore({ }, loginUser(loginData) { - APIUtils.post('user/login', loginData).then(result => { - console.log(result); + API.call('user/login', loginData, result => { + console.log(result); + + API.setConfig(result.userId, result.token); }); } }); From ef6e6c90eff1d307c93228b99e5f1cb8ae905bfa Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Wed, 10 Feb 2016 22:46:35 -0300 Subject: [PATCH 5/9] [Ivan Diaz] - #8 - Code clean ups [skip ci] --- gulp/tasks/browserify.js | 4 ++-- src/app/index.js | 3 +-- src/lib-app/fixtures-loader.js | 1 - 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/gulp/tasks/browserify.js b/gulp/tasks/browserify.js index c63e19fa..949f0761 100644 --- a/gulp/tasks/browserify.js +++ b/gulp/tasks/browserify.js @@ -24,8 +24,8 @@ function buildScript(file, watch) { entries: [config.sourceDir + 'app/' + file], debug: !global.isProd, insertGlobalVars: { - fixturesEnabled: function() { - return (util.env.api) ? "'enabled'" : "'disabled'"; + noFixtures: function() { + return (util.env['api']) ? "'enabled'" : "'disabled'"; } }, cache: {}, diff --git a/src/app/index.js b/src/app/index.js index a9ee8057..7a01f3da 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -9,8 +9,7 @@ if ( process.env.NODE_ENV !== 'production' ) { window.React = React; } -//TODO: This should be optional via gulp like: "gulp dev --no-fixtures" -if (fixturesEnabled === 'disabled') { +if (noFixtures === 'disabled') { require('lib-app/fixtures-loader'); } diff --git a/src/lib-app/fixtures-loader.js b/src/lib-app/fixtures-loader.js index 3d07f8b7..4f2ae3bd 100644 --- a/src/lib-app/fixtures-loader.js +++ b/src/lib-app/fixtures-loader.js @@ -21,7 +21,6 @@ let fixtures = (function () { fixtures.add(require('data/fixtures/user-fixtures')); _.each(fixtures.getAll(), function (fixture) { - //ADD FIXTURE TO MOCKJAX mockjax({ contentType: 'application/json', url: 'http://localhost:3000/api/' + fixture.path, From 02394079be7b39f169893eaa7674fd7d8287461c Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Wed, 10 Feb 2016 23:38:18 -0300 Subject: [PATCH 6/9] [Ivan Diaz] - #8 - Update readme [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3e3d5131..32ab05bc 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ OpenSupports v4.0 8. Run `gulp dev` 9. Go to the main app: `http://localhost:3000/app` or the component demo `http://localhost:3000/demo` 10. Your browser will automatically be opened and directed to the browser-sync proxy address +12. Use `gulp dev --api` to disable fixtures and use the real php server api (it must be running). Now that `gulp dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/src` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address. From 3c56dbbcb7795716ca1e836767ccad01fd82b39b Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Thu, 11 Feb 2016 15:32:59 -0300 Subject: [PATCH 7/9] [Ivan Diaz] - #8 - Replace tab character with 4 spaces [skip ci] --- src/stores/user-store.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/stores/user-store.js b/src/stores/user-store.js index ffea77b7..200c2ed7 100644 --- a/src/stores/user-store.js +++ b/src/stores/user-store.js @@ -3,24 +3,24 @@ const API = require('lib-app/api-call'); const UserActions = require('actions/user-actions'); -let UserStore = Reflux.createStore({ +const UserStore = Reflux.createStore({ - init() { - this.user = null; - this.hasBeenChecked = false; + init() { + this.user = null; + this.hasBeenChecked = false; - this.listenTo(UserActions.checkLoginStatus, this.checkLoginStatus); - this.listenTo(UserActions.login, this.loginUser); - this.listenTo(UserActions.logout, this.logoutUser); - }, + this.listenTo(UserActions.checkLoginStatus, this.checkLoginStatus); + this.listenTo(UserActions.login, this.loginUser); + this.listenTo(UserActions.logout, this.logoutUser); + }, loginUser(loginData) { - API.call('user/login', loginData, result => { - console.log(result); + API.call('user/login', loginData, result => { + console.log(result); - API.setConfig(result.userId, result.token); + API.setConfig(result.userId, result.token); }); - } + } }); export default UserStore; \ No newline at end of file From 2aceef847c5c5b64ca527ba9b705362ea035adb2 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Thu, 11 Feb 2016 20:22:55 -0300 Subject: [PATCH 8/9] [Ivan Diaz] - #8 - Change response to be function [skip ci] --- src/data/fixtures/user-fixtures.js | 22 +++++++++++++++++++--- src/lib-app/fixtures-loader.js | 8 ++++---- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/data/fixtures/user-fixtures.js b/src/data/fixtures/user-fixtures.js index b280ec80..96ca73d2 100644 --- a/src/data/fixtures/user-fixtures.js +++ b/src/data/fixtures/user-fixtures.js @@ -2,9 +2,25 @@ module.exports = [ { path: 'user/login', time: 1000, - response: { - 'userId': 12, - 'token': 'cc6b4921e6733d6aafe284ec0d7be57e' + response: function (data) { + let response; + + if (data.password === 'invalid') { + response = { + status: 'fail', + message: 'Invalid Credientals' + }; + } else { + response = { + status: 'success', + data: { + 'userId': 12, + 'token': 'cc6b4921e6733d6aafe284ec0d7be57e' + } + } + } + + return response; } } ]; diff --git a/src/lib-app/fixtures-loader.js b/src/lib-app/fixtures-loader.js index 4f2ae3bd..76856ec0 100644 --- a/src/lib-app/fixtures-loader.js +++ b/src/lib-app/fixtures-loader.js @@ -7,9 +7,7 @@ let fixtures = (function () { return { add(fixtures) { - fixtures.forEach((fixture) => { - fixturesData.push(fixture); - }); + fixturesData = fixturesData.concat(fixtures); }, getAll() { return fixturesData; @@ -25,6 +23,8 @@ _.each(fixtures.getAll(), function (fixture) { contentType: 'application/json', url: 'http://localhost:3000/api/' + fixture.path, responseTime: fixture.time || 500, - responseText: fixture.response + response: function (settings) { + this.responseText = fixture.response(settings.data) + } }); }); From 3b67322b80dc300988dbd80a870d510598ec026f Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Thu, 11 Feb 2016 20:29:06 -0300 Subject: [PATCH 9/9] [Ivan Diaz] - #8 - Add missing semicolon [skip ci] --- src/data/fixtures/user-fixtures.js | 2 +- src/lib-app/fixtures-loader.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/data/fixtures/user-fixtures.js b/src/data/fixtures/user-fixtures.js index 96ca73d2..cba6af7e 100644 --- a/src/data/fixtures/user-fixtures.js +++ b/src/data/fixtures/user-fixtures.js @@ -17,7 +17,7 @@ module.exports = [ 'userId': 12, 'token': 'cc6b4921e6733d6aafe284ec0d7be57e' } - } + }; } return response; diff --git a/src/lib-app/fixtures-loader.js b/src/lib-app/fixtures-loader.js index 76856ec0..fe8b9fc3 100644 --- a/src/lib-app/fixtures-loader.js +++ b/src/lib-app/fixtures-loader.js @@ -12,7 +12,7 @@ let fixtures = (function () { getAll() { return fixturesData; } - } + }; })(); // FIXTURES @@ -24,7 +24,7 @@ _.each(fixtures.getAll(), function (fixture) { url: 'http://localhost:3000/api/' + fixture.path, responseTime: fixture.time || 500, response: function (settings) { - this.responseText = fixture.response(settings.data) + this.responseText = fixture.response(settings.data); } }); });