Merge pull request #67 from DouglasNeuroInformatics/actions

feat: add useDestructiveAction and CoreProvider

Author: joshunrau

package.json

@@ -31,6 +31,10 @@
       "types": "./dist/i18n.d.ts",
       "import": "./dist/i18n.js"
     },
+    "./providers": {
+      "types": "./dist/providers.d.ts",
+      "import": "./dist/providers.js"
+    },
     "./package.json": "./package.json",
     "./tailwind/globals.css": "./dist/tailwind/globals.css",
     "./utils": {

src/components/NotificationHub/NotificationHub.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { NotificationHub } from '../NotificationHub';
+import { CoreProvider } from '@/providers/CoreProvider';
+
 import { OneTimePasswordInput } from './OneTimePasswordInput';
 
 type Story = StoryObj<typeof OneTimePasswordInput>;
@@ -15,10 +16,9 @@ export default {
   decorators: [
     (Story) => {
       return (
-        <>
-          <NotificationHub />
+        <CoreProvider>
           <Story />
-        </>
+        </CoreProvider>
       );
     }
   ]

src/components/NotificationHub/index.ts

@@ -32,7 +32,6 @@ export * from './LanguageToggle';
 export * from './LineGraph';
 export * from './ListboxDropdown';
 export * from './MenuBar';
-export * from './NotificationHub';
 export * from './OneTimePasswordInput';
 export * from './Popover';
 export * from './Progress';
@@ -53,3 +52,5 @@ export * from './Tabs';
 export * from './TextArea';
 export * from './ThemeToggle';
 export * from './Tooltip';
+
+export { /** @deprecated */ NotificationHub } from '@/providers/CoreProvider/NotificationHub';

src/components/OneTimePasswordInput/OneTimePasswordInput.stories.tsx

@@ -1,4 +1,5 @@
 export * from './useChart';
+export * from './useDestructiveAction';
 export * from './useDownload';
 export * from './useEventCallback';
 export * from './useEventListener';

src/components/index.ts

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

src/hooks/index.ts

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+
+import { useDestructiveActionStore } from './useDestructiveActionStore';
+
+import type { DestructiveAction } from './useDestructiveActionStore';
+
+export function useDestructiveAction(destructiveAction: DestructiveAction) {
+  const addPendingDestructiveAction = useDestructiveActionStore((store) => store.addPendingDestructiveAction);
+  return useCallback(() => {
+    addPendingDestructiveAction(destructiveAction);
+  }, [destructiveAction, addPendingDestructiveAction]);
+}

src/hooks/useDestructiveAction/index.ts

@@ -0,0 +1,79 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import * as zustand from 'zustand';
+
+import { useDestructiveActionStore } from './useDestructiveActionStore';
+
+import type { DestructiveAction } from './useDestructiveActionStore';
+
+describe('useDestructiveActionStore', () => {
+  beforeAll(() => {
+    vi.spyOn(zustand, 'create');
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render and return an object', () => {
+    const { result } = renderHook(() => useDestructiveActionStore());
+    expect(result.current).toBeTypeOf('object');
+  });
+
+  it('should have initial empty pendingDestructiveActions array', () => {
+    const { result } = renderHook(() => useDestructiveActionStore());
+    expect(result.current.pendingDestructiveActions).toEqual([]);
+  });
+
+  describe('addPendingDestructiveAction', () => {
+    it('should add a single action to the array', () => {
+      const { result } = renderHook(() => useDestructiveActionStore());
+      const testAction: DestructiveAction = vi.fn();
+      act(() => {
+        result.current.addPendingDestructiveAction(testAction);
+      });
+      expect(result.current.pendingDestructiveActions).toEqual([testAction]);
+    });
+
+    it('should add multiple actions to the array', () => {
+      const { result } = renderHook(() => useDestructiveActionStore());
+      const testAction1: DestructiveAction = vi.fn();
+      const testAction2: DestructiveAction = vi.fn();
+      act(() => {
+        result.current.addPendingDestructiveAction(testAction1);
+        result.current.addPendingDestructiveAction(testAction2);
+      });
+      expect(result.current.pendingDestructiveActions).toEqual([testAction1, testAction2]);
+    });
+  });
+
+  describe('deletePendingDestructiveAction', () => {
+    it('should remove a specific action from the array', () => {
+      const { result } = renderHook(() => useDestructiveActionStore());
+      const testAction1: DestructiveAction = vi.fn();
+      const testAction2: DestructiveAction = vi.fn();
+      const testAction3: DestructiveAction = vi.fn();
+
+      act(() => {
+        result.current.addPendingDestructiveAction(testAction1);
+        result.current.addPendingDestructiveAction(testAction2);
+        result.current.addPendingDestructiveAction(testAction3);
+      });
+
+      act(() => {
+        result.current.deletePendingDestructiveAction(testAction2);
+      });
+
+      expect(result.current.pendingDestructiveActions).toEqual([testAction1, testAction3]);
+    });
+
+    it('should handle removing from empty array', () => {
+      const { result } = renderHook(() => useDestructiveActionStore());
+      const testAction: DestructiveAction = vi.fn();
+      act(() => {
+        result.current.deletePendingDestructiveAction(testAction);
+      });
+      expect(result.current.pendingDestructiveActions).toEqual([]);
+    });
+  });
+});

src/hooks/useDestructiveAction/useDestructiveAction.ts

@@ -0,0 +1,25 @@
+import type { Promisable } from 'type-fest';
+import { create } from 'zustand';
+
+export type DestructiveAction = () => Promisable<void>;
+
+export type DestructiveActionStore = {
+  addPendingDestructiveAction: (action: DestructiveAction) => void;
+  deletePendingDestructiveAction: (action: DestructiveAction) => void;
+  pendingDestructiveActions: DestructiveAction[];
+};
+
+export const useDestructiveActionStore = create<DestructiveActionStore>((set) => ({
+  addPendingDestructiveAction: (action) => {
+    set((state) => ({
+      pendingDestructiveActions: [...state.pendingDestructiveActions, action]
+    }));
+  },
+  deletePendingDestructiveAction: (action) => {
+    set((state) => ({
+      ...state,
+      pendingDestructiveActions: state.pendingDestructiveActions.filter((_action) => _action !== action)
+    }));
+  },
+  pendingDestructiveActions: []
+}));