From a0e45931c3e2531fddd3394cec1a75651506d613 Mon Sep 17 00:00:00 2001
From: Gregor MacLennan <gmaclennan@digital-democracy.org>
Date: Thu, 23 Apr 2020 19:48:55 +0200
Subject: [PATCH] fix(SyncPeer): Make sync button respond immediately to press

Pressing the button did not immediately do anything - it waited on a peer
update from mapeo core. In some circumstances this does not arrive for
some time (because the sync starts sending first before receiving, so
no peer updates come through). This caused users to press the button
multiple times.
---
 src/frontend/screens/SyncModal/PeerList.js | 42 ++++++++++++++++------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/frontend/screens/SyncModal/PeerList.js b/src/frontend/screens/SyncModal/PeerList.js
index 3de5d3b43..f47c49c1f 100644
--- a/src/frontend/screens/SyncModal/PeerList.js
+++ b/src/frontend/screens/SyncModal/PeerList.js
@@ -92,6 +92,14 @@ export const peerStatus: PeerStatus = {
 
 const SyncButton = ({ progress, onPress, status }) => {
   const { formatMessage: t } = useIntl();
+  const [pressed, setPressed] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!pressed) return;
+    if (status === peerStatus.READY) return;
+    setPressed(false);
+  }, [pressed, status]);
+
   let style;
   let text;
   let icon;
@@ -101,15 +109,6 @@ const SyncButton = ({ progress, onPress, status }) => {
       text = t(m.syncButton);
       icon = <SyncIcon />;
       break;
-    case peerStatus.PROGRESS:
-      style = styles.syncButtonProgress;
-      text = ((progress || 0) * 100).toFixed(0) + "%";
-      icon = (
-        <View style={styles.progressBackground}>
-          <Progress progress={progress} size={25} color="white" />
-        </View>
-      );
-      break;
     case peerStatus.ERROR:
       style = styles.syncButtonError;
       text = t(m.errorButton);
@@ -120,10 +119,33 @@ const SyncButton = ({ progress, onPress, status }) => {
       text = t(m.completeButton);
       icon = <DoneIcon />;
   }
+
+  if (pressed || status === peerStatus.PROGRESS) {
+    style = styles.syncButtonProgress;
+    text = ((progress || 0) * 100).toFixed(0) + "%";
+    icon = (
+      <View style={styles.progressBackground}>
+        <Progress progress={progress} size={25} color="white" />
+      </View>
+    );
+  }
+
+  const handlePress = () => {
+    // It takes a while for the server to respond with an updated peer state,
+    // but we want to show an immediate change in the UI when the user presses
+    // the button
+    setPressed(true);
+    onPress();
+  };
+
   return (
     <TouchableNativeFeedback
       style={styles.syncTouchable}
-      onPress={status === peerStatus.ERROR ? undefined : onPress}
+      onPress={
+        status === (peerStatus.ERROR || peerStatus.PROGRESS)
+          ? undefined
+          : handlePress
+      }
       hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
       <View style={[styles.syncButtonBase, style]}>
         <View style={styles.iconContainer}>{icon}</View>