From 6c7550286b5f505e9dfe8ca63c62fa1db1b60b2e Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Mon, 25 Jul 2022 22:41:05 +0500
Subject: [PATCH] feat: prevent user from leaving studio page when there are
 unsaved changes

---
 web/src/components/tree.tsx          |  2 +-
 web/src/containers/Studio/editor.tsx |  7 ++++++
 web/src/utils/usePrompt.ts           | 36 ++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 web/src/utils/usePrompt.ts

diff --git a/web/src/components/tree.tsx b/web/src/components/tree.tsx
index c154d76..1e3f4b0 100644
--- a/web/src/components/tree.tsx
+++ b/web/src/components/tree.tsx
@@ -33,7 +33,7 @@ const TreeView = ({
     <ul
       style={{
         listStyle: 'none',
-        padding: '0.25rem 1.25rem',
+        padding: '0.25rem 0.85rem',
         width: 'max-content'
       }}
     >
diff --git a/web/src/containers/Studio/editor.tsx b/web/src/containers/Studio/editor.tsx
index f206f69..6a8b819 100644
--- a/web/src/containers/Studio/editor.tsx
+++ b/web/src/containers/Studio/editor.tsx
@@ -39,6 +39,8 @@ import FilePathInputModal from '../../components/filePathInputModal'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
 import Modal from '../../components/modal'
 
+import usePrompt from '../../utils/usePrompt'
+
 const StyledTabPanel = styled(TabPanel)(() => ({
   padding: '10px'
 }))
@@ -98,6 +100,11 @@ const SASjsEditor = ({
     diffEditorRef.current = diffEditor
   }
 
+  usePrompt(
+    'Changes you made may not be saved.',
+    prevFileContent !== fileContent
+  )
+
   useEffect(() => {
     setRunTimes(Object.values(appContext.runTimes))
   }, [appContext.runTimes])
diff --git a/web/src/utils/usePrompt.ts b/web/src/utils/usePrompt.ts
new file mode 100644
index 0000000..8c2676c
--- /dev/null
+++ b/web/src/utils/usePrompt.ts
@@ -0,0 +1,36 @@
+import { useEffect, useCallback, useContext } from 'react'
+import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom'
+import { History, Blocker, Transition } from 'history'
+
+function useBlocker(blocker: Blocker, when = true) {
+  const navigator = useContext(NavigationContext).navigator as History
+
+  useEffect(() => {
+    if (!when) return
+
+    const unblock = navigator.block((tx: Transition) => {
+      const autoUnblockingTx = {
+        ...tx,
+        retry() {
+          unblock()
+          tx.retry()
+        }
+      }
+
+      blocker(autoUnblockingTx)
+    })
+
+    return unblock
+  }, [navigator, blocker, when])
+}
+
+export default function usePrompt(message: string, when = true) {
+  const blocker = useCallback(
+    (tx) => {
+      if (window.confirm(message)) tx.retry()
+    },
+    [message]
+  )
+
+  useBlocker(blocker, when)
+}