From 54d466de609a125dc5ca63d2ceafc251c4611e8c Mon Sep 17 00:00:00 2001
From: Paulo Menezes <paulo.hgmenezes@gmail.com>
Date: Thu, 2 Jan 2020 20:54:10 -0300
Subject: [PATCH] Warning when leave without save

---
 src/index.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index d69a84eb3..9cc6a1a87 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -359,6 +359,8 @@ function save() {
 
     localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(items));
   }
+
+  window.removeEventListener("beforeunload", onUnload);
 }
 
 function restore() {
@@ -373,6 +375,18 @@ function restore() {
   }
 }
 
+function onUnload(event: BeforeUnloadEvent) {
+  event.preventDefault();
+
+  const confirmationMessage = "excalibur";
+  event.returnValue = confirmationMessage;
+  return confirmationMessage;
+}
+
+function addOnBeforeUnload() {
+  window.addEventListener("beforeunload", onUnload);
+}
+
 type AppState = {
   draggingElement: ExcaliburElement | null;
   elementType: string;
@@ -388,6 +402,7 @@ class App extends React.Component<{}, AppState> {
 
   public componentWillUnmount() {
     document.removeEventListener("keydown", this.onKeyDown, false);
+    window.removeEventListener("beforeunload", onUnload);
   }
 
   public state: AppState = {
@@ -408,6 +423,7 @@ class App extends React.Component<{}, AppState> {
       drawScene();
       event.preventDefault();
     } else if (event.key === "Backspace") {
+      addOnBeforeUnload();
       deleteSelectedElements();
       drawScene();
       event.preventDefault();
@@ -417,6 +433,8 @@ class App extends React.Component<{}, AppState> {
       event.key === "ArrowUp" ||
       event.key === "ArrowDown"
     ) {
+      addOnBeforeUnload();
+
       const step = event.shiftKey ? 5 : 1;
       elements.forEach(element => {
         if (element.isSelected) {
@@ -547,6 +565,7 @@ class App extends React.Component<{}, AppState> {
                 parsedElement.y += 10;
                 generateDraw(parsedElement);
                 elements.push(parsedElement);
+                addOnBeforeUnload();
               });
               drawScene();
             }
@@ -598,6 +617,8 @@ class App extends React.Component<{}, AppState> {
                 if (isDraggingElements) {
                   document.documentElement.style.cursor = "move";
                 }
+              } else {
+                addOnBeforeUnload();
               }
 
               if (isTextElement(element)) {
@@ -658,6 +679,7 @@ class App extends React.Component<{}, AppState> {
                     lastX = x;
                     lastY = y;
                     drawScene();
+                    addOnBeforeUnload();
                     return;
                   }
                 }