attempt navblock

web/hooks/use-drop.tsx

@@ -1,24 +1,45 @@
 import type { DropContext } from '@shared/types/drop';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useMachine } from '@xstate/react';
 import { dropMachine, initDropContext } from '@shared/lib/machines/drop';
-import { DropState, MessageType } from '@shared/lib/constants';
+import { DropState } from '@shared/lib/constants';
 import { generateGrabUrl } from 'lib/util';
 import { encryptFile, hashFile } from 'lib/crypto';
 import { showNotification } from '@mantine/notifications';
 import { IconX } from '@tabler/icons';
 import { initPeer } from 'lib/peer';
 import { createDropHandlers } from '@shared/handlers/drop';
 import { cleanupSession } from 'lib/session';
+import { useRouter } from 'next/router';
 
 export const useDrop = () => {
+    const router = useRouter();
+
     const logsRef = useRef<Array<string>>([]);
     const contextRef = useRef<DropContext>(initDropContext());
 
     const [{ value: state }, send] = useMachine(dropMachine);
 
     const pushLog = (message: string) => logsRef.current.push(message);
 
+    useEffect(() => {
+        const onLeaveAttempt = () => {
+            throw 'Cannot navigate away, peer active';
+        };
+
+        if (state === DropState.Ready) {
+            router.events.on('routeChangeStart', onLeaveAttempt);
+        } else if (
+            [DropState.Completed, DropState.Error].includes(state as DropState)
+        ) {
+            router.events.off('routeChangeStart', onLeaveAttempt);
+        }
+
+        return () => {
+            router.events.off('routeChangeStart', onLeaveAttempt);
+        };
+    }, [state]);
+
     const onRetryExceeded = () => {
         showNotification({
             message: 'Connection may be unstable, please try again',

web/hooks/use-grab.tsx

@@ -1,8 +1,8 @@
 import { grabMachine, initGrabContext } from '@shared/lib/machines/grab';
 import { useMachine } from '@xstate/react';
 import type { GrabContext } from '@shared/types/grab';
-import { GrabState, MessageType } from '@shared/lib/constants';
-import { useMemo, useRef } from 'react';
+import { GrabState } from '@shared/lib/constants';
+import { useEffect, useMemo, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { decryptFile, hashFile } from 'lib/crypto';
 import { showNotification } from '@mantine/notifications';
@@ -19,6 +19,24 @@ export const useGrab = () => {
 
     const [{ value: state }, send] = useMachine(grabMachine);
 
+    useEffect(() => {
+        const onLeaveAttempt = () => {
+            throw 'Cannot navigate away, peer active';
+        };
+
+        if (state === GrabState.Ready) {
+            router.events.on('routeChangeStart', onLeaveAttempt);
+        } else if (
+            [GrabState.Completed, GrabState.Error].includes(state as GrabState)
+        ) {
+            router.events.off('routeChangeStart', onLeaveAttempt);
+        }
+
+        return () => {
+            router.events.off('routeChangeStart', onLeaveAttempt);
+        };
+    }, [state]);
+
     const pushLog = (message: string) => logsRef.current.push(message);
 
     const onRetryExceeded = () => {