Skip to content

Commit

Permalink
add loader to detail pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@backslash47
backslash47 committed Apr 9, 2018
1 parent f9fa5cf commit e2bcaea
Show file tree
Hide file tree
Showing 12 changed files with 207 additions and 177 deletions.
16 changes: 6 additions & 10 deletions src/accounts/accountDetail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* along with The ONT Detective. If not, see <http://www.gnu.org/licenses/>.
*/

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';
Expand All @@ -30,37 +30,33 @@ interface PropsOuter {
}

interface PropsOwn {
txId: string;
accountId: string;
}

interface State {
account: Account;
loaded: boolean;
}

export interface PropsInner extends State, PropsOuter {
export interface PropsInner extends State, PropsOwn, PropsOuter {
}

export default compose<PropsInner, PropsOuter>(
withProps<PropsOwn, PropsOuter>(props => ({
txId: props.match.params.id
accountId: props.match.params.id
})),
withState<null, Partial<State>, 'state', 'setState'>('state', 'setState', {
loaded: false
}),
lifecycle<PropsOwn & StateSetter<State>, null>({
async componentDidMount() {
const account = await getAccount(this.props.txId);
const account = await getAccount(this.props.accountId);

this.props.setState({
account,
loaded: true
});
}
}),
flattenProp('state'),
branch<State>(
({loaded}) => !loaded,
renderNothing
)
flattenProp('state')
) (View);
94 changes: 53 additions & 41 deletions src/accounts/accountDetailView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -31,55 +31,67 @@ const Transaction: React.SFC<Props> = (props) => (
<Breadcrumb size="huge">
<Breadcrumb.Section as={Link} to="/accounts">Accounts</Breadcrumb.Section>
<Breadcrumb.Divider icon="right chevron" />
<Breadcrumb.Section active={true}>{props.account.address}</Breadcrumb.Section>
<Breadcrumb.Section active={true}>{props.accountId}</Breadcrumb.Section>
</Breadcrumb>
</Header>
</Segment>
<Segment>
<Table celled={false} basic="very" selectable={true} fixed={true}>
<Table.Body>
<Table.Row>
<Table.Cell width={1}>Created</Table.Cell>
<Table.Cell width={1}>
<Link to={`/transactions/${props.account.firstTx}`}>
<Popup trigger={<span>{distanceInWordsToNow(props.account.firstTime)}</span>}>
{format(props.account.firstTime, 'MMM Do YYYY HH:mm:ss')}
</Popup>
</Link>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Last transaction</Table.Cell>
<Table.Cell width={1}>
<Link to={`/transactions/${props.account.lastTx}`}>
<Popup trigger={<span>{distanceInWordsToNow(props.account.lastTime)}</span>}>
{format(props.account.lastTime, 'MMM Do YYYY HH:mm:ss')}
</Popup>
</Link>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Transactions count</Table.Cell>
<Table.Cell width={1}>{props.account.transactionsCount}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Segment>
<Segment>
<Header as="h2">Assets</Header>
<Table celled={false} basic="very" selectable={true} fixed={true}>
{!props.loaded ? (
<Table.Body>
{props.account.assets.map(assetBalance => (
<Table.Row>
<Table.Cell width={1} >{AssetIdToName[assetBalance.asset]}</Table.Cell>
<Table.Cell width={1} className="bold">{assetBalance.balance}</Table.Cell>
</Table.Row>
))}
<Table.Row>
<Table.Cell colSpan={2}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
) : (
<Table.Body>
<Table.Row>
<Table.Cell width={1}>Created</Table.Cell>
<Table.Cell width={1}>
<Link to={`/transactions/${props.account.firstTx}`}>
<Popup trigger={<span>{distanceInWordsToNow(props.account.firstTime)}</span>}>
{format(props.account.firstTime, 'MMM Do YYYY HH:mm:ss')}
</Popup>
</Link>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Last transaction</Table.Cell>
<Table.Cell width={1}>
<Link to={`/transactions/${props.account.lastTx}`}>
<Popup trigger={<span>{distanceInWordsToNow(props.account.lastTime)}</span>}>
{format(props.account.lastTime, 'MMM Do YYYY HH:mm:ss')}
</Popup>
</Link>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Transactions count</Table.Cell>
<Table.Cell width={1}>{props.account.transactionsCount}</Table.Cell>
</Table.Row>
</Table.Body>
)}
</Table>
</Segment>
{props.loaded ? (
<Segment>
<Header as="h2">Assets</Header>
<Table celled={false} basic="very" selectable={true} fixed={true}>
<Table.Body>
{props.account.assets.map(assetBalance => (
<Table.Row>
<Table.Cell width={1} >{AssetIdToName[assetBalance.asset]}</Table.Cell>
<Table.Cell width={1} className="bold">{assetBalance.balance}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</Segment>
) : null}

<AccountTransfers address={props.account.address} location={props.location} />
<AccountTransfers address={props.accountId} location={props.location} />
</Segment.Group>
);

Expand Down
2 changes: 1 addition & 1 deletion src/accounts/accountsGridView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const Accounts: React.SFC<Props> = (props) => (
<Table.Body>
{props.loading ? (
<Table.Row>
<Table.Cell colspan={6}>
<Table.Cell colSpan={6}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
Expand Down
8 changes: 2 additions & 6 deletions src/blocks/blockDetail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* along with The ONT Detective. If not, see <http://www.gnu.org/licenses/>.
*/

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';
Expand All @@ -38,7 +38,7 @@ interface State {
loaded: boolean;
}

export interface PropsInner extends State, PropsOuter {
export interface PropsInner extends State, PropsOwn, PropsOuter {
}

export default compose<PropsInner, PropsOuter>(
Expand All @@ -59,8 +59,4 @@ export default compose<PropsInner, PropsOuter>(
}
}),
flattenProp('state'),
branch<State>(
({loaded}) => !loaded,
renderNothing
)
) (View);
80 changes: 46 additions & 34 deletions src/blocks/blockDetailView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -31,47 +31,59 @@ const Block: React.SFC<Props> = (props) => (
<Breadcrumb size="huge">
<Breadcrumb.Section as={Link} to="/blocks">Blocks</Breadcrumb.Section>
<Breadcrumb.Divider icon="right chevron" />
<Breadcrumb.Section active={true}>{props.block.Height}</Breadcrumb.Section>
<Breadcrumb.Section active={true}>
{props.loaded ? props.block.Height : 'Loading'}
</Breadcrumb.Section>
</Breadcrumb>
</Header>
</Segment>
<Segment>
<Table celled={false} basic="very" selectable={true} fixed={true}>
<Table.Body>
<Table.Row>
<Table.Cell width={1}>Hash</Table.Cell>
<Table.Cell width={1}>{props.block.Hash}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Height</Table.Cell>
<Table.Cell width={1}>{props.block.Height}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Time</Table.Cell>
<Table.Cell width={1}>
<Popup trigger={<span>{distanceInWordsToNow(props.block.Timestamp)}</span>}>
{format(props.block.Timestamp, 'MMM Do YYYY HH:mm:ss')}
</Popup>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Validator</Table.Cell>
<Table.Cell width={1}>{props.block.NextBookkeeper}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Version</Table.Cell>
<Table.Cell width={1}>{props.block.Version}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Merkle root</Table.Cell>
<Table.Cell width={1}>{props.block.TransactionsRoot}</Table.Cell>
</Table.Row>
</Table.Body>
{!props.loaded ? (
<Table.Body>
<Table.Row>
<Table.Cell colSpan={2}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
</Table.Body>
) : (
<Table.Body>
<Table.Row>
<Table.Cell width={1}>Hash</Table.Cell>
<Table.Cell width={1}>{props.block.Hash}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Height</Table.Cell>
<Table.Cell width={1}>{props.block.Height}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Time</Table.Cell>
<Table.Cell width={1}>
<Popup trigger={<span>{distanceInWordsToNow(props.block.Timestamp)}</span>}>
{format(props.block.Timestamp, 'MMM Do YYYY HH:mm:ss')}
</Popup>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Validator</Table.Cell>
<Table.Cell width={1}>{props.block.NextBookkeeper}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Version</Table.Cell>
<Table.Cell width={1}>{props.block.Version}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width={1}>Merkle root</Table.Cell>
<Table.Cell width={1}>{props.block.TransactionsRoot}</Table.Cell>
</Table.Row>
</Table.Body>
)}
</Table>
</Segment>

<BlockTransactions blockHash={props.block.Hash} location={props.location} />
<BlockTransfers blockHash={props.block.Hash} location={props.location} />
<BlockTransactions blockHash={props.blockHash} location={props.location} />
<BlockTransfers blockHash={props.blockHash} location={props.location} />
</Segment.Group>
);

Expand Down
2 changes: 1 addition & 1 deletion src/blocks/blocksGridView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Blocks: React.SFC<Props> = (props: Props) => (
<Table.Body>
{props.loading ? (
<Table.Row>
<Table.Cell colspan={6}>
<Table.Cell colSpan={6}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
Expand Down
10 changes: 3 additions & 7 deletions src/transactions/transactionDetail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* along with The ONT Detective. If not, see <http://www.gnu.org/licenses/>.
*/

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';
Expand All @@ -38,7 +38,7 @@ interface State {
loaded: boolean;
}

export interface PropsInner extends State, PropsOuter {
export interface PropsInner extends State, PropsOwn, PropsOuter {
}

export default compose<PropsInner, PropsOuter>(
Expand All @@ -58,9 +58,5 @@ export default compose<PropsInner, PropsOuter>(
});
}
}),
flattenProp('state'),
branch<State>(
({loaded}) => !loaded,
renderNothing
)
flattenProp('state')
) (View);
Loading

0 comments on commit e2bcaea

Please sign in to comment.