import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import FlatButton from 'material-ui/FlatButton'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { colors } from 'ts/utils/colors'; export interface RelayerIndexProps { networkId: number; screenWidth: ScreenWidths; } interface RelayerIndexState { relayerInfos?: WebsiteBackendRelayerInfo[]; error?: Error; } const styles: Styles = { root: { width: '100%', }, item: { backgroundColor: colors.white, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10, boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, overflow: 'hidden', padding: 4, }, }; const CELL_HEIGHT = 290; const NUMBER_OF_COLUMNS_LARGE = 4; const NUMBER_OF_COLUMNS_MEDIUM = 3; const NUMBER_OF_COLUMNS_SMALL = 1; const GRID_PADDING = 20; export class RelayerIndex extends React.Component { private _isUnmounted: boolean; constructor(props: RelayerIndexProps) { super(props); this._isUnmounted = false; this.state = { relayerInfos: undefined, error: undefined, }; } public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchRelayerInfosAsync(); } public componentWillUnmount(): void { this._isUnmounted = true; } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); if (!isReadyToRender) { return ( // TODO: consolidate this loading component with the one in portal
{_.isUndefined(this.state.error) ? ( ) : ( )}
); } else { const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth); return (
{this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( ))}
); } } private async _fetchRelayerInfosAsync(): Promise { try { if (!this._isUnmounted) { this.setState({ relayerInfos: undefined, error: undefined, }); } const relayerInfos = await backendClient.getRelayerInfosAsync(); if (!this._isUnmounted) { this.setState({ relayerInfos, }); } } catch (error) { if (!this._isUnmounted) { this.setState({ error, }); } } } private _numberOfColumnsForScreenWidth(screenWidth: ScreenWidths): number { switch (screenWidth) { case ScreenWidths.Md: return NUMBER_OF_COLUMNS_MEDIUM; case ScreenWidths.Sm: return NUMBER_OF_COLUMNS_SMALL; case ScreenWidths.Lg: default: return NUMBER_OF_COLUMNS_LARGE; } } } interface RetryProps { onRetry: () => void; } const Retry = (props: RetryProps) => (
Something went wrong.
);