Skip to content

Commit

Permalink
fix account grid, add loader to grids
Browse files Browse the repository at this point in the history
  • Loading branch information
@backslash47
backslash47 committed Apr 9, 2018
1 parent c52428f commit f9fa5cf
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 16 deletions.
23 changes: 19 additions & 4 deletions src/accounts/accountsGridView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import * as React from 'react';
import { Link } from 'react-router-dom';
import { distanceInWordsToNow, format } from 'date-fns';
import { get, find } from 'lodash';
import { Segment, Breadcrumb, Table, Button, Popup, Header } from 'semantic-ui-react';
import { Segment, Breadcrumb, Table, Button, Popup, Header, Loader } from 'semantic-ui-react';
import { Props } from './accountsGrid';
import { Assets } from '~/const';

Expand All @@ -34,42 +34,57 @@ const Accounts: React.SFC<Props> = (props) => (
</Header>
</Segment>
<Segment>
<Table celled={false} basic="very" selectable={true} sortable={true}>
<Table celled={false} basic="very" selectable={true} sortable={true} fixed={true}>
<Table.Header>
<Table.Row>
<Table.HeaderCell
sorted={props.sort === 'address' ? props.order : undefined}
selectable={true}
width={6}
>
<Link to={props.getColumnSortLink('address')}>Address</Link>
</Table.HeaderCell>
<Table.HeaderCell
sorted={props.sort === 'firstTime' ? props.order : undefined}
selectable={true}
width={2}
>
<Link to={props.getColumnSortLink('firstTime')}>Created</Link>
</Table.HeaderCell>
<Table.HeaderCell
sorted={props.sort === 'lastTime' ? props.order : undefined}
selectable={true}
width={2}
>
<Link to={props.getColumnSortLink('lastTime')}>Last transaction</Link>
</Table.HeaderCell>
<Table.HeaderCell
sorted={props.sort === 'transactionsCount' ? props.order : undefined}
selectable={true}
width={2}
>
<Link to={props.getColumnSortLink('transactionsCount')}>Transfers</Link>
</Table.HeaderCell>
<Table.HeaderCell>
<Table.HeaderCell
width={2}
>
ONT
</Table.HeaderCell>
<Table.HeaderCell>
<Table.HeaderCell
width={2}
>
ONG
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{props.loading ? (
<Table.Row>
<Table.Cell colspan={6}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
) : null}
{props.items.map(account => (
<Table.Row key={account.address}>
<Table.Cell selectable={true}>
Expand Down
17 changes: 12 additions & 5 deletions src/blocks/blocksGridView.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 { Table, Breadcrumb, Segment, Button, Popup, Header } from 'semantic-ui-react';
import { Table, Breadcrumb, Segment, Button, Popup, Header, Loader } from 'semantic-ui-react';
import { distanceInWordsToNow, format } from 'date-fns';
import { Props } from './blocksGrid';

Expand All @@ -36,28 +36,28 @@ const Blocks: React.SFC<Props> = (props: Props) => (
<Table.Header>
<Table.Row>
<Table.HeaderCell
width={1}
width={2}
sorted={props.sort === 'Height' ? props.order : undefined}
selectable={true}
>
<Link to={props.getColumnSortLink('Height')}>Height</Link>
</Table.HeaderCell>
<Table.HeaderCell
width={4}
width={10}
sorted={props.sort === 'Hash' ? props.order : undefined}
selectable={true}
>
<Link to={props.getColumnSortLink('Hash')}>Hash</Link>
</Table.HeaderCell>
<Table.HeaderCell
width={1}
width={2}
sorted={props.sort === 'TransactionsCount' ? props.order : undefined}
selectable={true}
>
<Link to={props.getColumnSortLink('TransactionsCount')}>Transactions</Link>
</Table.HeaderCell>
<Table.HeaderCell
width={1}
width={2}
sorted={props.sort === 'Timestamp' ? props.order : undefined}
selectable={true}
>
Expand All @@ -66,6 +66,13 @@ const Blocks: React.SFC<Props> = (props: Props) => (
</Table.Row>
</Table.Header>
<Table.Body>
{props.loading ? (
<Table.Row>
<Table.Cell colspan={6}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
) : null}
{props.items.map(block => (
<Table.Row key={block.Hash}>
<Table.Cell selectable={true}>
Expand Down
1 change: 1 addition & 0 deletions src/common/gridTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export interface PropsOwn<SC> extends QueryParams<SC> {
}

export interface State<T> {
loading: boolean;
items: T[];
count: number;
firstIndex: number;
Expand Down
7 changes: 6 additions & 1 deletion src/common/innerGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function innerGrid<T, SC>(prefix: string): ComponentEnhancer<PropsInner<T, SC>,
};
}),
withState<PropsOuter<T, SC>, State<T>, 'state', 'setState'>('state', 'setState', ({ location }) => ({
loading: false,
items: [],
count: 0,
prevLink: location,
Expand All @@ -49,8 +50,11 @@ function innerGrid<T, SC>(prefix: string): ComponentEnhancer<PropsInner<T, SC>,
pageSize,
setState,
location,
dataLoader
dataLoader,
state
}) => async (page: number, sort: SC, order: Direction) => {

setState({...state, loading: true});

const { count, items } = await dataLoader(page * pageSize, pageSize, sort, order);

Expand All @@ -66,6 +70,7 @@ function innerGrid<T, SC>(prefix: string): ComponentEnhancer<PropsInner<T, SC>,
location;

setState({
loading: false,
items,
count,
firstIndex,
Expand Down
7 changes: 6 additions & 1 deletion src/common/remoteGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function remoteGrid<T, SC>(): ComponentEnhancer<PropsInner<T, SC>, PropsOuter<T,
};
}),
withState<PropsOuter<T, SC>, State<T>, 'state', 'setState'>('state', 'setState', ({ location }) => ({
loading: false,
items: [],
count: 0,
prevLink: location,
Expand All @@ -49,8 +50,11 @@ function remoteGrid<T, SC>(): ComponentEnhancer<PropsInner<T, SC>, PropsOuter<T,
pageSize,
setState,
location,
dataLoader
dataLoader,
state
}) => async (page: number, sort: SC, order: Direction) => {

setState({...state, loading: true});

const { count, items } = await dataLoader(page * pageSize, pageSize, sort, order);

Expand All @@ -61,6 +65,7 @@ function remoteGrid<T, SC>(): ComponentEnhancer<PropsInner<T, SC>, PropsOuter<T,
const nextLink = lastIndex < count ? changeQueryParam(location, 'page', String(page + 1)) : location;

setState({
loading: false,
items,
count,
firstIndex,
Expand Down
15 changes: 11 additions & 4 deletions src/transactions/transactionsGridView.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 { Table, Breadcrumb, Segment, Button, Popup, Header } from 'semantic-ui-react';
import { Table, Breadcrumb, Segment, Button, Popup, Header, Loader } from 'semantic-ui-react';
import { distanceInWordsToNow, format } from 'date-fns';
import { Props } from './transactionsGrid';
import { TxName } from '~/shared/ont/model';
Expand All @@ -41,27 +41,34 @@ const Transactions: React.SFC<Props> = (props) => (
<Table.HeaderCell
sorted={props.sort === 'TxType' ? props.order : undefined}
selectable={true}
width={1}
width={3}
>
<Link to={props.getColumnSortLink('TxType')}>Type</Link>
</Table.HeaderCell>
<Table.HeaderCell
sorted={props.sort === 'Hash' ? props.order : undefined}
selectable={true}
width={5}
width={11}
>
<Link to={props.getColumnSortLink('Hash')}>Hash</Link>
</Table.HeaderCell>
<Table.HeaderCell
sorted={props.sort === 'Timestamp' ? props.order : undefined}
selectable={true}
width={1}
width={2}
>
<Link to={props.getColumnSortLink('Timestamp')}>Time</Link>
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{props.loading ? (
<Table.Row>
<Table.Cell colspan={6}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
) : null}
{props.items.map(transaction => (
<Table.Row key={transaction.Hash}>
<Table.Cell selectable={true}>
Expand Down
9 changes: 8 additions & 1 deletion src/transfers/transfersGridView.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 { Table, Breadcrumb, Segment, Button, Popup, Header } from 'semantic-ui-react';
import { Table, Breadcrumb, Segment, Button, Popup, Header, Loader } from 'semantic-ui-react';
import { distanceInWordsToNow, format } from 'date-fns';
import { Props } from './transfersGrid';
import { AssetIdToName } from '~/const';
Expand Down Expand Up @@ -83,6 +83,13 @@ const Transfers: React.SFC<Props> = (props) => (
</Table.Row>
</Table.Header>
<Table.Body>
{props.loading ? (
<Table.Row>
<Table.Cell colspan={6}>
<Loader active={true} inline="centered"/>
</Table.Cell>
</Table.Row>
) : null}
{props.items.map(transfer => (
<Table.Row key={transfer.Id} negative={!transfer.Result}>
<Table.Cell selectable={true}>
Expand Down

0 comments on commit f9fa5cf

Please sign in to comment.