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

 - Agregar API mock en frontend
This commit is contained in:
Ivan Diaz 2016-02-11 20:35:28 -03:00
commit 1117250ba6
20 changed files with 120 additions and 29 deletions

View File

@ -18,6 +18,7 @@ OpenSupports v4.0
8. Run `gulp dev` 8. Run `gulp dev`
9. Go to the main app: `http://localhost:3000/app` or the component demo `http://localhost:3000/demo` 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 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. 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.

View File

@ -7,7 +7,8 @@ var gulp = require('gulp');
gulp.task('browserSync', function() { gulp.task('browserSync', function() {
browserSync({ browserSync({
proxy: 'localhost:' + config.serverport proxy: 'localhost:' + config.serverport,
startPath: 'app'
}); });
}); });

View File

@ -15,6 +15,7 @@ var browserSync = require('browser-sync');
var debowerify = require('debowerify'); var debowerify = require('debowerify');
var handleErrors = require('../util/handle-errors'); var handleErrors = require('../util/handle-errors');
var config = require('../config'); 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/ // Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
function buildScript(file, watch) { function buildScript(file, watch) {
@ -22,6 +23,11 @@ function buildScript(file, watch) {
var bundler = browserify({ var bundler = browserify({
entries: [config.sourceDir + 'app/' + file], entries: [config.sourceDir + 'app/' + file],
debug: !global.isProd, debug: !global.isProd,
insertGlobalVars: {
noFixtures: function() {
return (util.env['api']) ? "'enabled'" : "'disabled'";
}
},
cache: {}, cache: {},
packageCache: {}, packageCache: {},
fullPaths: true fullPaths: true

View File

@ -39,6 +39,7 @@
"gulp-util": "^3.0.6", "gulp-util": "^3.0.6",
"humps": "^0.6.0", "humps": "^0.6.0",
"jest-cli": "^0.5.10", "jest-cli": "^0.5.10",
"jquery-mockjax": "^2.1.0",
"morgan": "^1.6.1", "morgan": "^1.6.1",
"run-sequence": "^1.1.1", "run-sequence": "^1.1.1",
"vinyl-source-stream": "^1.1.0", "vinyl-source-stream": "^1.1.0",
@ -56,7 +57,8 @@
"react-google-recaptcha": "^0.5.2", "react-google-recaptcha": "^0.5.2",
"react-motion": "^0.3.0", "react-motion": "^0.3.0",
"react-router": "^2.0.0-rc5", "react-router": "^2.0.0-rc5",
"reflux": "^0.2.9" "reflux": "^0.2.9",
"sessionstorage": "0.0.1"
}, },
"jest": { "jest": {
"scriptPreprocessor": "./preprocessor.js", "scriptPreprocessor": "./preprocessor.js",

View File

@ -5,8 +5,12 @@ import Router from 'react-router';
import routes from './Routes'; import routes from './Routes';
if ( process.env.NODE_ENV !== 'production' ) { if ( process.env.NODE_ENV !== 'production' ) {
// Enable React devtools // Enable React devtools
window.React = React; window.React = React;
}
if (noFixtures === 'disabled') {
require('lib-app/fixtures-loader');
} }
render(routes, document.getElementById('app')); render(routes, document.getElementById('app'));

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import i18n from 'lib/i18n'; import i18n from 'lib-app/i18n';
import CommonActions from 'actions/common-actions'; import CommonActions from 'actions/common-actions';
import Button from 'core-components/button'; import Button from 'core-components/button';

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import Router from 'react-router'; import Router from 'react-router';
import callback from 'lib/callback'; import callback from 'lib-core/callback';
let Button = React.createClass({ let Button = React.createClass({

View File

@ -2,8 +2,8 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import callback from 'lib/callback'; import callback from 'lib-core/callback';
import getIcon from 'lib/get-icon'; import getIcon from 'lib-core/get-icon';
let CheckBox = React.createClass({ let CheckBox = React.createClass({

View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import {Motion, spring} from 'react-motion'; import {Motion, spring} from 'react-motion';
import callback from 'lib/callback'; import callback from 'lib-core/callback';
let DropDown = React.createClass({ let DropDown = React.createClass({

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import _ from 'lodash'; 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 Input from 'core-components/input';
import Checkbox from 'core-components/checkbox'; import Checkbox from 'core-components/checkbox';

View File

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

22
src/lib-app/api-call.js Normal file
View File

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

View File

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

View File

@ -1,15 +1,12 @@
'use strict'; const _ = require('lodash');
const $ = require('jquery');
import $ from 'jquery';
const APIUtils = { const APIUtils = {
root: 'http://localhost:3000/api/',
getPromise(path, method, data) { getPromise(path, method, data) {
return (resolve, reject) => { return (resolve, reject) => {
$.ajax({ $.ajax({
url: this.root + path, url: path,
method: method, method: method,
data: data, data: data,
dataType: 'json' dataType: 'json'

View File

@ -1,24 +1,26 @@
import Reflux from 'reflux'; const Reflux = require('reflux');
import APIUtils from 'lib/APIUtils'; 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() { init() {
this.user = null; this.user = null;
this.hasBeenChecked = false; this.hasBeenChecked = false;
this.listenTo(UserActions.checkLoginStatus, this.checkLoginStatus); this.listenTo(UserActions.checkLoginStatus, this.checkLoginStatus);
this.listenTo(UserActions.login, this.loginUser); this.listenTo(UserActions.login, this.loginUser);
this.listenTo(UserActions.logout, this.logoutUser); this.listenTo(UserActions.logout, this.logoutUser);
}, },
loginUser(loginData) { loginUser(loginData) {
APIUtils.post('user/login', loginData).then(result => { API.call('user/login', loginData, result => {
console.log(result); console.log(result);
API.setConfig(result.userId, result.token);
}); });
} }
}); });
export default UserStore; export default UserStore;