diff --git a/src/hooks/useModal/useModal.test.tsx b/src/hooks/useModal/useModal.test.tsx index afff793..7244592 100644 --- 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 index 5a73496..7d352b7 100644 --- 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')(); +interface IOpenAction { + data: any; + actionKey: string; +} + +const openModal = createAction('useModal/action/openModalWithData')(); 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 { 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 = (): HookState => { ...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 = (): HookState => { return { data: state.data, isOpen: state.isOpen, + actionKey: state.actionKey, open: openHandler, close: closeHandler, };