From e6b8ea76d34e625ee25783a9c11b3b4149e12f9c Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Sun, 23 Apr 2017 20:11:42 +0300
Subject: [PATCH] cache view modal

---
 react/src/actions/actionCreators.js           |   8 +
 react/src/components/dashboard/dashboard.js   |   1 +
 .../components/dashboard/walletsCacheData.js  | 178 ++++++++++++++++++
 react/src/components/dashboard/walletsData.js |  24 ++-
 .../dashboard/walletsNotariesList.js          |   6 +-
 react/src/reducers/dashboard.js               |   8 +-
 react/src/translate/en.js                     |   3 +-
 react/src/util/time.js                        |   4 +-
 8 files changed, 218 insertions(+), 14 deletions(-)
 create mode 100644 react/src/components/dashboard/walletsCacheData.js

diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js
index 76cbdf0..71c1dbe 100644
--- a/react/src/actions/actionCreators.js
+++ b/react/src/actions/actionCreators.js
@@ -46,6 +46,14 @@ export const DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR = 'DASHBOARD_ACTIVE_COIN_M
 export const DASHBOARD_GET_NOTARIES_LIST = 'DASHBOARD_GET_NOTARIES_LIST';
 export const DASHBOARD_DISPLAY_NOTARIES_MODAL = 'DASHBOARD_DISPLAY_NOTARIES_MODAL';
 export const DASHBOARD_CONNECT_NOTARIES = 'DASHBOARD_CONNECT_NOTARIES';
