Improved search by payer and improved feedback.

If any of the objects are searching, then they will have a spinner over
them.  Right now, the checkouts object is the exception.  We don't want
the spinner to appear everytime we update the table.  We only want it
when the table is being loaded for the first time, and even then that's
not perfect.

actions/accounts.js

@@ -54,7 +54,7 @@ function fetchAccount(account_id = null) {
 }
 
 function shouldFetchAccount(state, account_id = null) {
-    if (state.wepay_user && state.wepay_user.searchedUser != "") {
+    if (state.wepay_user && state.wepay_user.user.haveAccessToken) {
         return true;
     }
     else if(state.wepay_user.isFetching){

actions/user.js

@@ -50,11 +50,17 @@ function fetchUser(email, account_id, callback) {
         return $.post("/user", {"email":email, "account_id":account_id})
             .fail(function(data){
                 console.log("ERROR: ", data);
+                // add error
                 var error_data = data.responseJSON;
                 dispatch(addError(error_data));
+
+                // clear the user info
+                dispatch(clearUser());
             })
             .done(function(data){
                 dispatch(receiveUser(email, data));
+
+                // clear any existing errors
                 dispatch(clearError());
                 if(callback != undefined) {
                     console.log("CALLBACK: ", callback);

components/Accounts.js

@@ -8,14 +8,12 @@
 import React, { PropTypes } from 'react'
 import {FormGroup, FormControl, Row, Col, ControlLabel, Table} from "react-bootstrap"
 import { connect } from 'react-redux'
-import {addCheckouts, clearCheckouts} from "../actions/checkouts"
-import {addWithdrawals, clearWithdrawals} from "../actions/withdrawals"
+import {addCheckouts, clearCheckouts, fetchCheckoutIfNeeded} from "../actions/checkouts"
+import {addWithdrawals, clearWithdrawals, fetchWithdrawalIfNeeded} from "../actions/withdrawals"
+import {clearPayer} from "../actions/payer"
 import {addError} from "../actions/errors"
 import {BootstrapTable} from "react-bootstrap-table"
 
-import {fetchWithdrawalIfNeeded} from "../actions/withdrawals"
-import {fetchCheckoutIfNeeded} from "../actions/checkouts"
-
 import {searchAccount} from "../actions/accounts"
 
 import Base from "./Base"
@@ -41,6 +39,7 @@ var AccountBlock= React.createClass({
         // clear current widthdrawals and checkouts
         this.props.dispatch(clearWithdrawals());
         this.props.dispatch(clearCheckouts());
+        this.props.dispatch(clearPayer());
 
         // fetch the checkouts
         this.props.dispatch(fetchCheckoutIfNeeded(account_id));
@@ -62,7 +61,10 @@ var AccountBlock= React.createClass({
     render: function() {
         var accounts = this.props.accountInfo;
         var this2 = this;
-        if (accounts == null || $.isEmptyObject(accounts)  || $.isEmptyObject(this.props.error)==false) {
+        if (this.props.isFetching) {
+            return (<div><object data="/static/css/default_spinner.svg" type="image/svg+xml" width="150px"></object></div>);
+        }
+        else if (accounts == null || $.isEmptyObject(accounts)  || $.isEmptyObject(this.props.error)==false) {
             return (<div></div>);
         }
         else {
@@ -75,7 +77,6 @@ var AccountBlock= React.createClass({
                         striped={true}
                         hover={true}
                         pagination={true}
-                        search={true}
                         selectRow = {this.state.selectRowProp}
                         width="99%"
                     >
@@ -110,10 +111,11 @@ var AccountBlock= React.createClass({
 
 const mapStateToProps = (state) => {
     return {
-        accountInfo:state.wepay_account.account.accountInfo,
-        searchedAccount: state.wepay_account.searchedAccount,
-        email: state.wepay_user.searchedUser.email,
-        error: state.errors.global ? state.errors.global.info : {}
+        accountInfo:        state.wepay_account.account.accountInfo,
+        isFetching:         state.wepay_account.account.isFetching,
+        searchedAccount:    state.wepay_account.searchedAccount,
+        haveAccessToken:    state.wepay_user.user.haveAccessToken,
+        error:              state.errors.global ? state.errors.global.info : {}
     }
 }
 

components/Checkouts.js

@@ -231,7 +231,7 @@ var Checkouts = React.createClass({
         return array;
     },
     render: function() {
-        if(this.props.checkoutInfo != null){
+        if(!(this.props.checkoutInfo === undefined)){
             var checkouts = this.serialize(this.props.checkoutInfo);
             console.log('Rendering checkout info gathered from WePay');
             return (
@@ -305,7 +305,7 @@ var Checkouts = React.createClass({
                 </div>
             );
         }
-        else if(this.props.payerInfo != null) {
+        else if(!(this.props.payerInfo === undefined)) {
             console.log("Rendering checkout info gathered from partner database");
             return (<div>
                 <Row>
@@ -327,7 +327,6 @@ var Checkouts = React.createClass({
                         </TableHeaderColumn>    
                         <TableHeaderColumn 
                             dataField = "create_time"
-                            dataFormat={Base.formatDate}
                             dataSort={true}
                             >
                             Date
@@ -360,7 +359,8 @@ const mapStateToProps = (state) => {
         successful_refund:  state.wepay_checkout.checkout.successful_refund,
         error:              state.errors.global ? state.errors.global.info : {},
         refund_error:       state.errors.refund ? state.errors.refund.info: {},
-        payerInfo:          state.wepay_payer.payer.payerInfo
+        payerInfo:          state.wepay_payer.payer.payerInfo,
+        isFetching:         state.wepay_payer.payer.isFetching || state.wepay_checkout.checkout.isFetching
 
     }
 }

components/User.js

@@ -38,7 +38,10 @@ var UserInfo = React.createClass({
     render: function() {
         // render user info
         var userInfoSection;
-        if(this.props.userInfo == null || $.isEmptyObject(this.props.error) == false){
+        if (this.props.isFetching) {
+            return (<div><object data="/static/css/default_spinner.svg" type="image/svg+xml" width="150px"></object></div>);
+        }
+        else if(this.props.userInfo === undefined || $.isEmptyObject(this.props.error) == false){
             return <div></div>;
         }
         else {
@@ -95,8 +98,9 @@ var UserInfo = React.createClass({
 
 const mapStateToProps = (state) => {
     return {
-        userInfo:state.wepay_user.user.userInfo,
-        error: state.errors.global ? state.errors.global.info : {}
+        userInfo:   state.wepay_user.user.userInfo,
+        isFetching: state.wepay_user.user.isFetching,
+        error:      state.errors.global ? state.errors.global.info : {}
     }
 }
 

components/Withdrawals.js

@@ -59,7 +59,10 @@ var Withdrawals= React.createClass({
         var withdrawal_content = (<div></div>);
         var reserve_content = (<div></div>);
         var this2 = this;
-        if (withdrawals == null || $.isEmptyObject(this.props.error) == false){
+        if (this.props.isFetching) {
+            return (<div><object data="/static/css/default_spinner.svg" type="image/svg+xml" width="150px"></object></div>);
+        }
+        if (this.props.withdrawalInfo === undefined || $.isEmptyObject(this.props.error) == false){
             withdrawal_content = withdrawal_content;
         }
         else {
@@ -155,7 +158,8 @@ const mapStateToProps = (state) => {
         withdrawalInfo:     state.wepay_withdrawal.withdrawal.withdrawalInfo,
         reserveInfo:        state.wepay_withdrawal.withdrawal.reserveInfo,
         email:              state.wepay_user.searchedUser,
-        error:              state.errors.global ? state.errors.global.info : {}
+        error:              state.errors.global ? state.errors.global.info : {},
+        isFetching:         state.wepay_withdrawal.withdrawal.isFetching
 
     }
 }

reducers/accounts.js

@@ -9,6 +9,11 @@ import {
     REQUEST_ACCOUNT, RECEIVE_ACCOUNT, CLEAR_ACCOUNTS
 } from '../actions/accounts'
 
+var defaultAccountState = {
+    isFetching: false,
+    didInvalidate: false,
+    accountInfo: []
+};
 
 function searchedAccount(state = {}, action) {
     switch (action.type) {
@@ -19,11 +24,7 @@ function searchedAccount(state = {}, action) {
     }
 }
 
-function account_base(state = {
-    isFetching: false,
-    didInvalidate: false,
-    accountInfo: {}
-}, action) {
+function account_base(state = defaultAccountState, action) {
     switch (action.type) {
         case INVALIDATE_ACCOUNT:
             return Object.assign({}, state, {

reducers/checkouts.js

@@ -8,6 +8,14 @@ import {
     REQUEST, RECEIVE, REFUND, RECEIVE_REFUND, CLEAR_REFUND, CLEAR_CHECKOUTS
 } from '../actions/checkouts'
 
+var defaultCheckoutState = {
+    isFetching: false,
+    didInvalidate: false,
+    submitted_refund: false,
+    successful_refund:false,
+    checkoutInfo: []
+};
+
 function searchedCheckout(state = {}, action) {
     switch (action.type) {
         case SEARCH:
@@ -22,7 +30,7 @@ function updateSingleCheckout(checkout, action) {
 }
 
 function updateCheckout(state, action) {
-    console.log("Updating checkout: ", action)
+    console.log("Updating checkout: ", action);
     for (var i = 0; i < state.checkoutInfo.length; i++) {
         if(state.checkoutInfo[i].checkout_id == action.checkout_id) {
             state.checkoutInfo =  [
@@ -38,13 +46,7 @@ function updateCheckout(state, action) {
 }
 
 
-function checkout_base(state = {
-    isFetching: false,
-    didInvalidate: false,
-    submitted_refund: false,
-    successful_refund:false,
-    checkoutInfo: []
-}, action) {
+function checkout_base(state = defaultCheckoutState, action) {
     switch (action.type) {
         case INVALIDATE:
             return Object.assign({}, state, {
@@ -56,7 +58,8 @@ function checkout_base(state = {
                 didInvalidate: false
             })
         case RECEIVE:
-            if (action.checkout_id && state.checkoutInfo) {
+
+            if (action.checkout_id && !(state.checkoutInfo === undefined)) {
                 return Object.assign({}, state, updateCheckout(state, action));
             }
             else {
@@ -89,7 +92,7 @@ function checkout_base(state = {
                 isFetching: false
             })
         default:
-        return state
+            return state
     }
 }
 
@@ -103,7 +106,7 @@ function checkout(state = {}, action) {
         case CLEAR_REFUND:
             return Object.assign({}, state, checkout_base(state, action))
         case CLEAR_CHECKOUTS:
-            return {};
+            return {}
         default:
             return state
     }

reducers/payer.js

@@ -7,6 +7,12 @@ import {
     SEARCH, INVALIDATE, REQUEST, RECEIVE, CLEAR
 } from '../actions/payer'
 
+var defaultPayerState = {
+    isFetching: false,
+    didInvalidate: false,
+    payerInfo: []
+};
+
 function searchedPayer(state = {"email":"", "account_id":""}, action) {
     switch (action.type) {
         case SEARCH:
@@ -18,11 +24,7 @@ function searchedPayer(state = {"email":"", "account_id":""}, action) {
     }
 }
 
-function payer_base(state = {
-    isFetching: false,
-    didInvalidate: false,
-    userInfo: {}
-}, action) {
+function payer_base(state = defaultPayerState, action) {
     switch (action.type) {
         case INVALIDATE:
         return Object.assign({}, state, {

reducers/user.js

@@ -11,6 +11,13 @@ import {
     REQUEST_USER, RECEIVE_USER, CLEAR_USER
 } from '../actions/user'
 
+var userDefaultState = {
+    isFetching: false,
+    didInvalidate: false,
+    haveAccessToken: false,
+    userInfo: {}
+};
+
 function searchedUser(state = {"email":"", "account_id":""}, action) {
     switch (action.type) {
         case SEARCH_USER:
@@ -20,30 +27,30 @@ function searchedUser(state = {"email":"", "account_id":""}, action) {
     }
 }
 
-function user_base(state = {
-    isFetching: false,
-    didInvalidate: false,
-    userInfo: {}
-}, action) {
+function user_base(state = userDefaultState, action) {
     switch (action.type) {
         case INVALIDATE_USER:
-        return Object.assign({}, state, {
-            didInvalidate: true
-        })
+            return Object.assign({}, state, {
+                didInvalidate:  true,
+                isFetching:     false,
+                haveAccessToken:false,
+            })
         case REQUEST_USER:
-        return Object.assign({}, state, {
-            isFetching: true,
-            didInvalidate: false
-        })
+            return Object.assign({}, state, {
+                isFetching:         true,
+                haveAccessToken:    false,
+                didInvalidate:      false
+            })
         case RECEIVE_USER:
-        return Object.assign({}, state, {
-            isFetching: false,
-            didInvalidate: false,
-            userInfo: action.user,
-            lastUpdated: action.receivedAt
-        })
+            return Object.assign({}, state, {
+                isFetching:      false,
+                didInvalidate:   false,
+                haveAccessToken: true,
+                userInfo:        action.user,
+                lastUpdated:     action.receivedAt
+            })
         default:
-        return state
+            return state
     }
 }
 

reducers/withdrawals.js

@@ -8,6 +8,12 @@ import {
     REQUEST, RECEIVE, CLEAR, RECEIVE_RESERVE
 } from '../actions/withdrawals'
 
+var defaultWithdrawalState = {
+    isFetching: false,
+    didInvalidate: false,
+    withdrawalInfo: []
+};
+
 function searchedWithdrawal(state = {}, action) {
     switch (action.type) {
         case SEARCH:
@@ -17,11 +23,7 @@ function searchedWithdrawal(state = {}, action) {
     }
 }
 
-function withdrawal_base(state = {
-    isFetching: false,
-    didInvalidate: false,
-    withdrawalInfo: []
-}, action) {
+function withdrawal_base(state = defaultWithdrawalState, action) {
     switch (action.type) {
         case INVALIDATE:
         return Object.assign({}, state, {