Transfers history - 3rd party transfers

js-frontend/build/app.d91662ee734b40065ff3.js

@@ -2928,10 +2928,12 @@ webpackJsonp([0,3],{
 	var createRefAccountLookup = exports.createRefAccountLookup = function createRefAccountLookup(customerId) {
 	  return function (dispatch) {
 	    dispatch(createRefAccountLookupStart());
-	    return api.apiRetrieveAccounts(customerId).then(function (data) {
+	    return api.apiRetrieveAccounts(customerId).then(function (_ref3) {
-	      var arr = data.map(function (_ref3) {
+	      var accounts = _ref3.accounts;
-	        var accountId = _ref3.accountId;
+	
-	        var title = _ref3.title;
+	      var arr = accounts.map(function (_ref4) {
+	        var accountId = _ref4.accountId;
+	        var title = _ref4.title;
 	        return {
 	          value: accountId,
 	          label: title
@@ -2946,7 +2948,7 @@ webpackJsonp([0,3],{
 	  };
 	};
 	
-	var makeTransferRequested = exports.makeTransferRequested = (0, _actions.makeActionCreator)(_ACTION_TYPES2.default.TRANSFERS.MAKE_START, 'payload');
+	var makeTransferRequested = exports.makeTransferRequested = (0, _actions.makeActionCreator)(_ACTION_TYPES2.default.TRANSFERS.MAKE_START);
 	var makeTransferComplete = exports.makeTransferComplete = (0, _actions.makeActionCreator)(_ACTION_TYPES2.default.TRANSFERS.MAKE_COMPLETE, 'payload');
 	var makeTransferError = exports.makeTransferError = (0, _actions.makeActionCreator)(_ACTION_TYPES2.default.TRANSFERS.MAKE_ERROR, 'error');
 	var makeTransferFormUpdate = exports.makeTransferFormUpdate = (0, _actions.makeActionCreator)(_ACTION_TYPES2.default.TRANSFERS.MAKE_FORM_UPDATE, 'key', 'value');
@@ -4004,7 +4006,7 @@ webpackJsonp([0,3],{
 	        // return new Promise((rs, rj) => {
 	        setTimeout(function () {
 	          _this2.props.dispatch(A.fetchOwnAccounts(customerId)); //.then(rs, rj);
-	        }, 1000);
+	        }, 1500);
 	        // });
 	      }).catch(function (err) {
 	        // debugger;
@@ -4031,7 +4033,7 @@ webpackJsonp([0,3],{
 	        return new Promise(function (rs, rj) {
 	          setTimeout(function () {
 	            _this3.props.dispatch(A.fetchOwnAccounts(customerId)).then(rs, rj);
-	          }, 1000);
+	          }, 1500);
 	        });
 	      }).catch(function (err) {
 	        // debugger;
@@ -6132,17 +6134,47 @@ webpackJsonp([0,3],{
 	  }
 	
 	  _createClass(TransfersTable, [{
+	    key: "preprocessItems",
+	    value: function preprocessItems(input, currentAccountId) {
+	      return input.sort(function (a, b) {
+	        return a.date - b.date;
+	      }).filter(function (_ref) {
+	        var entryType = _ref.entryType;
+	        var toAccountId = _ref.toAccountId;
+	        var fromAccountId = _ref.fromAccountId;
+	        return entryType !== 'transaction' || fromAccountId === currentAccountId || toAccountId === currentAccountId;
+	      }).reduce(function (_ref2, v) {
+	        var items = _ref2.items;
+	        var balance = _ref2.balance;
+	
+	        if (v.entryType == 'account') {
+	          balance = v.initialBalance;
+	        } else if (v.entryType == 'transaction') {
+	          var isOriginating = v.fromAccountId == currentAccountId;
+	          balance += (isOriginating ? -1 : 1) * v.amount;
+	        }
+	        v.balance = balance;
+	        items.push(v);
+	        return { items: items, balance: balance };
+	      }, {
+	        items: [],
+	        balance: 0
+	      }).items.sort(function (a, b) {
+	        return -(a.date - b.date);
+	      });
+	    }
+	  }, {
 	    key: "render",
 	    value: function render() {
 	      var _props = this.props;
 	      var transfers = _props.transfers;
 	      var forAccount = _props.forAccount;
 	
-	      var _ref = transfers || {};
+	      var _ref3 = transfers || {};
 	
-	      var loading = _ref.loading;
+	      var loading = _ref3.loading;
-	      var data = _ref.data;
+	      var data = _ref3.data;
-	      var errors = _ref.errors;
+	      var errors = _ref3.errors;
 	
 	
 	      if (!transfers || loading) {
@@ -6163,32 +6195,8 @@ webpackJsonp([0,3],{
 	      }
 	
 	      var currentAccountId = forAccount;
-	      var transfersMarkup = data.length ? data.sort(function (a, b) {
-	        return a.date - b.date;
-	      }).filter(function (_ref2) {
-	        var entryType = _ref2.entryType;
-	        var toAccountId = _ref2.toAccountId;
-	        var fromAccountId = _ref2.fromAccountId;
-	        return entryType !== 'transaction' || fromAccountId === currentAccountId || toAccountId === currentAccountId;
-	      }).reduce(function (_ref3, v) {
-	        var items = _ref3.items;
-	        var balance = _ref3.balance;
 	
-	        if (v.entryType == 'account') {
+	      var transfersMarkup = data.length ? this.preprocessItems(data, currentAccountId).map(function (_ref4) {
-	          balance = v.initialBalance;
-	        } else if (v.entryType == 'transaction') {
-	          var isOriginating = v.fromAccountId == currentAccountId;
-	          balance += (isOriginating ? -1 : 1) * v.amount;
-	        }
-	        v.balance = balance;
-	        items.push(v);
-	        return { items: items, balance: balance };
-	      }, {
-	        items: [],
-	        balance: 0
-	      }).items.sort(function (a, b) {
-	        return -(a.date - b.date);
-	      }).map(function (_ref4) {
 	        var entryType = _ref4.entryType;
 	        var amount = _ref4.amount;
 	        var fromAccountId = _ref4.fromAccountId;
@@ -6227,7 +6235,11 @@ webpackJsonp([0,3],{
 	              null,
 	              _react2.default.createElement(_Money.Money, { amount: initialBalance })
 	            ),
-	            _react2.default.createElement("td", null),
+	            _react2.default.createElement(
+	              "td",
+	              null,
+	              description
+	            ),
 	            _react2.default.createElement(
 	              "td",
 	              null,
@@ -6242,7 +6254,7 @@ webpackJsonp([0,3],{
 	
 	        return _react2.default.createElement(
 	          "tr",
-	          null,
+	          { key: transactionId },
 	          _react2.default.createElement(
 	            "td",
 	            null,
@@ -7353,4 +7365,4 @@ webpackJsonp([0,3],{
 /***/ }
 
 });
-//# sourceMappingURL=app.d4bdff82ac1db214898b.js.map
+//# sourceMappingURL=app.d91662ee734b40065ff3.js.map

js-frontend/build/index.html

@@ -13,7 +13,7 @@
 
   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"><link href="/style.6d7a32b1405ea1bb2bdf.css" rel="stylesheet"></head>
-<body><div id="root"></div><script src="/manifest.09cb8f5a05c9cfc35585.js"></script><script src="/vendor.f73c0104cb72cfb2809e.js"></script><script src="/style.6d7a32b1405ea1bb2bdf.js"></script><script src="/app.d4bdff82ac1db214898b.js"></script><script>
+<body><div id="root"></div><script src="/manifest.2f607228f88f59be77bc.js"></script><script src="/vendor.f73c0104cb72cfb2809e.js"></script><script src="/style.6d7a32b1405ea1bb2bdf.js"></script><script src="/app.d91662ee734b40065ff3.js"></script><script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -27,5 +27,5 @@
   
     ga('send', 'pageview');
   
-</script><!--{"files":{"publicPath":"/","chunks":{"manifest":{"size":0,"entry":"/manifest.09cb8f5a05c9cfc35585.js","hash":"09cb8f5a05c9cfc35585","css":[]},"vendor":{"size":1670874,"entry":"/vendor.f73c0104cb72cfb2809e.js","hash":"f73c0104cb72cfb2809e","css":[]},"style":{"size":122,"entry":"/style.6d7a32b1405ea1bb2bdf.js","hash":"6d7a32b1405ea1bb2bdf","css":["/style.6d7a32b1405ea1bb2bdf.css"]},"app":{"size":351315,"entry":"/app.d4bdff82ac1db214898b.js","hash":"d4bdff82ac1db214898b","css":[]}},"js":["/manifest.09cb8f5a05c9cfc35585.js","/vendor.f73c0104cb72cfb2809e.js","/style.6d7a32b1405ea1bb2bdf.js","/app.d4bdff82ac1db214898b.js"],"css":["/style.6d7a32b1405ea1bb2bdf.css"]},"options":{"template":"/Users/andrew/dev/clients/ES/code/event-sourcing-examples/js-frontend/node_modules/html-webpack-plugin/lib/loader.js!/Users/andrew/dev/clients/ES/code/event-sourcing-examples/js-frontend/public/index.ejs","filename":"index.html","hash":false,"inject":false,"compile":true,"favicon":false,"minify":false,"cache":true,"showErrors":true,"chunks":"all","excludeChunks":[],"title":"Money Transfer App","xhtml":false,"description":"ES Money Transfer App","appMountId":"root","googleAnalytics":{"trackingId":"UA-XXXX-XX","pageViewOnLoad":true},"mobile":true}}--></body>
+</script><!--{"files":{"publicPath":"/","chunks":{"manifest":{"size":0,"entry":"/manifest.2f607228f88f59be77bc.js","hash":"2f607228f88f59be77bc","css":[]},"vendor":{"size":1670874,"entry":"/vendor.f73c0104cb72cfb2809e.js","hash":"f73c0104cb72cfb2809e","css":[]},"style":{"size":122,"entry":"/style.6d7a32b1405ea1bb2bdf.js","hash":"6d7a32b1405ea1bb2bdf","css":["/style.6d7a32b1405ea1bb2bdf.css"]},"app":{"size":351599,"entry":"/app.d91662ee734b40065ff3.js","hash":"d91662ee734b40065ff3","css":[]}},"js":["/manifest.2f607228f88f59be77bc.js","/vendor.f73c0104cb72cfb2809e.js","/style.6d7a32b1405ea1bb2bdf.js","/app.d91662ee734b40065ff3.js"],"css":["/style.6d7a32b1405ea1bb2bdf.css"]},"options":{"template":"/Users/andrew/dev/clients/ES/code/event-sourcing-examples/js-frontend/node_modules/html-webpack-plugin/lib/loader.js!/Users/andrew/dev/clients/ES/code/event-sourcing-examples/js-frontend/public/index.ejs","filename":"index.html","hash":false,"inject":false,"compile":true,"favicon":false,"minify":false,"cache":true,"showErrors":true,"chunks":"all","excludeChunks":[],"title":"Money Transfer App","xhtml":false,"description":"ES Money Transfer App","appMountId":"root","googleAnalytics":{"trackingId":"UA-XXXX-XX","pageViewOnLoad":true},"mobile":true}}--></body>
 </html>

js-frontend/build/manifest.2f607228f88f59be77bc.js

@@ -76,7 +76,7 @@
 /******/ 			script.charset = 'utf-8';
 /******/ 			script.async = true;
 /******/
-/******/ 			script.src = __webpack_require__.p + "" + {"0":"d4bdff82ac1db214898b","1":"6d7a32b1405ea1bb2bdf","2":"f73c0104cb72cfb2809e"}[chunkId] + ".js";
+/******/ 			script.src = __webpack_require__.p + "" + {"0":"d91662ee734b40065ff3","1":"6d7a32b1405ea1bb2bdf","2":"f73c0104cb72cfb2809e"}[chunkId] + ".js";
 /******/ 			head.appendChild(script);
 /******/ 		}
 /******/ 	};
@@ -92,4 +92,4 @@
 /******/ })
 /************************************************************************/
 /******/ ([]);
-//# sourceMappingURL=manifest.09cb8f5a05c9cfc35585.js.map
+//# sourceMappingURL=manifest.2f607228f88f59be77bc.js.map

js-frontend/build/manifest.2f607228f88f59be77bc.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap 8ac05bd1ead33e72514a?"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,uDAA+C,iFAAiF;AAChI;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA","file":"manifest.09cb8f5a05c9cfc35585.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t3:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"\" + {\"0\":\"d4bdff82ac1db214898b\",\"1\":\"6d7a32b1405ea1bb2bdf\",\"2\":\"f73c0104cb72cfb2809e\"}[chunkId] + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 8ac05bd1ead33e72514a\n **/"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///webpack/bootstrap f41b5db61be80a08031d?"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,uDAA+C,iFAAiF;AAChI;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA","file":"manifest.2f607228f88f59be77bc.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t3:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"\" + {\"0\":\"d91662ee734b40065ff3\",\"1\":\"6d7a32b1405ea1bb2bdf\",\"2\":\"f73c0104cb72cfb2809e\"}[chunkId] + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap f41b5db61be80a08031d\n **/"],"sourceRoot":""}

js-frontend/src/actions/entities.js

@@ -210,8 +210,8 @@ export const createRefAccountLookup = customerId => {
   return dispatch => {
     dispatch(createRefAccountLookupStart());
     return api.apiRetrieveAccounts(customerId)
-      .then(data => {
+      .then(({ accounts }) => {
-        const arr = data.map(({ accountId, title }) => ({
+        const arr = accounts.map(({ accountId, title }) => ({
           value: accountId,
           label: title
         }));
@@ -226,7 +226,7 @@ export const createRefAccountLookup = customerId => {
 };
 
 
-export const makeTransferRequested = makeActionCreator(T.TRANSFERS.MAKE_START, 'payload');
+export const makeTransferRequested = makeActionCreator(T.TRANSFERS.MAKE_START);
 export const makeTransferComplete = makeActionCreator(T.TRANSFERS.MAKE_COMPLETE, 'payload');
 export const makeTransferError = makeActionCreator(T.TRANSFERS.MAKE_ERROR, 'error');
 export const makeTransferFormUpdate = makeActionCreator(T.TRANSFERS.MAKE_FORM_UPDATE, 'key', 'value');

js-frontend/src/components/TransfersTable.js

@@ -10,6 +10,30 @@ import { Money } from './Money';
 import AccountInfo from './AccountInfo';
 
 export class TransfersTable extends React.Component {
+
+  preprocessItems(input, currentAccountId) {
+    return input
+      .sort((a, b) => ((a.date - b.date)))
+      .filter(({ entryType, toAccountId, fromAccountId}) => ((entryType !=='transaction') || (fromAccountId === currentAccountId) || (toAccountId === currentAccountId)))
+      .reduce(({
+        items, balance
+      }, v) => {
+        if (v.entryType == 'account') {
+          balance = v.initialBalance;
+        } else if (v.entryType == 'transaction') {
+          const isOriginating = v.fromAccountId == currentAccountId;
+          balance += (isOriginating ? -1 : 1) * v.amount;
+        }
+        v.balance = balance;
+        items.push(v);
+        return { items, balance };
+      }, {
+        items: [],
+        balance: 0
+      }).items
+      .sort((a, b) => (-(a.date - b.date)))
+  }
+
   render() {
     const { transfers, forAccount } = this.props;
     const { loading, data, errors } = transfers || {};
@@ -23,27 +47,9 @@ export class TransfersTable extends React.Component {
     }
 
     const currentAccountId = forAccount;
+
     const transfersMarkup = data.length ?
-      data
+      this.preprocessItems(data, currentAccountId)
-        .sort((a, b) => ((a.date - b.date)))
-        .filter(({ entryType, toAccountId, fromAccountId}) => ((entryType !=='transaction') || (fromAccountId === currentAccountId) || (toAccountId === currentAccountId)))
-        .reduce(({
-          items, balance
-        }, v) => {
-          if (v.entryType == 'account') {
-            balance = v.initialBalance;
-          } else if (v.entryType == 'transaction') {
-            const isOriginating = v.fromAccountId == currentAccountId;
-            balance += (isOriginating ? -1 : 1) * v.amount;
-          }
-          v.balance = balance;
-          items.push(v);
-          return { items, balance };
-        }, {
-          items: [],
-          balance: 0
-        }).items
-        .sort((a, b) => (-(a.date - b.date)))
         .map(({
           entryType,
           amount,
@@ -65,7 +71,7 @@ export class TransfersTable extends React.Component {
               <td><TimeAgo date={date} title={ timeAgoTitle } /></td>
               <td colSpan="3">Account created</td>
               <td><Money amount={ initialBalance } /></td>
-              <td></td>
+              <td>{ description }</td>
               <td>{ status || '—' }</td>
             </tr>);
           }
@@ -76,7 +82,7 @@ export class TransfersTable extends React.Component {
             <AccountInfo accountId={ toAccountId } /> :
             <AccountInfo accountId={ fromAccountId } />;
 
-          return (<tr>
+          return (<tr key={ transactionId }>
             <td><TimeAgo date={date} title={ timeAgoTitle } /></td>
             <td>{ directionMarkup }</td>
             <td>{ counterAccountMarkup }</td>

js-frontend/src/views/MyAccounts.js

@@ -55,7 +55,7 @@ class MyAccounts extends React.Component {
         // return new Promise((rs, rj) => {
           setTimeout(() => {
             this.props.dispatch(A.fetchOwnAccounts(customerId)); //.then(rs, rj);
-          }, 1000);
+          }, 1500);
         // });
       })
       .catch(err => {
@@ -81,7 +81,7 @@ class MyAccounts extends React.Component {
         return new Promise((rs, rj) => {
           setTimeout(() => {
             this.props.dispatch(A.fetchOwnAccounts(customerId)).then(rs, rj);
-          }, 1000);
+          }, 1500);
         })
       })
       .catch(err => {