add action key to useModal hook (#15)

project-openubl · Dec 14, 2021 · 80da4b0 · 80da4b0
1 parent ddab60b
commit 80da4b0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/hooks/useModal/useModal.test.tsx b/src/hooks/useModal/useModal.test.tsx
@@ -7,9 +7,10 @@ describe('useModal', () => {
 
     // Open modal
     const { open } = result.current;
-    act(() => open());
+    act(() => open('edit'));
     expect(result.current.isOpen).toEqual(true);
     expect(result.current.data).toBeUndefined();
+    expect(result.current.actionKey).toEqual('edit');
   });
 
   it('onOpen: with data', () => {
@@ -19,10 +20,11 @@ describe('useModal', () => {
 
     // Open modal
     const { open } = result.current;
-    act(() => open(ENTITY));
+    act(() => open('edit', ENTITY));
 
     expect(result.current.isOpen).toEqual(true);
     expect(result.current.data).toEqual(ENTITY);
+    expect(result.current.actionKey).toEqual('edit');
   });
 
   it('Close modal with data', () => {
@@ -32,15 +34,17 @@ describe('useModal', () => {
     const { open, close } = result.current;
 
     // Open modal
-    act(() => open(ENTITY));
+    act(() => open('edit', ENTITY));
 
     expect(result.current.isOpen).toEqual(true);
     expect(result.current.data).toEqual(ENTITY);
+    expect(result.current.actionKey).toEqual('edit');
 
     // Close modal
     act(() => close());
 
     expect(result.current.isOpen).toEqual(false);
     expect(result.current.data).toBeUndefined();
+    expect(result.current.actionKey).toBeUndefined();
   });
 });
diff --git a/src/hooks/useModal/useModal.ts b/src/hooks/useModal/useModal.ts
@@ -1,18 +1,25 @@
 import { useCallback, useReducer } from 'react';
 import { ActionType, createAction, getType } from 'typesafe-actions';
 
-const openModal = createAction('useModal/action/openModalWithData')<any>();
+interface IOpenAction {
+  data: any;
+  actionKey: string;
+}
+
+const openModal = createAction('useModal/action/openModalWithData')<IOpenAction>();
 const closeModal = createAction('useModal/action/startClose')();
 
 // State
 type State = Readonly<{
   data: any;
   isOpen: boolean;
+  actionKey?: string;
 }>;
 
 const defaultState: State = {
   data: undefined,
   isOpen: false,
+  actionKey: undefined,
 };
 
 // Reducer
@@ -24,14 +31,16 @@ const reducer = (state: State, action: Action): State => {
     case getType(openModal):
       return {
         ...state,
-        data: action.payload,
+        data: action.payload.data,
         isOpen: true,
+        actionKey: action.payload.actionKey,
       };
     case getType(closeModal):
       return {
         ...state,
         data: undefined,
         isOpen: false,
+        actionKey: undefined,
       };
     default:
       return state;
@@ -43,7 +52,8 @@ const reducer = (state: State, action: Action): State => {
 interface HookState<T> {
   data?: T;
   isOpen: boolean;
-  open: (data?: T) => void;
+  actionKey?: string;
+  open: (actionKey: string, data?: T) => void;
   close: () => void;
 }
 
@@ -52,8 +62,8 @@ export const useModal = <T>(): HookState<T> => {
     ...defaultState,
   });
 
-  const openHandler = useCallback((entity?: T) => {
-    dispatch(openModal(entity));
+  const openHandler = useCallback((actionKey: string, entity?: T) => {
+    dispatch(openModal({ actionKey, data: entity }));
   }, []);
 
   const closeHandler = useCallback(() => {
@@ -63,6 +73,7 @@ export const useModal = <T>(): HookState<T> => {
   return {
     data: state.data,
     isOpen: state.isOpen,
+    actionKey: state.actionKey,
     open: openHandler,
     close: closeHandler,
   };