+export const VIEW_CACHE_DATA = 'VIEW_CACHE_DATA';
+
+export function toggleViewCacheModal(display) {
+  return {
+    type: VIEW_CACHE_DATA,
+    display,
+  }
+}
 
 export function displayNotariesModal(display) {
   return {
diff --git a/react/src/components/dashboard/dashboard.js b/react/src/components/dashboard/dashboard.js
index 2772273..1e89a36 100644
--- a/react/src/components/dashboard/dashboard.js
+++ b/react/src/components/dashboard/dashboard.js
@@ -27,6 +27,7 @@ class Dashboard extends React.Component {
 
   renderDashboard() {
     document.body.className = '';
+
     return (
       <div style={{height: '100%'}}>
         <div className={this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : ''} id="section-dashboard" data-edexcoin="COIN">
diff --git a/react/src/components/dashboard/walletsCacheData.js b/react/src/components/dashboard/walletsCacheData.js
new file mode 100644
index 0000000..887367f
--- /dev/null
+++ b/react/src/components/dashboard/walletsCacheData.js
@@ -0,0 +1,178 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+import { secondsToString } from '../../util/time';
+import { toggleViewCacheModal } from '../../actions/actionCreators';
+import Store from '../../store';
+import Tree, { TreeNode } from 'rc-tree';
+import { animation } from '../../util/rc-tree-animate';
+
+// TODO: refresh data render
+
+class WalletsCacheData extends React.Component {
+  constructor(props) {
+    super(props);
+    this.closeViewCacheModal = this.closeViewCacheModal.bind(this);
+  }
+
+  closeViewCacheModal() {
+    Store.dispatch(toggleViewCacheModal(false));
+  }
+
+  renderNotariesFetching() {
+    if (!this.props.ActiveCoin.cache) {
+      return (
+        <div>Fetching cache data...</div>
+      );
+    } else {
+      return (
+        <div>
+          <strong>{Object.keys(this.props.ActiveCoin.cache).length}</strong> coin(s) in cache file
+        </div>
+      );
+    }
+  }
+
+  renderKeyValueParent(pre, _sourceObj) {
+    if (_sourceObj.data[0] && Object.keys(_sourceObj.data[0]).length) {
+      return _sourceObj.data.map((key, value) =>
+        <TreeNode title={key.txid ? key.txid : `${pre}-array-${value}`} key={`{$pre}-${value}-array`}>
+          {this.renderArrayNode(`${pre}-array-${value}`, key)}
+        </TreeNode>);
+    } else {
+      return Object.keys(_sourceObj.data).map((key, value) => this.renderKeyValue(pre, key, value));
+    }
+  }
+
+  renderArrayNode(pre, obj) {
+    return Object.keys(obj).map((key, value) => this.renderKeyValue(`${pre}-${key}`, key, obj[key]));
+  }
+
+  renderKeyValue(pre, key, value) {
+    return (
+      <TreeNode title={`${key}: ${value}`} key={`{$pre}-${key}`} />
+    );
+  }
+
+  renderCallData(coin, address, call) {
+    const sourceObj = this.props.ActiveCoin.cache[coin][address];
+
+    if (sourceObj[call].data && (sourceObj[call].data.length || Object.keys(sourceObj[call].data).length)) {
+      return (
+        <TreeNode title={`${call}`} key={`${coin}-${address}-${call}`}>
+          <TreeNode title={`status: ${sourceObj[call].status}`} key={`${coin}-${address}-${call}-status`} />
+          <TreeNode title={`updated @: ${secondsToString(sourceObj[call].timestamp, true)}`} key={`${coin}-${address}-${call}-timestamp`} />
+          <TreeNode title="data" key={`${coin}-${address}-${call}-data`}>
+          {this.renderKeyValueParent(`${coin}-${address}-${call}`, sourceObj[call])}
+          </TreeNode>
+        </TreeNode>
+      );
+    } else {
+      return (
+        <TreeNode title={`${call} (no data)`} key={`${coin}-${address}-${call}`} />
+      );
+    }
+  }
+
+  renderAddressCallsList(coin, address) {
+    var allCalls = [];
+    const sourceObj = this.props.ActiveCoin.cache[coin][address];
+    const _allCalls = [
+      'listtransactions',
+      'listunspent',
+      'getbalance',
+      'refresh'
+    ];
+
+    for (let i = 0; i < _allCalls.length; i++) {
+      if (sourceObj[_allCalls[i]]) {
+        allCalls.push(_allCalls[i]);
+      }
+    }
+
+    if (sourceObj) {
+      return allCalls.map((call, index) => this.renderCallData(coin, address, call));
+    } else {
+      return null;
+    }
+  }
+
+  renderCoinAddressList(coin) {
+    const addrList = this.props.ActiveCoin.cache[coin].addresses;
+
+    if (addrList && addrList.length) {
+      return addrList.map((address, index) =>
+        <TreeNode title={`${address}`} key={`${coin}-${address}`}>
+        {this.renderAddressCallsList(coin, address)}
+        </TreeNode>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderCoinRootNodes() {
+    if (this.props.ActiveCoin.cache && Object.keys(this.props.ActiveCoin.cache).length) {
+      return Object.keys(this.props.ActiveCoin.cache).map((coinName, index) =>
+        <TreeNode title={`${coinName}`} key={`coin-${coinName}`}>
+          <TreeNode title="Address list" key={`${coinName}-addrlist`}>
+          {this.renderCoinAddressList(coinName)}
+          </TreeNode>
+        </TreeNode>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderCoinData() {
+    if (this.props.ActiveCoin.notaries && this.props.ActiveCoin.notaries.notaries && this.props.ActiveCoin.notaries.notaries.length) {
+      return this.props.ActiveCoin.notaries.notaries.map((node, index) =>
+        <TreeNode title={`Node ${index}`} key={`node-${index}`}>
+          <TreeNode key={`node-${index}-btc`} title={`BTC: ${node.BTCaddress}`} />
+          <TreeNode key={`node-${index}-kmd`} title={`KMD: ${node.KMDaddress}`} />
+          <TreeNode key={`node-${index}-pubkey`} title={`Pubkey: ${node.pubkey}`} />
+        </TreeNode>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.Dashboard.displayViewCacheModal) {
+
+      return (
+        <div>
+          <div className="modal show" aria-hidden="false" role="dialog">
+            <div className="modal-dialog modal-center modal-lg">
+              <div className="modal-content">
+                <div className="modal-body" style={{height: '590px'}}>
+                  <div className="panel nav-tabs-horizontal">
+                    <div className="panel-body">
+                      <div className="tab-content">
+                        <div className="tab-pane active" role="tabpanel">
+                          {this.renderNotariesFetching()}
+                          <Tree defaultExpandAll={false} openAnimation={animation}>
+                          {this.renderCoinRootNodes()}
+                          </Tree>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <button type="button" className="btn btn-default" onClick={this.closeViewCacheModal}>Close</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="modal-backdrop show in"></div>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+export default WalletsCacheData;
diff --git a/react/src/components/dashboard/walletsData.js b/react/src/components/dashboard/walletsData.js
index 24a576a..2c32ee9 100644
--- a/react/src/components/dashboard/walletsData.js
+++ b/react/src/components/dashboard/walletsData.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Config from '../../config';
 import { translate } from '../../translate/translate';
 import { secondsToString } from '../../util/time';
 import {
@@ -10,18 +11,20 @@ import {
   changeMainBasiliskAddress,
   displayNotariesModal,
   deleteCacheFile,
-  connectNotaries
+  connectNotaries,
+  toggleViewCacheModal
 } from '../../actions/actionCreators';
 import Store from '../../store';
 
 import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
 import WalletsBasiliskConnection from './walletsBasiliskConnection';
 import WalletsNotariesList from './walletsNotariesList';
+import WalletsCacheData from './walletsCacheData';
 
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
 
-const socket = io.connect('http://localhost:17777');
+const socket = io.connect('http://127.0.0.1:' + Config.agamaPort);
 
 class WalletsData extends React.Component {
   constructor(props) {
@@ -43,10 +46,15 @@ class WalletsData extends React.Component {
     this.getDexNotariesAction = this.getDexNotariesAction.bind(this);
     this.openDropMenu = this.openDropMenu.bind(this);
     this.refreshTxList = this.refreshTxList.bind(this);
-    this.removeAndfetchNewCache = this.removeAndfetchNewCache.bind(this);
+    this.removeAndFetchNewCache = this.removeAndFetchNewCache.bind(this);
+    this._toggleViewCacheModal = this._toggleViewCacheModal.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  _toggleViewCacheModal() {
+    Store.dispatch(toggleViewCacheModal(!this.props.Dashboard.displayViewCacheModal));
+  }
+
   updateSocketsData(data) {
     if (data && data.message && data.message.shepherd.iguanaAPI &&
         data.message.shepherd.iguanaAPI.totalStackLength) {
@@ -67,7 +75,7 @@ class WalletsData extends React.Component {
     }
   }
 
-  removeAndfetchNewCache() {
+  removeAndFetchNewCache() {
     Store.dispatch(deleteCacheFile({
       'pubkey': this.props.Dashboard.activeHandle.pubkey,
       'allcoins': false,
@@ -348,6 +356,7 @@ class WalletsData extends React.Component {
           <WalletsBasiliskRefresh {...this.props} />
           <WalletsBasiliskConnection {...this.props} />
           <WalletsNotariesList {...this.props} />
+          <WalletsCacheData {...this.props} />
           <div data-edexcoin="COIN" id="edexcoin_dashboardinfo">
             <div className="col-xs-12 margin-top-20">
               <div className="panel nav-tabs-horizontal">
@@ -387,10 +396,15 @@ class WalletsData extends React.Component {
                                 </a>
                               </li>
                               <li data-edexcoin="COIN" role="presentation">
-                                <a className="btn_edexcoin_dashboard_refetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refetchdata" role="menuitem" onClick={this.removeAndfetchNewCache}>
+                                <a className="btn_edexcoin_dashboard_refetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refetchdata" role="menuitem" onClick={this.removeAndFetchNewCache}>
                                   <i className="icon fa-cloud-download" aria-hidden="true"></i> {translate('INDEX.REFETCH_WALLET_DATA')}
                                 </a>
                               </li>
+                              <li data-edexcoin="COIN" role="presentation">
+                                <a className="btn_edexcoin_dashboard_fetchdata" role="menuitem" onClick={this._toggleViewCacheModal}>
+                                  <i className="icon fa-list-alt" aria-hidden="true"></i> {translate('INDEX.VIEW_CACHE_DATA')}
+                                </a>
+                              </li>
                             </ul>
                           </div>
                         </div>
diff --git a/react/src/components/dashboard/walletsNotariesList.js b/react/src/components/dashboard/walletsNotariesList.js
index 4eae35b..55f8546 100644
--- a/react/src/components/dashboard/walletsNotariesList.js
+++ b/react/src/components/dashboard/walletsNotariesList.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import { secondsToString } from '../../util/time';
-import { toggleDashboardTxInfoModal, displayNotariesModal } from '../../actions/actionCreators';
+import { displayNotariesModal } from '../../actions/actionCreators';
 import Store from '../../store';
 import Tree, { TreeNode } from 'rc-tree';
 import { animation } from '../../util/rc-tree-animate';
@@ -9,9 +8,6 @@ import { animation } from '../../util/rc-tree-animate';
 class WalletsNotariesList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      display: false,
-    };
     this.closeNotariesModal = this.closeNotariesModal.bind(this);
   }
 
diff --git a/react/src/reducers/dashboard.js b/react/src/reducers/dashboard.js
index 77480a1..13e8d72 100644
--- a/react/src/reducers/dashboard.js
+++ b/react/src/reducers/dashboard.js
@@ -5,7 +5,8 @@ import {
   SYNCING_FULL_MODE,
   SYNCING_NATIVE_MODE,
   BASILISK_CONNECTION,
-  DASHBOARD_CONNECT_NOTARIES
+  DASHBOARD_CONNECT_NOTARIES,
+  VIEW_CACHE_DATA
 } from '../actions/actionCreators';
 
 export function Dashboard(state = {
@@ -13,6 +14,7 @@ export function Dashboard(state = {
   activeHandle: null,
   basiliskRefresh: false,
   basiliskConnection: false,
+  displayViewCacheModal: false,
   connectedNotaries: {
     total: 0,
     current: 0,
@@ -58,6 +60,10 @@ export function Dashboard(state = {
           failedToConnectNodes: action.failedNode,
         }
       });
+    case VIEW_CACHE_DATA:
+      return Object.assign({}, state, {
+        displayViewCacheModal: action.display,
+      });
     default:
       return state;
   }
diff --git a/react/src/translate/en.js b/react/src/translate/en.js
index c644088..b2ee234 100644
--- a/react/src/translate/en.js
+++ b/react/src/translate/en.js
@@ -81,7 +81,8 @@ export const _lang = {
       'GET_NOTARY_NODES_LIST': 'Get Notary Nodes List',
       'REFRESH_BASILISK_CONNECTIONS': 'Refresh Basilisk Connections',
       'FETCH_WALLET_DATA': 'Fetch Wallet Data',
-      'REFETCH_WALLET_DATA': 'Clear cache and fetch Wallet Data',
+      'REFETCH_WALLET_DATA': 'Reset cache data',
+      'VIEW_CACHE_DATA': 'View cache data',
       'TRANSACTION_HISTORY': 'Transactions History',
       'DIRECTION': 'Direction',
       'CONFIRMATIONS': 'Confirmations',
diff --git a/react/src/util/time.js b/react/src/util/time.js
index 0ee7cb6..8cb8766 100644
--- a/react/src/util/time.js
+++ b/react/src/util/time.js
@@ -1,5 +1,5 @@
-export function secondsToString(seconds) {
-  var a = new Date(seconds * 1000),
+export function secondsToString(seconds, skipMultiply) {
+  var a = new Date(seconds * (skipMultiply ? 1 : 1000)),
       months = [
         'Jan',
         'Feb',