Merged in 8-frontend-api-mock (pull request #5)
#8 - Agregar API mock en frontend
This commit is contained in:
commit
1117250ba6
|
@ -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.
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
|
@ -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
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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'));
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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({
|
||||||
|
|
||||||
|
|
|
@ -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({
|
||||||
|
|
||||||
|
|
|
@ -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({
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
|
@ -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);
|
||||||
|
}
|
||||||
|
};
|
|
@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -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'
|
|
@ -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;
|
Loading…
Reference in New Issue