feat: add new destructive action usages

Author: joshunrau

src/hooks/useDestructiveAction/useDestructiveAction.test.ts

@@ -0,0 +1,221 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useDestructiveAction } from './useDestructiveAction';
+import { useDestructiveActionStore } from './useDestructiveActionStore';
+
+import type { DestructiveAction, DestructiveActionOptions, DestructiveActionParams } from './useDestructiveActionStore';
+
+vi.mock('./useDestructiveActionStore', () => ({
+  useDestructiveActionStore: vi.fn()
+}));
+
+describe('useDestructiveAction', () => {
+  const mockAddPendingDestructiveAction = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useDestructiveActionStore as any).mockImplementation((selector: any) => {
+      const store = {
+        addPendingDestructiveAction: mockAddPendingDestructiveAction
+      };
+      return selector(store);
+    });
+  });
+
+  describe('useDestructiveAction()', () => {
+    it('should return a function that accepts action and options', () => {
+      const { result } = renderHook(() => useDestructiveAction());
+      expect(typeof result.current).toBe('function');
+    });
+
+    it('should call addPendingDestructiveAction with action only', () => {
+      const { result } = renderHook(() => useDestructiveAction());
+      const testAction: DestructiveAction = vi.fn();
+
+      act(() => {
+        result.current(testAction);
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(testAction, undefined);
+    });
+
+    it('should call addPendingDestructiveAction with action and options', () => {
+      const { result } = renderHook(() => useDestructiveAction());
+      const testAction: DestructiveAction = vi.fn();
+      const options: DestructiveActionOptions = {
+        description: 'This is a test',
+        title: 'Test Action'
+      };
+
+      act(() => {
+        result.current(testAction, options);
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(testAction, options);
+    });
+  });
+
+  describe('useDestructiveAction(action)', () => {
+    it('should return a function that calls the action with provided args', () => {
+      const testAction = vi.fn();
+      const { result } = renderHook(() => useDestructiveAction(testAction));
+
+      const arg1 = 'test';
+      const arg2 = 123;
+
+      act(() => {
+        result.current(arg1, arg2);
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(expect.any(Function), {});
+
+      // Test that the wrapped function calls the original action with args
+      const wrappedAction = mockAddPendingDestructiveAction.mock.calls[0]![0];
+      wrappedAction();
+      expect(testAction).toHaveBeenCalledWith(arg1, arg2);
+    });
+
+    it('should work with no arguments', () => {
+      const testAction = vi.fn();
+      const { result } = renderHook(() => useDestructiveAction(testAction));
+
+      act(() => {
+        result.current();
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(expect.any(Function), {});
+
+      const wrappedAction = mockAddPendingDestructiveAction.mock.calls[0]![0];
+      wrappedAction();
+      expect(testAction).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('useDestructiveAction(params)', () => {
+    it('should return a function that calls the action with provided args and passes options', () => {
+      const testAction = vi.fn();
+      const params: DestructiveActionParams<[string, number]> = {
+        action: testAction,
+        description: 'This is a test',
+        title: 'Test Action'
+      };
+      const { result } = renderHook(() => useDestructiveAction(params));
+
+      const arg1 = 'test';
+      const arg2 = 123;
+
+      act(() => {
+        result.current(arg1, arg2);
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(expect.any(Function), {
+        description: 'This is a test',
+        title: 'Test Action'
+      });
+
+      // test that the wrapped function calls the original action with args
+      const wrappedAction = mockAddPendingDestructiveAction.mock.calls[0]![0];
+      wrappedAction();
+      expect(testAction).toHaveBeenCalledWith(arg1, arg2);
+    });
+
+    it('should work with only action in params', () => {
+      const testAction = vi.fn();
+      const params: DestructiveActionParams<[]> = {
+        action: testAction
+      };
+      const { result } = renderHook(() => useDestructiveAction(params));
+
+      act(() => {
+        result.current();
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(expect.any(Function), {});
+
+      const wrappedAction = mockAddPendingDestructiveAction.mock.calls[0]![0];
+      wrappedAction();
+      expect(testAction).toHaveBeenCalledWith();
+    });
+
+    it('should work with partial options in params', () => {
+      const testAction = vi.fn();
+      const params: DestructiveActionParams<[string]> = {
+        action: testAction,
+        title: 'Only Title'
+      };
+      const { result } = renderHook(() => useDestructiveAction(params));
+
+      act(() => {
+        result.current('test');
+      });
+
+      expect(mockAddPendingDestructiveAction).toHaveBeenCalledWith(expect.any(Function), {
+        title: 'Only Title'
+      });
+    });
+  });
+
+  describe('callback stability', () => {
+    it('should return the same callback function when dependencies do not change', () => {
+      const testAction = vi.fn();
+      const { rerender, result } = renderHook(() => useDestructiveAction(testAction));
+
+      const firstCallback = result.current;
+      rerender();
+      const secondCallback = result.current;
+
+      expect(firstCallback).toBe(secondCallback);
+    });
+
+    it('should return a new callback function when action changes', () => {
+      const testAction1 = vi.fn();
+      const testAction2 = vi.fn();
+      let action = testAction1;
+
+      const { rerender, result } = renderHook(() => useDestructiveAction(action));
+
+      const firstCallback = result.current;
+
+      action = testAction2;
+      rerender();
+
+      const secondCallback = result.current;
+
+      expect(firstCallback).not.toBe(secondCallback);
+    });
+
+    it('should return a new callback function when params change', () => {
+      const testAction = vi.fn();
+      let params: DestructiveActionParams<[]> = { action: testAction, title: 'First' };
+
+      const { rerender, result } = renderHook(() => useDestructiveAction(params));
+
+      const firstCallback = result.current;
+
+      params = { action: testAction, title: 'Second' };
+      rerender();
+
+      const secondCallback = result.current;
+
+      expect(firstCallback).not.toBe(secondCallback);
+    });
+  });
+
+  describe('store integration', () => {
+    it('should call useDestructiveActionStore with correct selector', () => {
+      renderHook(() => useDestructiveAction());
+
+      expect(useDestructiveActionStore).toHaveBeenCalledWith(expect.any(Function));
+
+      // Test the selector function
+      const selector = (useDestructiveActionStore as any).mock.calls[0][0];
+      const mockStore = {
+        addPendingDestructiveAction: mockAddPendingDestructiveAction,
+        otherProperty: 'should not be selected'
+      };
+
+      expect(selector(mockStore)).toBe(mockAddPendingDestructiveAction);
+    });
+  });
+});

src/hooks/useDestructiveAction/useDestructiveAction.ts

@@ -1,15 +1,42 @@
 import { useCallback } from 'react';
 
-import type { Promisable } from 'type-fest';
-
 import { useDestructiveActionStore } from './useDestructiveActionStore';
 
-export function useDestructiveAction<TArgs extends any[]>(destructiveAction: (...args: TArgs) => Promisable<void>) {
+import type { DestructiveAction, DestructiveActionOptions, DestructiveActionParams } from './useDestructiveActionStore';
+
+/**
+ * Returns a function that accepts a destructive action and optional configuration.
+ * @returns A function that takes an action and options to add to the destructive action queue
+ */
+export function useDestructiveAction(): (action: DestructiveAction, options?: DestructiveActionOptions) => void;
+/**
+ * Returns a function that wraps the provided action for destructive confirmation.
+ * @param action - The destructive action to wrap
+ * @returns A function that takes the action's arguments and adds it to the destructive action queue
+ */
+export function useDestructiveAction<TArgs extends any[]>(action: DestructiveAction<TArgs>): (...args: TArgs) => void;
+/**
+ * Returns a function that wraps the provided action with configuration for destructive confirmation.
+ * @param params - The action and its configuration (title, description)
+ * @returns A function that takes the action's arguments and adds it to the destructive action queue
+ */
+export function useDestructiveAction<TArgs extends any[]>(
+  params: DestructiveActionParams<TArgs>
+): (...args: TArgs) => void;
+export function useDestructiveAction<TArgs extends any[]>(
+  arg?: DestructiveAction<TArgs> | DestructiveActionParams<TArgs>
+): (...args: TArgs) => void {
   const addPendingDestructiveAction = useDestructiveActionStore((store) => store.addPendingDestructiveAction);
   return useCallback(
     (...args: TArgs) => {
-      addPendingDestructiveAction(() => destructiveAction(...args));
+      if (arg === undefined) {
+        const [action, options] = args as unknown as [DestructiveAction, DestructiveActionOptions | undefined];
+        addPendingDestructiveAction(action, options);
+        return;
+      }
+      const { action, ...options } = typeof arg === 'function' ? { action: arg } : arg;
+      addPendingDestructiveAction(() => action(...args), options);
     },
-    [destructiveAction, addPendingDestructiveAction]
+    [arg, addPendingDestructiveAction]
   );
 }

src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts

@@ -4,7 +4,7 @@ import * as zustand from 'zustand';
 
 import { useDestructiveActionStore } from './useDestructiveActionStore';
 
-import type { DestructiveAction } from './useDestructiveActionStore';
+import type { DestructiveAction, DestructiveActionOptions } from './useDestructiveActionStore';
 
 describe('useDestructiveActionStore', () => {
   beforeAll(() => {
@@ -32,7 +32,9 @@ describe('useDestructiveActionStore', () => {
       act(() => {
         result.current.addPendingDestructiveAction(testAction);
       });
-      expect(result.current.pendingDestructiveActions).toEqual([testAction]);
+      expect(result.current.pendingDestructiveActions).toHaveLength(1);
+      expect(result.current.pendingDestructiveActions[0]!.action).toBe(testAction);
+      expect(result.current.pendingDestructiveActions[0]!.id).toBeDefined();
     });
 
     it('should add multiple actions to the array', () => {
@@ -43,7 +45,25 @@ describe('useDestructiveActionStore', () => {
         result.current.addPendingDestructiveAction(testAction1);
         result.current.addPendingDestructiveAction(testAction2);
       });
-      expect(result.current.pendingDestructiveActions).toEqual([testAction1, testAction2]);
+      expect(result.current.pendingDestructiveActions).toHaveLength(2);
+      expect(result.current.pendingDestructiveActions[0]!.action).toBe(testAction1);
+      expect(result.current.pendingDestructiveActions[1]!.action).toBe(testAction2);
+    });
+
+    it('should add action with options', () => {
+      const { result } = renderHook(() => useDestructiveActionStore());
+      const testAction: DestructiveAction = vi.fn();
+      const options: DestructiveActionOptions = {
+        description: 'This is a test action',
+        title: 'Test Action'
+      };
+      act(() => {
+        result.current.addPendingDestructiveAction(testAction, options);
+      });
+      expect(result.current.pendingDestructiveActions).toHaveLength(1);
+      expect(result.current.pendingDestructiveActions[0]!.action).toBe(testAction);
+      expect(result.current.pendingDestructiveActions[0]!.title).toBe('Test Action');
+      expect(result.current.pendingDestructiveActions[0]!.description).toBe('This is a test action');
     });
   });
 
@@ -60,18 +80,21 @@ describe('useDestructiveActionStore', () => {
         result.current.addPendingDestructiveAction(testAction3);
       });
 
+      const idToDelete = result.current.pendingDestructiveActions[1]!.id;
+
       act(() => {
-        result.current.deletePendingDestructiveAction(testAction2);
+        result.current.deletePendingDestructiveAction(idToDelete);
       });
 
-      expect(result.current.pendingDestructiveActions).toEqual([testAction1, testAction3]);
+      expect(result.current.pendingDestructiveActions).toHaveLength(2);
+      expect(result.current.pendingDestructiveActions[0]!.action).toBe(testAction1);
+      expect(result.current.pendingDestructiveActions[1]!.action).toBe(testAction3);
     });
 
     it('should handle removing from empty array', () => {
       const { result } = renderHook(() => useDestructiveActionStore());
-      const testAction: DestructiveAction = vi.fn();
       act(() => {
-        result.current.deletePendingDestructiveAction(testAction);
+        result.current.deletePendingDestructiveAction('non-existent-id');
       });
       expect(result.current.pendingDestructiveActions).toEqual([]);
     });

src/hooks/useDestructiveAction/useDestructiveActionStore.ts

@@ -1,25 +1,40 @@
 import type { Promisable } from 'type-fest';
 import { create } from 'zustand';
 
-export type DestructiveAction = () => Promisable<void>;
+type DestructiveAction<TArgs extends any[] = any[]> = (...args: TArgs) => Promisable<void>;
+
+type DestructiveActionOptions = {
+  description?: string;
+  title?: string;
+};
+
+type DestructiveActionParams<TArgs extends any[] = any[]> = DestructiveActionOptions & {
+  action: DestructiveAction<TArgs>;
+};
+
+type DestructiveActionDef<TArgs extends any[] = any[]> = DestructiveActionParams<TArgs> & {
+  id: string;
+};
 
 export type DestructiveActionStore = {
-  addPendingDestructiveAction: (action: DestructiveAction) => void;
-  deletePendingDestructiveAction: (action: DestructiveAction) => void;
-  pendingDestructiveActions: DestructiveAction[];
+  addPendingDestructiveAction: (action: DestructiveAction, options?: DestructiveActionOptions) => void;
+  deletePendingDestructiveAction: (id: string) => void;
+  pendingDestructiveActions: DestructiveActionDef[];
 };
 
 export const useDestructiveActionStore = create<DestructiveActionStore>((set) => ({
-  addPendingDestructiveAction: (action) => {
+  addPendingDestructiveAction: (action, options) => {
     set((state) => ({
-      pendingDestructiveActions: [...state.pendingDestructiveActions, action]
+      pendingDestructiveActions: [...state.pendingDestructiveActions, { action, id: crypto.randomUUID(), ...options }]
     }));
   },
-  deletePendingDestructiveAction: (action) => {
+  deletePendingDestructiveAction: (id) => {
     set((state) => ({
       ...state,
-      pendingDestructiveActions: state.pendingDestructiveActions.filter((_action) => _action !== action)
+      pendingDestructiveActions: state.pendingDestructiveActions.filter((def) => def.id !== id)
     }));
   },
   pendingDestructiveActions: []
 }));
+
+export type { DestructiveAction, DestructiveActionDef, DestructiveActionOptions, DestructiveActionParams };