From 8bf58dc7a7856e4ea302f72a57034320e1272e26 Mon Sep 17 00:00:00 2001
From: Sindre Sorhus <sindresorhus@gmail.com>
Date: Mon, 27 Aug 2018 16:28:40 +0700
Subject: [PATCH] Preserve "Cancel" button state in the swap list

We cannot keep local state as `react-virtualized` unmounts components outside the viewport:

> You might be aware of this, but just to be completely clear- components will not retain state once they've left the viewport. This is a limitation of windowing with react-virtualized (or similar libraries). Any "state" that should persist should be stored externally (eg within the underlying List/Array, in Redux, in the parent component's state, etc). - https://github.com/bvaughn/react-virtualized/issues/416#issuecomment-249381605
---
 app/renderer/components/SwapList.js | 12 ++++++------
 app/renderer/containers/Trades.js   |  9 +++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/renderer/components/SwapList.js b/app/renderer/components/SwapList.js
index 3b58bede72..5cf7fd7fb3 100644
--- a/app/renderer/components/SwapList.js
+++ b/app/renderer/components/SwapList.js
@@ -21,12 +21,9 @@ const SortDirections = {
 
 // eslint-disable-next-line no-unused-vars
 class CancelButton extends React.Component {
-	state = {
-		isCancelling: false,
-	}
-
 	cancelSwap = async swapUuid => {
-		this.setState({isCancelling: true});
+		await tradesContainer.setIsSwapCancelling(swapUuid, true);
+		this.forceUpdate();
 
 		try {
 			await appContainer.api.cancelOrder(swapUuid);
@@ -43,7 +40,10 @@ class CancelButton extends React.Component {
 			<button
 				type="button"
 				className="cancel__button"
-				disabled={swap.status !== 'pending' || this.state.isCancelling}
+				disabled={
+					swap.status !== 'pending' ||
+					tradesContainer.state.isSwapCancelling[swap.uuid]
+				}
 				onClick={() => this.cancelSwap(swap.uuid)}
 			>
 				{t('list.cancel')}
diff --git a/app/renderer/containers/Trades.js b/app/renderer/containers/Trades.js
index b6a07bac65..0a17950036 100644
--- a/app/renderer/containers/Trades.js
+++ b/app/renderer/containers/Trades.js
@@ -3,11 +3,20 @@ import {Container} from 'unstated';
 class TradesContainer extends Container {
 	state = {
 		activeView: 'OpenOrders',
+		isSwapCancelling: {},
 	};
 
 	setActiveView = activeView => {
 		this.setState({activeView});
 	};
+
+	setIsSwapCancelling = (swapUuid, isCancelling) => {
+		this.setState(state => {
+			const {isSwapCancelling} = state;
+			isSwapCancelling[swapUuid] = isCancelling;
+			return state;
+		});
+	};
 }
 
 const tradesContainer = new TradesContainer();