From 268a9215173f6b6b87d6f79ceb34459973b17cbf Mon Sep 17 00:00:00 2001
From: Carlos Esteban Feria Vila
 <2582866+carlosthe19916@users.noreply.github.com>
Date: Wed, 29 Dec 2021 17:49:19 +0100
Subject: [PATCH 1/2] Enhance useModal

---
 src/hooks/useModal/useModal.test.tsx | 18 +++++++++++-------
 src/hooks/useModal/useModal.ts       | 26 ++++++++++++++------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/hooks/useModal/useModal.test.tsx b/src/hooks/useModal/useModal.test.tsx
index 7244592..be96057 100644
--- a/src/hooks/useModal/useModal.test.tsx
+++ b/src/hooks/useModal/useModal.test.tsx
@@ -3,20 +3,21 @@ import { useModal } from './useModal';
 
 describe('useModal', () => {
   it('onOpen: without data', () => {
-    const { result } = renderHook(() => useModal());
+    const { result } = renderHook(() => useModal<'edit'>());
 
     // Open modal
     const { open } = result.current;
     act(() => open('edit'));
     expect(result.current.isOpen).toEqual(true);
     expect(result.current.data).toBeUndefined();
-    expect(result.current.actionKey).toEqual('edit');
+    expect(result.current.action).toEqual('edit');
+    expect(result.current.isAction('edit')).toEqual(true);
   });
 
   it('onOpen: with data', () => {
     const ENTITY = 'hello';
 
-    const { result } = renderHook(() => useModal<string>());
+    const { result } = renderHook(() => useModal<'edit'>());
 
     // Open modal
     const { open } = result.current;
@@ -24,13 +25,14 @@ describe('useModal', () => {
 
     expect(result.current.isOpen).toEqual(true);
     expect(result.current.data).toEqual(ENTITY);
-    expect(result.current.actionKey).toEqual('edit');
+    expect(result.current.action).toEqual('edit');
+    expect(result.current.isAction('edit')).toEqual(true);
   });
 
   it('Close modal with data', () => {
     const ENTITY = 'hello';
 
-    const { result } = renderHook(() => useModal<string>());
+    const { result } = renderHook(() => useModal<"edit">());
     const { open, close } = result.current;
 
     // Open modal
@@ -38,13 +40,15 @@ describe('useModal', () => {
 
     expect(result.current.isOpen).toEqual(true);
     expect(result.current.data).toEqual(ENTITY);
-    expect(result.current.actionKey).toEqual('edit');
+    expect(result.current.action).toEqual('edit');
+    expect(result.current.isAction('edit')).toEqual(true);
 
     // Close modal
     act(() => close());
 
     expect(result.current.isOpen).toEqual(false);
     expect(result.current.data).toBeUndefined();
-    expect(result.current.actionKey).toBeUndefined();
+    expect(result.current.action).toBeUndefined();
+    expect(result.current.isAction('edit')).toEqual(false);
   });
 });
diff --git a/src/hooks/useModal/useModal.ts b/src/hooks/useModal/useModal.ts
index 7d352b7..d29b303 100644
--- a/src/hooks/useModal/useModal.ts
+++ b/src/hooks/useModal/useModal.ts
@@ -2,8 +2,8 @@ import { useCallback, useReducer } from 'react';
 import { ActionType, createAction, getType } from 'typesafe-actions';
 
 interface IOpenAction {
+  action: any;
   data: any;
-  actionKey: string;
 }
 
 const openModal = createAction('useModal/action/openModalWithData')<IOpenAction>();
@@ -11,15 +11,15 @@ const closeModal = createAction('useModal/action/startClose')();
 
 // State
 type State = Readonly<{
+  action: any;
   data: any;
   isOpen: boolean;
-  actionKey?: string;
 }>;
 
 const defaultState: State = {
+  action: undefined,
   data: undefined,
   isOpen: false,
-  actionKey: undefined,
 };
 
 // Reducer
@@ -31,16 +31,16 @@ const reducer = (state: State, action: Action): State => {
     case getType(openModal):
       return {
         ...state,
+        action: action.payload.action,
         data: action.payload.data,
         isOpen: true,
-        actionKey: action.payload.actionKey,
       };
     case getType(closeModal):
       return {
         ...state,
+        action: undefined,
         data: undefined,
         isOpen: false,
-        actionKey: undefined,
       };
     default:
       return state;
@@ -49,21 +49,22 @@ const reducer = (state: State, action: Action): State => {
 
 // Hook
 
-interface HookState<T> {
+interface HookState<A, T> {
+  action?: A;
   data?: T;
   isOpen: boolean;
-  actionKey?: string;
-  open: (actionKey: string, data?: T) => void;
+  open: (action: A, data?: T) => void;
   close: () => void;
+  isAction: (action: A) => boolean;
 }
 
-export const useModal = <T>(): HookState<T> => {
+export const useModal = <A, T = any>(): HookState<A, T> => {
   const [state, dispatch] = useReducer(reducer, {
     ...defaultState,
   });
 
-  const openHandler = useCallback((actionKey: string, entity?: T) => {
-    dispatch(openModal({ actionKey, data: entity }));
+  const openHandler = useCallback((action: A, entity?: T) => {
+    dispatch(openModal({ action: action, data: entity }));
   }, []);
 
   const closeHandler = useCallback(() => {
@@ -71,11 +72,12 @@ export const useModal = <T>(): HookState<T> => {
   }, []);
 
   return {
+    action: state.action,
     data: state.data,
     isOpen: state.isOpen,
-    actionKey: state.actionKey,
     open: openHandler,
     close: closeHandler,
+    isAction: (action: A) => state.action === action,
   };
 };
 

From 76c5305468f9a0c96699e7f8fa532fa8d0519966 Mon Sep 17 00:00:00 2001
From: Carlos Esteban Feria Vila
 <2582866+carlosthe19916@users.noreply.github.com>
Date: Wed, 29 Dec 2021 17:53:08 +0100
Subject: [PATCH 2/2] Fix prettier error

---
 src/hooks/useModal/useModal.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useModal/useModal.test.tsx b/src/hooks/useModal/useModal.test.tsx
index be96057..a7558b2 100644
--- a/src/hooks/useModal/useModal.test.tsx
+++ b/src/hooks/useModal/useModal.test.tsx
@@ -32,7 +32,7 @@ describe('useModal', () => {
   it('Close modal with data', () => {
     const ENTITY = 'hello';
 
-    const { result } = renderHook(() => useModal<"edit">());
+    const { result } = renderHook(() => useModal<'edit'>());
     const { open, close } = result.current;
 
     // Open modal