From e6d97f04837a903a0179ae547235f91d625eb096 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Sat, 22 Apr 2017 19:43:28 +0300 Subject: [PATCH] notaries list modal --- react/package.json | 1 + react/src/components/dashboard/walletsData.js | 18 ++- .../dashboard/walletsNotariesList.js | 120 ++++++++++++++++++ react/src/reducers/activeCoin.js | 14 +- react/src/styles/index.scss | 35 +++++ 5 files changed, 181 insertions(+), 7 deletions(-) create mode 100644 react/src/components/dashboard/walletsNotariesList.js diff --git a/react/package.json b/react/package.json index f7b42bf..fab8aec 100644 --- a/react/package.json +++ b/react/package.json @@ -37,6 +37,7 @@ "bluebird": "^3.5.0", "express": "^4.14.0", "file-loader": "^0.10.0", + "rc-tree": "^1.4.6", "react": "^15.3.1", "react-dom": "^15.3.1", "react-hot-loader": "^1.3.0", diff --git a/react/src/components/dashboard/walletsData.js b/react/src/components/dashboard/walletsData.js index a8a5810..52d6bab 100644 --- a/react/src/components/dashboard/walletsData.js +++ b/react/src/components/dashboard/walletsData.js @@ -7,12 +7,14 @@ import { getDexNotaries, toggleDashboardTxInfoModal, getBasiliskTransactionsList, - changeMainBasiliskAddress + changeMainBasiliskAddress, + displayNotariesModal } from '../../actions/actionCreators'; import Store from '../../store'; import WalletsBasiliskRefresh from './walletsBasiliskRefresh'; import WalletsBasiliskConnection from './walletsBasiliskConnection'; +import WalletsNotariesList from './walletsNotariesList'; import { SocketProvider } from 'socket.io-react'; import io from 'socket.io-client'; @@ -43,19 +45,21 @@ class WalletsData extends React.Component { } updateSocketsData(data) { - console.log(data); - - if (data && data.message && data.message.shepherd.iguanaAPI && data.message.shepherd.iguanaAPI.totalStackLength) { + if (data && data.message && data.message.shepherd.iguanaAPI && + data.message.shepherd.iguanaAPI.totalStackLength) { this.setState(Object.assign({}, this.state, { totalStackLength: data.message.shepherd.iguanaAPI.totalStackLength, })); } - if (data && data.message && data.message.shepherd.iguanaAPI && data.message.shepherd.iguanaAPI.currentStackLength) { + if (data && data.message && data.message.shepherd.iguanaAPI && + data.message.shepherd.iguanaAPI.currentStackLength) { this.setState(Object.assign({}, this.state, { currentStackLength: data.message.shepherd.iguanaAPI.currentStackLength, })); } - if (data && data.message && data.message.shepherd.method && data.message.shepherd.method === 'cache-one' && data.message.shepherd.status === 'done') { + if (data && data.message && data.message.shepherd.method && + data.message.shepherd.method === 'cache-one' && + data.message.shepherd.status === 'done') { Store.dispatch(basiliskRefresh(false)); } } @@ -80,6 +84,7 @@ class WalletsData extends React.Component { getDexNotariesAction() { Store.dispatch(getDexNotaries(this.props.ActiveCoin.coin)); + Store.dispatch(displayNotariesModal(true)); } updateInput(e) { @@ -329,6 +334,7 @@ class WalletsData extends React.Component { +
diff --git a/react/src/components/dashboard/walletsNotariesList.js b/react/src/components/dashboard/walletsNotariesList.js new file mode 100644 index 0000000..1808888 --- /dev/null +++ b/react/src/components/dashboard/walletsNotariesList.js @@ -0,0 +1,120 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import { secondsToString } from '../../util/time'; +import { toggleDashboardTxInfoModal, displayNotariesModal } from '../../actions/actionCreators'; +import Store from '../../store'; +import Tree, { TreeNode } from 'rc-tree'; + +function animate(node, show, done) { + let height = node.offsetHeight; + + return cssAnimation(node, 'collapse', { + start() { + if (!show) { + node.style.height = `${node.offsetHeight}px`; + } else { + height = node.offsetHeight; + node.style.height = 0; + } + }, + active() { + node.style.height = `${show ? height : 0}px`; + }, + end() { + node.style.height = ''; + done(); + }, + }); +} + +const animation = { + enter(node, done) { + return animate(node, true, done); + }, + leave(node, done) { + return animate(node, false, done); + }, + appear(node, done) { + return animate(node, true, done); + }, +}; + +class WalletsNotariesList extends React.Component { + constructor(props) { + super(props); + this.state = { + display: false, + }; + this.closeNotariesModal = this.closeNotariesModal.bind(this); + } + + closeNotariesModal() { + Store.dispatch(displayNotariesModal(false)); + } + + renderNotariesFetching() { + if (!this.props.ActiveCoin.notaries) { + return ( +
Fetching notaries list data...
+ ); + } else { + return ( +
Notaries list. Total nodes count: {this.props.ActiveCoin.notaries.numnotaries}
+ ); + } + } + + renderNotariesList() { + 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) => + + + + + + ); + } else { + return null; + } + } + + render() { + if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.ActiveCoin.displayNotariesModal) { + const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null; + + return ( +
+ +
+
+ ); + } else { + return null; + } + } +} + +export default WalletsNotariesList; diff --git a/react/src/reducers/activeCoin.js b/react/src/reducers/activeCoin.js index 8c45065..4bf268a 100644 --- a/react/src/reducers/activeCoin.js +++ b/react/src/reducers/activeCoin.js @@ -12,7 +12,9 @@ import { DASHBOARD_ACTIVE_COIN_NATIVE_OPIDS, DASHBOARD_ACTIVE_COIN_SENDTO, DASHBOARD_ACTIVE_COIN_GET_CACHE, - DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR + DASHBOARD_ACTIVE_COIN_MAIN_BASILISK_ADDR, + DASHBOARD_GET_NOTARIES_LIST, + DASHBOARD_DISPLAY_NOTARIES_MODAL } from '../actions/actionCreators'; // TODO: keep all coin data in array of objects instead of single object @@ -31,6 +33,8 @@ export function ActiveCoin(state = { lastSendToResponse: null, cache: null, mainBasiliskAddress: null, + notaries: null, + displayNotariesModal: false, }, action) { switch (action.type) { case DASHBOARD_ACTIVE_COIN_CHANGE: @@ -101,6 +105,14 @@ export function ActiveCoin(state = { return Object.assign({}, state, { mainBasiliskAddress: action.address, }); + case DASHBOARD_GET_NOTARIES_LIST: + return Object.assign({}, state, { + notaries: action.notaries, + }); + case DASHBOARD_DISPLAY_NOTARIES_MODAL: + return Object.assign({}, state, { + displayNotariesModal: action.display, + }); default: return state; } diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss index 8978a0a..cf6c41e 100644 --- a/react/src/styles/index.scss +++ b/react/src/styles/index.scss @@ -30,6 +30,7 @@ @import '../assets/global/fonts/web-icons/web-icons.css'; @import '../assets/global/fonts/brand-icons/brand-icons.min.css'; @import '../assets/skins/orange.min.css'; +@import '../../node_modules/rc-tree/assets/index.css'; #app > div { height: 100%; @@ -108,6 +109,40 @@ body { cursor: hand; } +.collapse { + overflow: hidden; + display: block; +} + +.collapse-active { + transition: height 0.3s ease-out; +} + +.rc-tree { + height: 450px; + overflow-y: scroll; + margin-top: 20px; + + a { + pointer-events: none; + } + li span.rc-tree-iconEle { + display: none; + } +} + +.rc-tree-node-content-wrapper-close + ul { + display: none; +} +.rc-tree-node-content-wrapper { + user-select: none; +} +.rc-tree-node-content-wrapper-normal { + color: inherit; + pointer-events: all; + user-select: all; +} + /*.toaster .single-toast:nth-child(0) { bottom: 12px; }