✨ to handle multiple prevent exit

Author: arunachalam-monk

configs/test-utils/src/__mocks__/@monkvision/common.tsx

@@ -118,5 +118,5 @@ export = {
   useAsyncInterval: jest.fn(),
   useSearchParams: jest.fn(() => ({ get: jest.fn(() => null) })),
   useObjectMemo: jest.fn((obj) => obj),
-  usePreventExit: jest.fn(),
+  usePreventExit: jest.fn(() => ({ allowRedirect: jest.fn() })),
 };

packages/common/README/HOOKS.md

@@ -137,12 +137,16 @@ function TestComponent() {
 Custom hook used to get a translation function tObj that translates TranslationObjects.
 
 ### usePreventExit
-```tsx
+TODO: need to add
+```ts
 import { usePreventExit } from '@monkvision/common';
 
-function TestComponent() {
-  usePreventExit();
-  return <>...</>;
+function MyComponent() {
+ const { forceOut } = usePreventExit(true);// commonly it should be a expression.
+ function anyEvent(){
+  forceOut();
+  // Possible Navigation
+ }
 }
 ```
 This hook is used to prevent the user from leaving the page by displaying a confirmation dialog when the user tries to

packages/common/src/PreventExit/hooks.ts

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from 'react';
+import { createPreventExitListener } from './store';
+
+/**
+ * Custom hook that allows you
+ * to access the PreventExit Context methods inside a component.
+ *
+ * Note : If this hook is called inside a component
+ * that is not a child of a PreventExit component,
+ * it will throw an error.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *  const { forceOut } = usePreventExit(true);// commonly it should be a expression.
+ *  return <div onClick={() => forceOut()}>My Component</div>;
+ * }
+ * ```
+ */
+export function usePreventExit(preventExit: boolean) {
+  const { cleanup, setPreventExit, allowRedirect } = useMemo(createPreventExitListener, []);
+  useMemo(() => setPreventExit(preventExit), [preventExit]);
+  useEffect(() => cleanup, []);
+  return { allowRedirect };
+}

packages/common/src/PreventExit/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

packages/common/src/PreventExit/store.ts

@@ -0,0 +1,49 @@
+const keys: Array<symbol> = [];
+const allPreventExitState: Record<symbol, boolean> = {};
+
+function checkNoMorePreventExit() {
+  if (keys.map((key) => allPreventExitState[key]).every((i) => i === false)) {
+    window.onbeforeunload = null;
+    return true;
+  }
+  return false;
+}
+function publish(id: symbol, preventExit: boolean) {
+  allPreventExitState[id] = preventExit;
+  if (!checkNoMorePreventExit())
+    window.onbeforeunload = (e) => {
+      e.preventDefault();
+      return 'Confirm Alert appears';
+    };
+}
+/**
+ * Creates a listener function that manages the preventExit state of a component.
+ */
+export function createPreventExitListener() {
+  const key = Symbol('PreventExitListener');
+  allPreventExitState[key] = true;
+  keys.push(key);
+  return {
+    /**
+     * To change the preventExit state of the component.
+     */
+    setPreventExit: (preventExit: boolean) => {
+      publish(key, preventExit);
+    },
+    /**
+     * Allows the user to leave the page without confirmation temporarily.
+     * This should be used when the developer wants to explicitly allow navigation.
+     */
+    allowRedirect: () => {
+      window.onbeforeunload = null;
+    },
+    /**
+     * Performs garbage collection by removing the preventExit state associated with the component.
+     * This should be used when the component is unmounted.
+     */
+    cleanup: () => {
+      delete allPreventExitState[key];
+      checkNoMorePreventExit();
+    },
+  };
+}

packages/common/src/hooks/index.ts

@@ -10,4 +10,3 @@ export * from './useSearchParams';
 export * from './useInterval';
 export * from './useAsyncInterval';
 export * from './useObjectMemo';
-export * from './usePreventExit';

packages/common/src/hooks/usePreventExit.ts

@@ -1,6 +1,7 @@
+export * from './PreventExit';
+export * from './apps';
+export * from './hooks';
 export * from './i18n';
 export * from './state';
 export * from './theme';
 export * from './utils';
-export * from './hooks';
-export * from './apps';

packages/common/src/index.ts

@@ -0,0 +1,46 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { usePreventExit } from '../../src/PreventExit/hooks';
+import { createPreventExitListener } from '../../src/PreventExit/store';
+
+jest.mock('../../src/PreventExit/store', () => ({
+  createPreventExitListener: jest.fn(() => ({
+    cleanup: jest.fn(),
+    setPreventExit: jest.fn(),
+    allowRedirect: jest.fn(),
+  })),
+}));
+describe('PreventExit hook usePreventExit', () => {
+  let spyCreatePreventExitListener: jest.SpyInstance<typeof createPreventExitListener>;
+  beforeEach(() => {
+    spyCreatePreventExitListener = jest.spyOn(
+      require('../../src/PreventExit/store'),
+      'createPreventExitListener',
+    );
+  });
+  afterEach(() => jest.clearAllMocks());
+
+  it('should clean up when unmount', () => {
+    const { unmount } = renderHook(() => usePreventExit(true));
+    unmount();
+    expect(spyCreatePreventExitListener.mock.results.at(-1)?.value.cleanup).toHaveBeenCalledTimes(
+      1,
+    );
+  });
+
+  it('should set preventExit when value changes', async () => {
+    const { rerender } = renderHook((props) => usePreventExit(props), {
+      initialProps: true,
+    });
+    expect(
+      spyCreatePreventExitListener.mock.results.at(-1)?.value.setPreventExit,
+    ).toHaveBeenCalledTimes(1);
+    rerender(false);
+    expect(
+      spyCreatePreventExitListener.mock.results.at(-1)?.value.setPreventExit,
+    ).toHaveBeenCalledTimes(2);
+    rerender(false);
+    expect(
+      spyCreatePreventExitListener.mock.results.at(-1)?.value.setPreventExit,
+    ).toHaveBeenCalledTimes(2);
+  });
+});

packages/common/test/PreventExit/hooks.test.ts

@@ -0,0 +1,49 @@
+import { createPreventExitListener } from '../../src/PreventExit/store';
+
+describe('preventExitStore', () => {
+  let listener1: ReturnType<typeof createPreventExitListener>;
+  let listener2: ReturnType<typeof createPreventExitListener>;
+
+  beforeEach(() => {
+    listener1 = createPreventExitListener();
+    listener2 = createPreventExitListener();
+  });
+
+  afterEach(() => {
+    listener1.cleanup();
+    listener2.cleanup();
+  });
+
+  it('should prevent exit: listener 1', () => {
+    listener1.setPreventExit(true);
+    listener2.setPreventExit(true);
+    expect(window.onbeforeunload).not.toBe(null);
+    listener1.setPreventExit(true);
+    listener2.setPreventExit(false);
+    expect(window.onbeforeunload).not.toBe(null);
+    listener1.setPreventExit(false);
+    listener2.setPreventExit(true);
+    expect(window.onbeforeunload).not.toBe(null);
+    listener1.setPreventExit(false);
+    listener2.setPreventExit(false);
+    expect(window.onbeforeunload).toBe(null);
+  });
+
+  it('should allow redirect: listener 1', () => {
+    const preventExit = [true, false];
+    preventExit.forEach((i) => {
+      preventExit.forEach((j) => {
+        listener1.setPreventExit(i);
+        listener2.setPreventExit(j);
+        listener1.allowRedirect();
+        expect(window.onbeforeunload).toBe(null);
+      });
+    });
+  });
+
+  it('should allow redirect: lister 2', () => {
+    listener2.cleanup();
+    listener1.cleanup();
+    expect(window.onbeforeunload).toBe(null);
+  });
+});