Merge pull request #109 from oasisprotocol/lw/block-navigating

Block soft and hard navigating away while creating an app

Author: lukaw3d

src/backend/api.ts

@@ -11,6 +11,7 @@ import { useConfig, useSendTransaction } from 'wagmi'
 import { waitForTransactionReceipt } from '@wagmi/core'
 import { ViewMetadataState, ViewSecretsState } from '../pages/Dashboard/AppDetails/types'
 import { useState } from 'react'
+import { useBlockNavigatingAway } from '../pages/CreateApp/useBlockNavigatingAway'
 
 const BACKEND_URL = import.meta.env.VITE_ROFL_APP_BACKEND
 
@@ -207,6 +208,7 @@ async function waitForBuildResults(taskId: string, token: string, timeout = 600_
 }
 
 export function useCreateAndDeployApp() {
+  const { blockNavigatingAway, allowNavigatingAway } = useBlockNavigatingAway()
   const wagmiConfig = useConfig()
   const { sendTransactionAsync } = useSendTransaction()
   const steps = ['creating', 'building', 'updating', 'deploying'] as const
@@ -227,7 +229,11 @@ export function useCreateAndDeployApp() {
     AxiosError<unknown>,
     { token: string; template: Template; appData: AppData; network: 'mainnet' | 'testnet' }
   >({
+    onSettled() {
+      allowNavigatingAway()
+    },
     mutationFn: async ({ token, template, appData, network }) => {
+      blockNavigatingAway()
       const sapphireRuntimeId =
         network === 'mainnet'
           ? oasis.misc.fromHex('000000000000000000000000000000000000000000000000f80306c9858e7279')

src/contexts/RoflAppBackendAuth/Provider.tsx

@@ -14,7 +14,7 @@ export function RoflAppBackendAuthProvider({ children }: { children: ReactNode }
 
   const [token, _setToken] = useState<string | null>(
     // TODO: possibly already expired or from another account. Currently detected by useInterval within a few seconds.
-    window.localStorage.getItem('jwt')
+    window.localStorage.getItem('jwt'),
   )
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)

src/pages/CreateApp/useBlockNavigatingAway.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { useBlocker } from 'react-router-dom'
+
+let globalIsBlocking = false // If useBlockNavigatingAway gets destroyed, load state from this.
+
+const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
+  event.preventDefault()
+  // Included for legacy support, e.g. Chrome/Edge < 119
+  event.returnValue = true
+}
+
+export function useBlockNavigatingAway() {
+  const [reactiveIsBlocking, setReactiveIsBlocking] = useState(globalIsBlocking)
+  const reactRouterBlocker = useBlocker(() => reactiveIsBlocking) // Blocks soft navigation away
+  // TODO can't have two blockers
+
+  function blockNavigatingAway() {
+    window.addEventListener('beforeunload', beforeUnloadHandler) // Blocks hard navigation away
+    setReactiveIsBlocking(true)
+    globalIsBlocking = true
+  }
+
+  function allowNavigatingAway() {
+    window.removeEventListener('beforeunload', beforeUnloadHandler)
+    setReactiveIsBlocking(false)
+    globalIsBlocking = false
+  }
+
+  useEffect(() => {
+    if (reactRouterBlocker.state === 'blocked') {
+      if (window.confirm('You are navigating away. Progress you made may not be saved.')) {
+        reactRouterBlocker.proceed()
+        allowNavigatingAway()
+      } else {
+        reactRouterBlocker.reset()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reactRouterBlocker.state])
+
+  return {
+    isBlockingNavigatingAway: reactiveIsBlocking,
+    blockNavigatingAway,
+    allowNavigatingAway,
+  }
+}