Add grace period to cancel action

mysteriumnetwork · Mar 17, 2020 · 7227e97 · 7227e97
1 parent 8664846
commit 7227e97
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/src/connection/comp/connect-disconnect-button.tsx b/src/connection/comp/connect-disconnect-button.tsx
@@ -37,7 +37,7 @@ export const ConnectDisconnectButton: React.FC<ConnectDisconnectButtonProps> = o
             <MButton
                 text={text}
                 onClick={onClick}
-                enabled={true}
+                enabled={!connection.gracePeriod}
                 width={width}
                 height={height}
                 cancelStyle={cancelStyle}

diff --git a/src/connection/store.ts b/src/connection/store.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable, reaction } from "mobx"
+import { action, observable, reaction, runInAction } from "mobx"
 import { RootStore } from "../store"
 import tequilapi from "../tequila"
 import { ConnectionStatus, ConsumerLocation, HttpTequilapiClient } from "mysterium-vpn-js"
@@ -10,6 +10,8 @@ export class ConnectionStore {
     @observable
     connectInProgress = false
     @observable
+    gracePeriod = false
+    @observable
     status = ConnectionStatus.NOT_CONNECTED
     @observable
     location?: ConsumerLocation
@@ -46,14 +48,10 @@ export class ConnectionStore {
         )
     }
 
-    @computed
-    get canConnect(): boolean {
-        return this.status == ConnectionStatus.NOT_CONNECTED
-    }
-
     @action
     async connect(): Promise<void> {
         this.setConnectInProgress(true)
+        this.setGracePeriod()
         try {
             this.setStatus(ConnectionStatus.CONNECTING)
             // this.status = ConnectionStatusType.CONNECTING
@@ -144,6 +142,21 @@ export class ConnectionStore {
         this.setLocation(location)
     }
 
+    @action
+    setConnectInProgress = (b: boolean): void => {
+        this.connectInProgress = b
+    }
+
+    @action
+    setGracePeriod = (): void => {
+        this.gracePeriod = true
+        setTimeout(() => {
+            runInAction(() => {
+                this.gracePeriod = false
+            })
+        }, 5000)
+    }
+
     @action
     setStatus = (s: ConnectionStatus): void => {
         this.status = s
@@ -158,9 +171,4 @@ export class ConnectionStore {
     setOriginalLocation = (l: ConsumerLocation): void => {
         this.originalLocation = l
     }
-
-    @action
-    setConnectInProgress = (b: boolean): void => {
-        this.connectInProgress = b
-    }
 }
diff --git a/src/proposals/store.ts b/src/proposals/store.ts
@@ -83,9 +83,6 @@ export class ProposalStore {
     }
 
     set activate(proposal: UIProposal) {
-        if (!this.root.connection.canConnect) {
-            return
-        }
         console.info("Selected proposal", JSON.stringify(proposal))
         this.active = proposal
     }