Skip to content

Instantly share code, notes, and snippets.

@htom78

htom78/CustomerActionCreators.js

Forked from roycehaynes/CustomerActionCreators.js
Last active August 29, 2015 14:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save htom78/2624bce2b18e9a258d69 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save htom78/2624bce2b18e9a258d69 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @roycehaynes roycehaynes revised this gist Oct 16, 2014. 1 changed file with 84 additions and 0 deletions.
    84 changes: 84 additions & 0 deletions CustomerStore.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    var AppDispatcher = require('../dispatchers/AppDispatcher');
    var AppConstants = require('../constants/AppConstants');
    var merge = require('react/lib/merge');
    var EventEmitter = require('events').EventEmitter;
    var _ = require('underscore');

    // var ActionTypes = AppConstants.ActionTypes;
    var CHANGE_EVENT = 'change';

    var ActionTypes = AppConstants.ActionTypes;

    var _customer = {};

    var _error = [];

    var CustomerStore = merge(EventEmitter.prototype, {

    init: function(customer){
    // Set _customer here.
    console.log('set customer here');
    },

    get_errors: function(){
    return _error;
    },

    has_errors: function(){
    return !_.isEmpty(_error);
    },

    emitChange: function() {
    this.emit(CHANGE_EVENT);
    },

    /**
    * @param {function} callback
    */
    addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
    },

    /**
    * @param {function} callback
    */
    removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
    },


    });

    CustomerStore.dispatchToken = AppDispatcher.register(function(payload){
    var action = payload.action;
    console.log('CustomerStore: ' + JSON.stringify(action));

    switch(action.type){
    case ActionTypes.CUSTOMER_SIGNUP:
    CustomerStore.emitChange();
    break;
    case ActionTypes.ACCOUNT_CONNECT:
    CustomerStore.emitChange();
    break;

    case ActionTypes.CUSTOMER_UPDATE:
    CustomerStore.emitChange();
    break;

    case ActionTypes.RECIEVE_CREATED_CUSTOMER:
    CustomerStore.init(action.data);
    CustomerStore.emitChange();
    break;

    case ActionTypes.RECIEVE_ERROR:
    _error = action.data.error;
    CustomerStore.emitChange();
    break;

    default:
    // do nothing
    }

    });

    module.exports = CustomerStore;
  2. @roycehaynes roycehaynes revised this gist Oct 16, 2014. 1 changed file with 124 additions and 0 deletions.
    124 changes: 124 additions & 0 deletions Signup.react.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,124 @@
    /** @jsx React.DOM */
    var React = require('react');
    var CustomerActionCreators = require('../../actions/CustomerActionCreators');
    var validator = require('validator');
    var Router = require('react-router');
    var CustomerStore = require('../../stores/CustomerStore');

    var Signup = React.createClass({

    mixins: [ Router.Navigation ],

    getInitialState: function(){
    return {
    errors: ''
    };
    },

    componentWillMount: function() {
    CustomerStore.addChangeListener(this._onChange);
    },

    componentWillUnmount: function() {
    CustomerStore.removeChangeListener(this._onChange);
    },

    _onChange: function(){

    if(CustomerStore.has_errors()){
    errors = CustomerStore.get_errors();
    this.setState({errors: errors});
    } else {
    this.transitionTo('/connect');
    }

    },

    handleSubmit: function(e){
    e.preventDefault();
    // AppActions.signup({});

    var number = this.refs.number.getDOMNode().value.trim();
    var cvv = this.refs.cvv.getDOMNode().value.trim();
    var exp_date = this.refs.expiration.getDOMNode().value.trim();
    var exp_month = exp_date.split('/')[0];
    var exp_year = exp_date.split('/')[1];
    var name = this.refs.name.getDOMNode().value.trim();
    var first_name = name.split(" ")[0];
    var last_name = name.split(" ")[1];
    var email = this.refs.email.getDOMNode().value.trim();
    var password = this.refs.password.getDOMNode().value.trim();

    var token = 'atoken';

    data = {user:{} };

    data.user.first_name = first_name;
    data.user.last_name = last_name;
    data.user.email = email;
    data.user.username = email;
    data.user.password = password;
    data.token = token;
    data.plan = 'starter';

    CustomerActionCreators.create_customer(data);

    },

    render: function(){
    return (
    <div>
    <header className="account-header">
    <div className="wrap">
    <h1>Let's Get You Rolling</h1>
    <p>We're confident you'll love the product. Every customer gets our 60-day money back guarantee, but we know you won't need it.</p>
    </div>
    </header>

    <section className="account-content">
    <div className="wrap">
    <h4>{this.state.errors}</h4>
    <form onSubmit={this.handleSubmit}>

    <div className="account-input">
    <div className="text-input sky-label">
    <label for="account-name">Name</label>
    <input type="text" ref="name" id="account-name" defaultValue="Royce Haynes" />
    </div>
    <div className="text-input sky-label">
    <label for="account-email">Email</label>
    <input type="text" ref="email" id="account-email" defaultValue="[email protected]" />
    </div>
    <div className="text-input sky-label">
    <label for="account-password">Password</label>
    <input type="password" ref="password" id="account-password" defaultValue="12345678" />
    </div>
    </div>

    <div className="signup-payment">
    <div className="text-input sky-label">
    <label for="credit-number">Credit Card #</label>
    <input type="text" ref="number" id="credit-number" defaultValue="4242424242424242" />
    </div>
    <div className="text-input split sky-label">
    <label for="credit-cvv">CVV</label>
    <input type="text" ref="cvv" id="credit-cvv" defaultValue="500" />
    </div>
    <div className="text-input split sky-label">
    <label for="credit-expiration">Expiration (MM/YY)</label>
    <input type="text" ref="expiration" id="credit-expiration" defaultValue="05/15" />
    </div>
    </div>

    <div className="account-submit">
    <input className="btn" type="submit" value="Start connecting your services"/>
    </div>
    </form>
    </div>
    </section>
    </div>
    );
    }
    });

    module.exports = Signup;
  3. @roycehaynes roycehaynes created this gist Oct 16, 2014.
    11 changes: 11 additions & 0 deletions CustomerActionCreators.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    var AppConstants = require('../constants/AppConstants.js');
    var AppDispatcher = require('../dispatchers/AppDispatcher.js');
    var api = require('../utils/api');

    var ActionTypes = AppConstants.ActionTypes;

    module.exports = {
    create_customer: function(data){
    api.customer.create(data);
    }
    };
    24 changes: 24 additions & 0 deletions ServerActionCreator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    var AppConstants = require('../constants/AppConstants.js');
    var AppDispatcher = require('../dispatchers/AppDispatcher.js');


    var ActionTypes = AppConstants.ActionTypes;

    module.exports = {
    recieve_created_customer: function(data){
    console.log('recieve_created_customer: ' + JSON.stringify(data));
    AppDispatcher.handleServerAction({
    type: ActionTypes.RECIEVE_CREATED_CUSTOMER,
    data: data
    });
    },

    recieve_error: function(data){
    console.log('recieve_error: ' + JSON.stringify(data));

    AppDispatcher.handleServerAction({
    type: ActionTypes.RECIEVE_ERROR,
    data: data
    })
    }
    };
    60 changes: 60 additions & 0 deletions api.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    var request = require('superagent');
    var AppConstants = require('../constants/AppConstants');
    var ServerActionCreators = require('../actions/ServerActionCreators');

    var ActionTypes = AppConstants.ActionTypes;

    module.exports = {
    customer: {
    create: function(data){

    data.action = ActionTypes.RECIEVE_CREATED_CUSTOMER;

    console.log('API Signup: ' + JSON.stringify(data));

    request
    .post('/api/customers')
    .send(data)
    .set('Accept', 'application/json')
    .type('application/json')
    .end(function(res){
    var results = res.body.data;

    // TODO(royce): Debug only.
    // console.log(res);
    window.res = res;

    if(res.status != 201){
    ServerActionCreators.recieve_error(results);
    return;
    }

    // console.log('calling recieve_created_customer');
    ServerActionCreators.recieve_created_customer(results);
    });
    }
    },

    account: {
    create: function(data){
    data.action = ActionTypes.RECIEVE_CREATED_ACCOUNT
    }
    }
    };

    /*
    data.action = AppConstants.CUSTOMER_SIGNUP;
    request
    .post('/customers/')
    .send(data)
    .set('Accept', 'application/json')
    .end(function(e, r){
    AppDispatcher.handleViewAction({
    actionType: r.body.action,
    data: r.body.data
    });
    });
    }
    */