[Ivan Diaz] - #8 - Create lib-app, standarize fixtures, add --api option to gulp [skip ci]

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

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

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

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

@@ -3,8 +3,8 @@ module.exports = [
         path: 'user/login',
         time: 1000,
         response: {
-            'userid': 12,
-            'token': 'CUSTOM_VALUE'
+            'userId': 12,
+            'token': 'cc6b4921e6733d6aafe284ec0d7be57e'
         }
     }
 ];

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

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

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