1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
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<RelayerIndexProps, RelayerIndexState> {
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
<div className="center">
{_.isUndefined(this.state.error) ? (
<CircularProgress size={40} thickness={5} />
) : (
<Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} />
)}
</div>
);
} else {
const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
return (
<div style={styles.root}>
<GridList
cellHeight={CELL_HEIGHT}
cols={numberOfColumns}
padding={GRID_PADDING}
style={styles.gridList}
>
{this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
<RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
))}
</GridList>
</div>
);
}
}
private async _fetchRelayerInfosAsync(): Promise<void> {
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) => (
<div className="clearfix center" style={{ color: colors.black }}>
<div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}>
<div className="h2" style={{ fontFamily: 'Roboto Mono' }}>
Something went wrong.
</div>
<div className="py3">
<FlatButton
label={'reload'}
backgroundColor={colors.black}
labelStyle={{
fontSize: 18,
fontFamily: 'Roboto Mono',
fontWeight: 'lighter',
color: colors.white,
textTransform: 'lowercase',
}}
style={{ width: 280, height: 62, borderRadius: 5 }}
onClick={props.onRetry}
/>
</div>
</div>
</div>
);
|
