Dialog dismissal, accounts fetching (stub)

js-frontend/src/actions/entities.js

@@ -10,11 +10,11 @@ export const entityRequested = makeActionCreator(T.ENTITIES.REQUESTED, 'id');
 export const entityReceived = makeActionCreator(T.ENTITIES.RECEIVED, 'id', 'entity');
 
 export const accountsListRequested = makeActionCreator(T.ACCOUNTS.LIST_START);
-export const accountsListReceived = makeActionCreator(T.ACCOUNTS.LIST_COMPLETE, 'data');
+export const accountsListReceived = makeActionCreator(T.ACCOUNTS.LIST_COMPLETE, 'payload');
 export const accountsListError = makeActionCreator(T.ACCOUNTS.LIST_ERROR, 'error');
 
 //export const accountsRefListRequested = makeActionCreator(T.ACCOUNTS.LIST_REF_START, 'id');
-export const accountsRefListReceived = makeActionCreator(T.ACCOUNTS.LIST_REF_COMPLETE, 'data');
+export const accountsRefListReceived = makeActionCreator(T.ACCOUNTS.LIST_REF_COMPLETE, 'payload');
 //export const accountsRefListError = makeActionCreator(T.ACCOUNTS.LIST_REF_ERROR, 'id');
 
 export const accountCreateStart = makeActionCreator(T.ACCOUNTS.CREATE_START);
@@ -60,4 +60,14 @@ export function accountCreate(customerId, payload) {
 
       })
   };
+}
+
+export function fetchOwnAccounts(customerId) {
+  return dispatch => {
+    //dispatch(accountsListRequested());
+    return api.apiRetrieveAccounts(customerId)
+      .then(data => {
+        dispatch(accountsListReceived(data));
+      });
+  };
 }

js-frontend/src/reducers/data/accounts.js

@@ -7,28 +7,39 @@
 import T from '../../constants/ACTION_TYPES';
 import { combineReducers } from 'redux';
 
-const initialState = {
-  own: [],
-  other: [],
-  create: {
-    form: {},
-    loading: false,
-    errors: {}
-  }
-};
-
-const nodeInitialState = {
-  loading: false,
-  data: {}
-};
-
 const ownAccountsReducer = (state = [], action ) => {
   switch (action.type) {
+    case T.ACCOUNTS.LIST_COMPLETE: {
+      const { payload = [] } = action;
+      //const accounts = Object.keys(payload).map(key => payload[key]);
+      return [
+        ...payload
+      ];
+    }
     default: return state;
   }
 };
+
 const otherAccountsReducer = (state = [], action ) => {
   switch (action.type) {
+    case T.AUTH.AUTHENTICATE_COMPLETE:
+    case T.AUTH.SIGN_IN_COMPLETE: {
+      const { user } = action;
+      const { toAccounts = [] } = user;
+      return otherAccountsReducer(state, {
+        type: T.ACCOUNTS.LIST_REF_COMPLETE,
+        payload: toAccounts
+      });
+    }
+
+    case T.ACCOUNTS.LIST_REF_COMPLETE: {
+      const { payload = {} } = action;
+      const accounts = Object.keys(payload).map(key => ((payload[key].id = payload[key].accountId), payload[key]));
+      return [
+        ...accounts
+      ];
+    }
+
     default: return state;
   }
 };

js-frontend/src/reducers/data/entities.js

