crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix all setState calls after unmounted errors. Decided to create our own flag rather then using a cancellablePromise since there was little to be gained from this alternative

Browse Source
This commit is contained in:
Fabio Berger 2018-01-30 20:12:32 +01:00
parent 144a507a2e
commit e219772b2a
7 changed files with 90 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
View File

@ -33,8 +33,10 @@ export class EthWethConversionDialog extends React.Component<
EthWethConversionDialogProps,
EthWethConversionDialogState
> {
private _isUnmounted: boolean;
constructor() {
super();
this._isUnmounted = false;
this.state = {
shouldShowIncompleteErrs: false,
hasErrors: false,
@ -46,6 +48,9 @@ export class EthWethConversionDialog extends React.Component<
// tslint:disable-next-line:no-floating-promises
this._fetchEthTokenBalanceAsync();
}
public componentWillUnmount() {
this._isUnmounted = true;
}
public render() {
const convertDialogActions = [
<FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
@ -181,9 +186,11 @@ export class EthWethConversionDialog extends React.Component<
this.props.userAddress,
this.props.token.address,
);
this.setState({
isEthTokenBalanceLoaded: true,
ethTokenBalance: balance,
});
if (!this._isUnmounted) {
this.setState({
isEthTokenBalanceLoaded: true,
ethTokenBalance: balance,
});
}
}
}

25
packages/website/ts/components/eth_wrappers.tsx
View File

@ -54,8 +54,10 @@ interface EthWrappersState {
}
export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> {
private _isUnmounted: boolean;
constructor(props: EthWrappersProps) {
super(props);
this._isUnmounted = false;
const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
@ -91,6 +93,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
// tslint:disable-next-line:no-floating-promises
this._fetchWETHStateAsync();
}
public componentWillUnmount() {
this._isUnmounted = true;
}
public render() {
const etherToken = this._getEthToken();
const wethBalance = ZeroEx.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH);
@ -394,15 +399,17 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
};
outdatedWETHAddressToIsStateLoaded[address] = true;
}
this.setState({
outdatedWETHStateByAddress,
outdatedWETHAddressToIsStateLoaded,
ethTokenState: {
balance: wethBalance,
allowance: wethAllowance,
},
isWethStateLoaded: true,
});
if (!this._isUnmounted) {
this.setState({
outdatedWETHStateByAddress,
outdatedWETHAddressToIsStateLoaded,
ethTokenState: {
balance: wethBalance,
allowance: wethAllowance,
},
isWethStateLoaded: true,
});
}
}
private _getOutdatedWETHAddresses(): string[] {
const outdatedWETHAddresses = _.compact(

19
packages/website/ts/components/fill_order.tsx
View File

@ -59,8 +59,10 @@ interface FillOrderState {
export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
private _validator: SchemaValidator;
private _isUnmounted: boolean;
constructor(props: FillOrderProps) {
super(props);
this._isUnmounted = false;
this.state = {
globalErrMsg: '',
didOrderValidationRun: false,
@ -90,6 +92,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
public componentDidMount() {
window.scrollTo(0, 0);
}
public componentWillUnmount() {
this._isUnmounted = true;
}
public render() {
return (
<div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
@ -456,12 +461,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
if (!_.isEmpty(orderJSON)) {
orderJSONErrMsg = 'Submitted order JSON is not valid JSON';
}
this.setState({
didOrderValidationRun: true,
orderJSON,
orderJSONErrMsg,
parsedOrder,
});
if (!this._isUnmounted) {
this.setState({
didOrderValidationRun: true,
orderJSON,
orderJSONErrMsg,
parsedOrder,
});
}
return;
}

17
packages/website/ts/components/inputs/token_amount_input.tsx
View File

@ -30,8 +30,10 @@ interface TokenAmountInputState {
}
export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> {
private _isUnmounted: boolean;
constructor(props: TokenAmountInputProps) {
super(props);
this._isUnmounted = false;
const defaultAmount = new BigNumber(0);
this.state = {
balance: defaultAmount,
@ -43,6 +45,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
// tslint:disable-next-line:no-floating-promises
this._fetchBalanceAndAllowanceAsync(this.props.token.address, this.props.userAddress);
}
public componentWillUnmount() {
this._isUnmounted = true;
}
public componentWillReceiveProps(nextProps: TokenAmountInputProps) {
if (
nextProps.userAddress !== this.props.userAddress ||
@ -107,10 +112,12 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
userAddress,
tokenAddress,
);
this.setState({
balance,
allowance,
isBalanceAndAllowanceLoaded: true,
});
if (!this._isUnmounted) {
this.setState({
balance,
allowance,
isBalanceAndAllowanceLoaded: true,
});
}
}
}

13
packages/website/ts/components/token_balances.tsx
View File

@ -91,8 +91,10 @@ interface TokenBalancesState {
}
export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {
private _isUnmounted: boolean;
public constructor(props: TokenBalancesProps) {
super(props);
this._isUnmounted = false;
const initialTrackedTokenStateByAddress = this._getInitialTrackedTokenStateByAddress(props.trackedTokens);
this.state = {
errorType: undefined,
@ -109,6 +111,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
const trackedTokenAddresses = _.keys(this.state.trackedTokenStateByAddress);
this._fetchBalancesAndAllowancesAsync(trackedTokenAddresses);
}
public componentWillUnmount() {
this._isUnmounted = true;
}
public componentWillReceiveProps(nextProps: TokenBalancesProps) {
if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
if (this.state.isBalanceSpinnerVisible) {
@ -671,9 +676,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
isLoaded: true,
};
}
this.setState({
trackedTokenStateByAddress,
});
if (!this._isUnmounted) {
this.setState({
trackedTokenStateByAddress,
});
}
}
private _getInitialTrackedTokenStateByAddress(trackedTokens: Token[]) {
const trackedTokenStateByAddress: TokenStateByAddress = {};

23
packages/website/ts/pages/documentation/documentation.tsx
View File

@ -78,8 +78,10 @@ const styles: Styles = {
};
export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> {
private _isUnmounted: boolean;
constructor(props: DocumentationAllProps) {
super(props);
this._isUnmounted = false;
this.state = {
docAgnosticFormat: undefined,
};
@ -92,6 +94,9 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
// tslint:disable-next-line:no-floating-promises
this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
}
public componentWillUnmount() {
this._isUnmounted = true;
}
public render() {
const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
? {}
@ -367,13 +372,15 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
);
const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
this.setState(
{
docAgnosticFormat,
},
() => {
this._scrollToHash();
},
);
if (!this._isUnmounted) {
this.setState(
{
docAgnosticFormat,
},
() => {
this._scrollToHash();
},
);
}
}
}

21
packages/website/ts/pages/wiki/wiki.tsx
View File

@ -45,8 +45,10 @@ const styles: Styles = {
export class Wiki extends React.Component<WikiProps, WikiState> {
private _wikiBackoffTimeoutId: number;
private _isUnmounted: boolean;
constructor(props: WikiProps) {
super(props);
this._isUnmounted = false;
this.state = {
articlesBySection: undefined,
};
@ -56,6 +58,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
this._fetchArticlesBySectionAsync();
}
public componentWillUnmount() {
this._isUnmounted = true;
clearTimeout(this._wikiBackoffTimeoutId);
}
public render() {
@ -179,14 +182,16 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
return;
}
const articlesBySection = await response.json();
this.setState(
{
articlesBySection,
},
() => {
this._scrollToHash();
},
);
if (!this._isUnmounted) {
this.setState(
{
articlesBySection,
},
() => {
this._scrollToHash();
},
);
}
}
private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
const sectionNames = _.keys(articlesBySection);