From 68b1670a55c7832a0e146880ecf2e37b2e315525 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 1 May 2018 16:33:21 +0200
Subject: [PATCH] Prevent reload or closing tab or window with pending data

---
 .../src/routes/Configure/containers/Configure.js   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js
index 6cba60524..c4b8bc0ca 100644
--- a/client/coral-admin/src/routes/Configure/containers/Configure.js
+++ b/client/coral-admin/src/routes/Configure/containers/Configure.js
@@ -52,12 +52,20 @@ class ConfigureContainer extends React.Component {
     this.props.router.push(nextRoute);
   };
 
-  shouldShowSaveDialog = () => {
+  navigationPrompt = e => {
+    if (this.hasPendingData()) {
+      const confirmationMessage = 'Changes that you made may not be saved.';
+      e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
+      return confirmationMessage; // Gecko, WebKit, Chrome <34
+    }
+  };
+
+  hasPendingData = () => {
     return !!Object.keys(this.props.pending).length;
   };
 
   routeLeave = ({ pathname }) => {
-    if (this.shouldShowSaveDialog()) {
+    if (this.hasPendingData()) {
       this.nextRoute = pathname;
       this.props.showSaveDialog();
       return false;
@@ -69,10 +77,12 @@ class ConfigureContainer extends React.Component {
       this.props.route,
       this.routeLeave
     );
+    window.addEventListener('beforeunload', this.navigationPrompt);
   }
 
   componentWillUnmount() {
     this.unregisterLeaveHook();
+    window.removeEventListener('beforeunload', this.navigationPrompt);
   }
 
   render() {