@@ -17,10 +17,7 @@ export const entities = (state = {...initialState}, action) => {
       const { id } = action;
       return {
         ...state,
-        [id]: {
-          ...nodeInitialState,
-          loading: true
-        }
+        [id]: null
       }
     }
     case T.ENTITIES.RECEIVED: {
@@ -28,14 +25,33 @@ export const entities = (state = {...initialState}, action) => {
       return {
         ...state,
         [id]: {
-          ...(state[id] || nodeInitialState),
-          loading: false,
-          data: {
-            ...entity
-          }
+          ...entity
         }
       }
     }
+
+    case T.AUTH.AUTHENTICATE_COMPLETE:
+    case T.AUTH.SIGN_IN_COMPLETE:
+    {
+      const { user } = action;
+      const { toAccounts = [] } = user;
+      return {
+        ...state,
+        ...toAccounts
+      };
+
+    }
+    case T.ACCOUNTS.LIST_COMPLETE: {
+      const { payload } = action;
+      const hashMap = payload.reduce((memo, item) => {
+        memo[item.accountId] = item;
+        return memo;
+      }, {});
+      return {
+        ...state,
+        ...hashMap
+      };
+    }
     case T.ENTITIES.RECEIVED_LIST:
     default:
       return state;

js-frontend/src/utils/api.js

@@ -66,7 +66,10 @@ export function apiCreateAccount(customerId, {
 }
 
 export function apiRetrieveAccounts(customerId) {
-  return fetch(getAccountsUrl(), {
+
+  const params = {customerId };
+  const query = Object.keys(params).map(key => [encodeURIComponent(key), encodeURIComponent(params[key])].join('=')).join('&')
+  return fetch(`${getAccountsUrl()}?${query}`, {
     headers: {
       "Accept": "application/json",
       "Content-Type": "application/json"

js-frontend/src/views/MyAccounts.js

@@ -26,6 +26,13 @@ class MyAccounts extends React.Component {
     this.state = { ...resetModals };
   }
 
+  componentWillMount() {
+    const {
+      id: customerId
+      } = this.props.auth.user.attributes;
+    this.props.dispatch(A.fetchOwnAccounts(customerId));
+  }
+
   createAccountModal() {
     this.setState({
       showAccountModal: true
@@ -41,7 +48,6 @@ class MyAccounts extends React.Component {
     this.props.dispatch(A.accountCreate(customerId, payload))
       .then(this.close.bind(this));
 
-
   }
 
   create3rdPartyAccountModal() {
@@ -105,18 +111,41 @@ class MyAccounts extends React.Component {
     const { showAccountModal, show3rdPartyAccountModal, showDeleteAccountModal } = this.state;
     const { accountToRemove = null } = this.state;
 
-    const refAccountsData = this.props.app.accounts.other || [];
+    const ownAccountsData = this.props.app.accounts.own || [];
 
-    const refAccounts = refAccountsData.map((item, idx) => (
-      <tr key={`ref_${idx}`}>
-        <td><a href="#">${item.title}</a>{
-          (item.description) ? [
+    //accountId: "000001537c2cf075-a250093f26850000"
+    //balance: 0
+    //description: null
+    //title: "Sample"
+
+    const ownAccounts = ownAccountsData.map(({
+      accountId, balance, description = '', title
+      }, idx) => (
+      <tr key={`own_${idx}`}>
+        <td><Link to={`/account/${accountId}`}>{ title }</Link>{
+          (description) ? [
             (<br />),
-            <span>{ item.description }</span>
+            <span>{ description }</span>
+          ]: null
+        }</td>
+        <td>${ balance }</td>
+      </tr>
+    ));
+    const refAccountsData = this.props.app.accounts.other || [];
+    const refAccounts = refAccountsData.map(({
+      title,
+      description = '',
+      id
+      }, idx) => (
+      <tr key={`ref_${idx}`}>
+        <td><Link to={`/account/${id}`}>{ title }</Link>{
+          (description) ? [
+            (<br />),
+            <span>{ description }</span>
           ]: null
         }
         </td>
-        <td><Button eventKey={item.id} bsStyle={"link"} onClick={this.remove3rdPartyAccountModal.bind(this)}>remove</Button>
+        <td><Button eventKey={ id } bsStyle={"link"} onClick={this.remove3rdPartyAccountModal.bind(this)}>remove</Button>
         </td>
       </tr>
     ));
@@ -168,10 +197,7 @@ class MyAccounts extends React.Component {
           </tr>
           </thead>
           <tbody>
-          <tr>
-            <td><a href="#">Account Title #1</a></td>
-            <td>$100.00</td>
-          </tr>
+          { ownAccounts }
           { refAccounts }
           </tbody>
         </Table>

js-frontend/src/views/SignIn.js

@@ -6,6 +6,8 @@ import { PageHeader } from "react-bootstrap";
 import { connect } from "react-redux";
 
 //import ButtonLoader from "./ButtonLoader";
+import * as BS from "react-bootstrap";
+//import ButtonLoader from "../controls/bootstrap/ButtonLoader";
 
 
 import {pushState} from "redux-router";