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

7 files changed, 90 insertions, 43 deletions

diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index a3a39a1b9..acd4a7110 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -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,
+            });
+        }
     }
 }
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 460a6cae3..90d2c0514 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -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(
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 1e9927c1a..d0cfd2cf5 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -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;
         }
 
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 44f3fc4a8..9078f7fe1 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -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,
+            });
+        }
     }
 }
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 776ccb16e..c0df285cf 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -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 = {};
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 13a85c301..a5ecd9e1c 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -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();
+                },
+            );
+        }
     }
 }
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index a3cf72450..daf5c27a7 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -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);