From bbd0388853d6b0c2151be2edb626ce426a707680 Mon Sep 17 00:00:00 2001 From: adityapk00 Date: Tue, 31 Mar 2020 18:45:45 -0700 Subject: [PATCH] Fix async state updates Fixes #39 Fixes #41 --- app/components/Receive.js | 14 ++++++++++++-- app/components/ScrollPane.js | 8 ++++---- app/components/Send.js | 11 ++++++++--- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/app/components/Receive.js b/app/components/Receive.js index 332999ae..82c7724b 100644 --- a/app/components/Receive.js +++ b/app/components/Receive.js @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import React, { Component, useState } from 'react'; +import React, { Component, useState, useEffect } from 'react'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import { Accordion, @@ -20,6 +20,16 @@ const AddressBlock = ({ addressBalance, label, currencyName, zecPrice, privateKe const { address } = addressBalance; const [copied, setCopied] = useState(false); + const [timerID, setTimerID] = useState(null); + + useEffect(() => { + return () => { + if (timerID) { + clearTimeout(timerID); + } + }; + }); + const balance = addressBalance.balance || 0; const openAddress = () => { @@ -72,7 +82,7 @@ const AddressBlock = ({ addressBalance, label, currencyName, zecPrice, privateKe onClick={() => { clipboard.writeText(address); setCopied(true); - setTimeout(() => setCopied(false), 5000); + setTimerID(setTimeout(() => setCopied(false), 5000)); }} > {copied ? Copied! : Copy Address} diff --git a/app/components/ScrollPane.js b/app/components/ScrollPane.js index 3a4f40ac..7b18b03d 100644 --- a/app/components/ScrollPane.js +++ b/app/components/ScrollPane.js @@ -20,21 +20,21 @@ export default class ScrollPane extends Component { componentDidMount() { this.updateDimensions(); - window.addEventListener('resize', this.updateDimensions.bind(this)); + window.addEventListener('resize', this.updateDimensions); } componentWillUnmount() { - window.removeEventListener('resize', this.updateDimensions.bind(this)); + window.removeEventListener('resize', this.updateDimensions); } /** * Calculate & Update state of height, needed for the scrolling */ - updateDimensions() { + updateDimensions = () => { // eslint-disable-next-line react/destructuring-assignment const updateHeight = window.innerHeight - this.props.offsetHeight; this.setState({ height: updateHeight }); - } + }; render() { const { children, className } = this.props; diff --git a/app/components/Send.js b/app/components/Send.js index bc2e8621..fd8a235d 100644 --- a/app/components/Send.js +++ b/app/components/Send.js @@ -64,6 +64,7 @@ const ToAddrBox = ({ amountError = 'Amount cannot be empty'; } + let buttonstate; if ( !addressIsValid || amountError || @@ -72,11 +73,15 @@ const ToAddrBox = ({ parseFloat(toaddr.amount) === 0 || fromAmount === 0 ) { - setSendButtonEnable(false); + buttonstate = false; } else { - setSendButtonEnable(true); + buttonstate = true; } + setTimeout(() => { + setSendButtonEnable(buttonstate); + }, 10); + const usdValue = Utils.getZecToUsdString(zecPrice, toaddr.amount); const addReplyTo = () => { @@ -121,7 +126,7 @@ const ToAddrBox = ({ type="number" step="any" className={cstyles.inputbox} - value={toaddr.amount} + value={isNaN(toaddr.amount) ? '' : toaddr.amount} onChange={e => updateToField(toaddr.id, null, e, null)} />