Merge pull request #63 from dallen4/nav-block-and-cleanup

Nav Block & Misc Cleanup
dallen4 · Feb 10, 2024 · 57dbda0 · 57dbda0
2 parents 86bed70 + 5f83f20
commit 57dbda0
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -17,12 +17,14 @@
     "scripts": {
         "web": "yarn workspace web",
         "cli": "yarn workspace cli",
+        "shared": "yarn workspace shared",
         "start": "yarn web start",
         "build": "yarn web build",
         "start:prod": "yarn web start:prod",
         "test:e2e": "yarn web test:e2e",
         "cli:build": "yarn cli build",
-        "cli:release": "cd cli && yarn install --frozen-lockfile && yarn release"
+        "cli:release": "cd cli && yarn install --frozen-lockfile && yarn release",
+        "analyze:dup": "npx jscpd shared cli web --format \"typescript\""
     },
     "dependencies": {
         "@xstate/react": "^3.0.1",

diff --git a/shared/types/drop.ts b/shared/types/drop.ts
@@ -7,7 +7,7 @@ import type {
 import type { EventObject } from 'xstate/lib/types';
 import type Peer from 'peerjs';
 import type { DataConnection } from 'peerjs';
-import { DropEventType, MessageType } from '../lib/constants';
+import { DropEventType } from '../lib/constants';
 
 export type DropOptions = {
     decryptedAccess?: 'copy' | 'view' | 'both';
@@ -23,11 +23,11 @@ export type DropContext = BaseContext & {
     dropKey: CryptoKey | null;
 };
 
-export type DropEvent = EventObject & {
-    type: DropEventType;
+export type DropEvent<EventType extends DropEventType> = EventObject & {
+    type: EventType;
 };
 
-export type AnyDropEvent = DropEvent & {
+export type AnyDropEvent = DropEvent<DropEventType> & {
     [key: string]: any;
 };
 
@@ -39,29 +39,23 @@ export interface InitDropEvent extends AnyDropEvent {
     nonce: string;
 }
 
-export interface ConnectEvent extends DropEvent {
-    type: DropEventType.Connect;
+export interface ConnectEvent extends DropEvent<DropEventType.Connect> {
     connection: DataConnection;
 }
 
-export interface WrapEvent extends DropEvent {
-    type: DropEventType.Wrap;
+export interface WrapEvent extends DropEvent<DropEventType.Wrap> {
     payload: Record<string, any>;
     integrity: string;
 }
 
-export interface HandshakeEvent extends DropEvent {
-    type: DropEventType.Handshake;
-}
+export interface HandshakeEvent extends DropEvent<DropEventType.Handshake> {}
 
-export interface HandshakeCompleteEvent extends DropEvent {
-    type: DropEventType.HandshakeComplete;
+export interface HandshakeCompleteEvent
+    extends DropEvent<DropEventType.HandshakeComplete> {
     dropKey: CryptoKey;
 }
 
-export interface CompleteEvent extends DropEvent {
-    type: DropEventType.Confirm;
-}
+export interface CompleteEvent extends DropEvent<DropEventType.Confirm> {}
 
 export type DropHandlerInputs<FileType = string> = BaseHandlerInputs<
     DropContext,

diff --git a/shared/types/grab.ts b/shared/types/grab.ts
@@ -4,7 +4,7 @@ import type {
     DecryptFile,
     HashFile,
 } from './common';
-import { GrabEventType, MessageType } from '../lib/constants';
+import { GrabEventType } from '../lib/constants';
 import type { EventObject } from 'xstate/lib/types';
 import type Peer from 'peerjs';
 
@@ -13,30 +13,27 @@ export type GrabContext = BaseContext & {
     dropperId: string | null;
 };
 
-export type GrabEvent = EventObject & {
-    type: GrabEventType;
+export type GrabEvent<EventType extends GrabEventType> = EventObject & {
+    type: EventType;
 };
 
-export type AnyGrabEvent = GrabEvent & {
+export type AnyGrabEvent = GrabEvent<GrabEventType> & {
     [key: string]: any;
 };
 
-export interface InitGrabEvent extends GrabEvent {
-    type: GrabEventType.Init;
+export interface InitGrabEvent extends GrabEvent<GrabEventType.Init> {
     id: string;
     dropperId: string;
     peer: Peer;
     keyPair: CryptoKeyPair;
     nonce: string;
 }
 
-export interface AckHandshakeEvent extends GrabEvent {
-    type: GrabEventType.Handshake;
+export interface AckHandshakeEvent extends GrabEvent<GrabEventType.Handshake> {
     grabKey: CryptoKey;
 }
 
-export interface ExecuteGrabEvent extends GrabEvent {
-    type: GrabEventType.Grab;
+export interface ExecuteGrabEvent extends GrabEvent<GrabEventType.Grab> {
     payload: string;
 }
 

diff --git a/web/hooks/use-drop.tsx b/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',

diff --git a/web/hooks/use-grab.tsx b/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 = () => {