Merged in 8-frontend-api-mock (pull request #5)

#8 - Agregar API mock en frontend

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.
 

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'
   });
 
 });

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: {
+      noFixtures: function() {
+        return (util.env['api']) ? "'enabled'" : "'disabled'";
+      }
+    },
     cache: {},
     packageCache: {},
     fullPaths: true

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",
@@ -56,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",

src/app/index.js

@@ -5,8 +5,12 @@ 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;
+}
+
+if (noFixtures === 'disabled') {
+    require('lib-app/fixtures-loader');
 }
 
 render(routes, document.getElementById('app'));

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';

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({
 

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({
 

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({
 

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';

src/data/fixtures/user-fixtures.js

@@ -0,0 +1,26 @@
+module.exports = [
+    {
+        path: 'user/login',
+        time: 1000,
+        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;
+        }
+    }
+];

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

src/lib-app/fixtures-loader.js

@@ -0,0 +1,30 @@
+const _ = require('lodash');
+const $ = require('jquery');
+const mockjax = require('jquery-mockjax')($, window);
+
+let fixtures = (function () {
+    let fixturesData = [];
+
+    return {
+        add(fixtures) {
+            fixturesData = fixturesData.concat(fixtures);
+        },
+        getAll() {
+            return fixturesData;
+        }
+    };
+})();
+
+// FIXTURES
+fixtures.add(require('data/fixtures/user-fixtures'));
+
+_.each(fixtures.getAll(), function (fixture) {
+    mockjax({
+        contentType: 'application/json',
+        url: 'http://localhost:3000/api/' + fixture.path,
+        responseTime: fixture.time || 500,
+        response: function (settings) {
+            this.responseText = fixture.response(settings.data);
+        }
+    });
+});

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'

src/stores/user-store.js

@@ -1,24 +1,26 @@
-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({
+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) {
-        APIUtils.post('user/login', loginData).then(result => {
+        API.call('user/login', loginData, result => {
             console.log(result);
+
+            API.setConfig(result.userId, result.token);
         });
-	}
+    }
 });
 
 export default UserStore;