From e2bcaea1480d07749b87350eee2a78decf35d470 Mon Sep 17 00:00:00 2001 From: Matus Zamborsky Date: Mon, 9 Apr 2018 15:08:23 +0200 Subject: [PATCH] add loader to detail pages --- src/accounts/accountDetail.ts | 16 ++-- src/accounts/accountDetailView.tsx | 94 ++++++++++++---------- src/accounts/accountsGridView.tsx | 2 +- src/blocks/blockDetail.ts | 8 +- src/blocks/blockDetailView.tsx | 80 ++++++++++-------- src/blocks/blocksGridView.tsx | 2 +- src/transactions/transactionDetail.ts | 10 +-- src/transactions/transactionDetailView.tsx | 66 ++++++++------- src/transactions/transactionsGridView.tsx | 2 +- src/transfers/transferDetail.ts | 8 +- src/transfers/transferDetailView.tsx | 94 ++++++++++++---------- src/transfers/transfersGridView.tsx | 2 +- 12 files changed, 207 insertions(+), 177 deletions(-) diff --git a/src/accounts/accountDetail.ts b/src/accounts/accountDetail.ts index 5169071..08bb005 100644 --- a/src/accounts/accountDetail.ts +++ b/src/accounts/accountDetail.ts @@ -16,7 +16,7 @@ * along with The ONT Detective. If not, see . */ -import { compose, lifecycle, branch, renderNothing, withProps, withState, flattenProp } from 'recompose'; +import { compose, lifecycle, withProps, withState, flattenProp } from 'recompose'; import { match } from 'react-router'; import { Location } from 'history'; import { StateSetter } from '~/utils'; @@ -30,7 +30,7 @@ interface PropsOuter { } interface PropsOwn { - txId: string; + accountId: string; } interface State { @@ -38,19 +38,19 @@ interface State { loaded: boolean; } -export interface PropsInner extends State, PropsOuter { +export interface PropsInner extends State, PropsOwn, PropsOuter { } export default compose( withProps(props => ({ - txId: props.match.params.id + accountId: props.match.params.id })), withState, 'state', 'setState'>('state', 'setState', { loaded: false }), lifecycle, null>({ async componentDidMount() { - const account = await getAccount(this.props.txId); + const account = await getAccount(this.props.accountId); this.props.setState({ account, @@ -58,9 +58,5 @@ export default compose( }); } }), - flattenProp('state'), - branch( - ({loaded}) => !loaded, - renderNothing - ) + flattenProp('state') ) (View); diff --git a/src/accounts/accountDetailView.tsx b/src/accounts/accountDetailView.tsx index 429f6ff..e7400fb 100644 --- a/src/accounts/accountDetailView.tsx +++ b/src/accounts/accountDetailView.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Breadcrumb, Segment, Table, Header, Popup } from 'semantic-ui-react'; +import { Breadcrumb, Segment, Table, Header, Popup, Loader } from 'semantic-ui-react'; import { distanceInWordsToNow, format } from 'date-fns'; import { AssetIdToName } from '~/const'; import { PropsInner as Props } from './accountDetail'; @@ -31,55 +31,67 @@ const Transaction: React.SFC = (props) => ( Accounts - {props.account.address} + {props.accountId} - - - Created - - - {distanceInWordsToNow(props.account.firstTime)}}> - {format(props.account.firstTime, 'MMM Do YYYY HH:mm:ss')} - - - - - - Last transaction - - - {distanceInWordsToNow(props.account.lastTime)}}> - {format(props.account.lastTime, 'MMM Do YYYY HH:mm:ss')} - - - - - - Transactions count - {props.account.transactionsCount} - - -
- - -
Assets
- + {!props.loaded ? ( - {props.account.assets.map(assetBalance => ( - - {AssetIdToName[assetBalance.asset]} - {assetBalance.balance} - - ))} + + + + + -
+ ) : ( + + + Created + + + {distanceInWordsToNow(props.account.firstTime)}}> + {format(props.account.firstTime, 'MMM Do YYYY HH:mm:ss')} + + + + + + Last transaction + + + {distanceInWordsToNow(props.account.lastTime)}}> + {format(props.account.lastTime, 'MMM Do YYYY HH:mm:ss')} + + + + + + Transactions count + {props.account.transactionsCount} + + + )} + + {props.loaded ? ( + +
Assets
+ + + {props.account.assets.map(assetBalance => ( + + {AssetIdToName[assetBalance.asset]} + {assetBalance.balance} + + ))} + +
+ + ) : null} - + ); diff --git a/src/accounts/accountsGridView.tsx b/src/accounts/accountsGridView.tsx index cb597d2..7951ee2 100644 --- a/src/accounts/accountsGridView.tsx +++ b/src/accounts/accountsGridView.tsx @@ -80,7 +80,7 @@ const Accounts: React.SFC = (props) => ( {props.loading ? ( - + diff --git a/src/blocks/blockDetail.ts b/src/blocks/blockDetail.ts index 721472c..20a5f05 100644 --- a/src/blocks/blockDetail.ts +++ b/src/blocks/blockDetail.ts @@ -16,7 +16,7 @@ * along with The ONT Detective. If not, see . */ -import { compose, lifecycle, branch, renderNothing, withState, withProps, flattenProp } from 'recompose'; +import { compose, lifecycle, withState, withProps, flattenProp } from 'recompose'; import { match } from 'react-router'; import { Location } from 'history'; import { StateSetter } from '~/utils'; @@ -38,7 +38,7 @@ interface State { loaded: boolean; } -export interface PropsInner extends State, PropsOuter { +export interface PropsInner extends State, PropsOwn, PropsOuter { } export default compose( @@ -59,8 +59,4 @@ export default compose( } }), flattenProp('state'), - branch( - ({loaded}) => !loaded, - renderNothing - ) ) (View); diff --git a/src/blocks/blockDetailView.tsx b/src/blocks/blockDetailView.tsx index cdd8458..4b60544 100644 --- a/src/blocks/blockDetailView.tsx +++ b/src/blocks/blockDetailView.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Breadcrumb, Segment, Table, Header, Popup } from 'semantic-ui-react'; +import { Breadcrumb, Segment, Table, Header, Popup, Loader } from 'semantic-ui-react'; import { distanceInWordsToNow, format } from 'date-fns'; import BlockTransactions from './blockTransactions'; import BlockTransfers from './blockTransfers'; @@ -31,47 +31,59 @@ const Block: React.SFC = (props) => ( Blocks - {props.block.Height} + + {props.loaded ? props.block.Height : 'Loading'} + - - - Hash - {props.block.Hash} - - - Height - {props.block.Height} - - - Time - - {distanceInWordsToNow(props.block.Timestamp)}}> - {format(props.block.Timestamp, 'MMM Do YYYY HH:mm:ss')} - - - - - Validator - {props.block.NextBookkeeper} - - - Version - {props.block.Version} - - - Merkle root - {props.block.TransactionsRoot} - - + {!props.loaded ? ( + + + + + + + + ) : ( + + + Hash + {props.block.Hash} + + + Height + {props.block.Height} + + + Time + + {distanceInWordsToNow(props.block.Timestamp)}}> + {format(props.block.Timestamp, 'MMM Do YYYY HH:mm:ss')} + + + + + Validator + {props.block.NextBookkeeper} + + + Version + {props.block.Version} + + + Merkle root + {props.block.TransactionsRoot} + + + )}
- - + + ); diff --git a/src/blocks/blocksGridView.tsx b/src/blocks/blocksGridView.tsx index 72ea9ea..8408194 100644 --- a/src/blocks/blocksGridView.tsx +++ b/src/blocks/blocksGridView.tsx @@ -68,7 +68,7 @@ const Blocks: React.SFC = (props: Props) => ( {props.loading ? ( - + diff --git a/src/transactions/transactionDetail.ts b/src/transactions/transactionDetail.ts index ae659aa..0cb7ef8 100644 --- a/src/transactions/transactionDetail.ts +++ b/src/transactions/transactionDetail.ts @@ -16,7 +16,7 @@ * along with The ONT Detective. If not, see . */ -import { compose, lifecycle, branch, renderNothing, withProps, withState, flattenProp } from 'recompose'; +import { compose, lifecycle, withProps, withState, flattenProp } from 'recompose'; import { match } from 'react-router'; import { Location } from 'history'; import { StateSetter } from '~/utils'; @@ -38,7 +38,7 @@ interface State { loaded: boolean; } -export interface PropsInner extends State, PropsOuter { +export interface PropsInner extends State, PropsOwn, PropsOuter { } export default compose( @@ -58,9 +58,5 @@ export default compose( }); } }), - flattenProp('state'), - branch( - ({loaded}) => !loaded, - renderNothing - ) + flattenProp('state') ) (View); diff --git a/src/transactions/transactionDetailView.tsx b/src/transactions/transactionDetailView.tsx index 015978a..a0fcb3a 100644 --- a/src/transactions/transactionDetailView.tsx +++ b/src/transactions/transactionDetailView.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Breadcrumb, Segment, Table, Header, Popup } from 'semantic-ui-react'; +import { Breadcrumb, Segment, Table, Header, Popup, Loader } from 'semantic-ui-react'; import { distanceInWordsToNow, format } from 'date-fns'; import { TxName } from '~/shared/ont/model'; import { PropsInner as Props } from './transactionDetail'; @@ -31,40 +31,52 @@ const Transaction: React.SFC = (props) => ( Transactions - {props.transaction.Hash} + {props.txId} - - - Type - {TxName[props.transaction.TxType]} - - - Time - - {distanceInWordsToNow(props.transaction.Timestamp)}}> - {format(props.transaction.Timestamp, 'MMM Do YYYY HH:mm:ss')} - - - - - Network fee - {props.transaction.NetworkFee} ONG - - - Block - - {props.transaction.BlockIndex} - - - + {!props.loaded ? ( + + + + + + + + ) : ( + + + Type + {TxName[props.transaction.TxType]} + + + Time + + {distanceInWordsToNow(props.transaction.Timestamp)}}> + {format(props.transaction.Timestamp, 'MMM Do YYYY HH:mm:ss')} + + + + + Network fee + {props.transaction.NetworkFee} ONG + + + Block + + + {props.transaction.BlockIndex} + + + + + )}
- + ); diff --git a/src/transactions/transactionsGridView.tsx b/src/transactions/transactionsGridView.tsx index f1746fd..407bc07 100644 --- a/src/transactions/transactionsGridView.tsx +++ b/src/transactions/transactionsGridView.tsx @@ -64,7 +64,7 @@ const Transactions: React.SFC = (props) => ( {props.loading ? ( - + diff --git a/src/transfers/transferDetail.ts b/src/transfers/transferDetail.ts index be7d011..34e0f3b 100644 --- a/src/transfers/transferDetail.ts +++ b/src/transfers/transferDetail.ts @@ -16,7 +16,7 @@ * along with The ONT Detective. If not, see . */ -import { compose, lifecycle, branch, renderNothing, withProps, withState, flattenProp } from 'recompose'; +import { compose, lifecycle, withProps, withState, flattenProp } from 'recompose'; import { match } from 'react-router'; import { StateSetter } from '~/utils'; import { Transfer } from '~/shared/ont/model'; @@ -36,7 +36,7 @@ interface State { loaded: boolean; } -export interface PropsInner extends State { +export interface PropsInner extends State, PropsOwn { } export default compose( @@ -57,8 +57,4 @@ export default compose( } }), flattenProp('state'), - branch( - ({loaded}) => !loaded, - renderNothing - ) ) (View); diff --git a/src/transfers/transferDetailView.tsx b/src/transfers/transferDetailView.tsx index 8e5f206..a8beedd 100644 --- a/src/transfers/transferDetailView.tsx +++ b/src/transfers/transferDetailView.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Breadcrumb, Segment, Table, Header, Popup } from 'semantic-ui-react'; +import { Breadcrumb, Segment, Table, Header, Popup, Loader } from 'semantic-ui-react'; import { distanceInWordsToNow, format } from 'date-fns'; import { AssetIdToName } from '~/const'; import { PropsInner as Props } from './transferDetail'; @@ -30,52 +30,62 @@ const Transfer: React.SFC = (props) => ( Transfers - {props.transfer.Id} + {props.id} - - - Asset - - {props.transfer.Value} {AssetIdToName[props.transfer.Asset]} - - - - Time - - {distanceInWordsToNow(props.transfer.Timestamp)}}> - {format(props.transfer.Timestamp, 'MMM Do YYYY HH:mm:ss')} - - - - - From - - {props.transfer.From} - - - - To - - {props.transfer.To} - - - - Transaction - - {props.transfer.TxHash} - - - - Block - - {props.transfer.BlockIndex} - - - + {!props.loaded ? ( + + + + + + + + ) : ( + + + Asset + + {props.transfer.Value} {AssetIdToName[props.transfer.Asset]} + + + + Time + + {distanceInWordsToNow(props.transfer.Timestamp)}}> + {format(props.transfer.Timestamp, 'MMM Do YYYY HH:mm:ss')} + + + + + From + + {props.transfer.From} + + + + To + + {props.transfer.To} + + + + Transaction + + {props.transfer.TxHash} + + + + Block + + {props.transfer.BlockIndex} + + + + )}
diff --git a/src/transfers/transfersGridView.tsx b/src/transfers/transfersGridView.tsx index 6cbaba7..6496245 100644 --- a/src/transfers/transfersGridView.tsx +++ b/src/transfers/transfersGridView.tsx @@ -85,7 +85,7 @@ const Transfers: React.SFC = (props) => ( {props.loading ? ( - +