Used useEvent hook for createPopup functions (#72)

fracht · Nov 11, 2022 · 46cdfff · 46cdfff
1 parent c7e71ae
commit 46cdfff
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 63 deletions.
diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts
@@ -0,0 +1,15 @@
+import { useCallback, useRef } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useEvent = <F extends (...args: any[]) => any>(func?: F): F => {
+    const ref = useRef<F | undefined>(func);
+
+    ref.current = func;
+
+    const callback = useCallback(
+        (...args: Parameters<F>) => ref.current?.(...args),
+        []
+    );
+
+    return callback as F;
+};
diff --git a/src/hooks/usePopup.ts b/src/hooks/usePopup.ts
@@ -1,5 +1,6 @@
 import { ComponentType, useCallback, useRef } from 'react';
 
+import { useEvent } from './useEvent';
 import { usePopupsContext } from './usePopupsContext';
 import { PopupGroup } from '../components/PopupGroup';
 import { DefaultPopup } from '../types/DefaultPopup';
@@ -24,7 +25,7 @@ export const usePopup = <P, K extends keyof P>(
         groupId: group.groupId,
     });
 
-    const open = useCallback<OptionalParamFunction<Omit<P, K>, void>>(
+    const open = useEvent<OptionalParamFunction<Omit<P, K>, void>>(
         (omittedProps?: Omit<P, K>) => {
             const defaultClose = () => {
                 unmount(popupIdentifier.current);
@@ -38,8 +39,7 @@ export const usePopup = <P, K extends keyof P>(
             );
 
             mount(popup);
-        },
-        [PopupComponent, mount, props, unmount]
+        }
     );
 
     const close = useCallback(() => {

diff --git a/src/hooks/usePopupsFactory.ts b/src/hooks/usePopupsFactory.ts
@@ -1,5 +1,6 @@
-import { ComponentType, useCallback } from 'react';
+import { ComponentType } from 'react';
 
+import { useEvent } from './useEvent';
 import { usePopupsContext } from './usePopupsContext';
 import { PopupGroup } from '../components/PopupGroup';
 import { DefaultPopup } from '../types/DefaultPopup';
@@ -19,37 +20,34 @@ export const usePopupsFactory = <P, K extends keyof P>(
 ): UsePopupsFactoryBag<P, K> => {
     const { mount, unmount } = usePopupsContext();
 
-    const create = useCallback(
-        (omittedProps?: Omit<P, K>) => {
-            const id = uuid();
-
-            const popupIdentifier: PopupIdentifier = {
-                id,
-                groupId: group.groupId,
-            };
-
-            const defaultClose = () => {
-                unmount(popupIdentifier);
-            };
-
-            const popup = new DefaultPopup(
-                PopupComponent,
-                {
-                    ...props,
-                    ...omittedProps,
-                } as P,
-                popupIdentifier,
-                defaultClose
-            );
-
-            mount<P>(popup);
-
-            return () => {
-                unmount(popupIdentifier);
-            };
-        },
-        [group.groupId, PopupComponent, props, mount, unmount]
-    );
+    const create = useEvent((omittedProps?: Omit<P, K>) => {
+        const id = uuid();
+
+        const popupIdentifier: PopupIdentifier = {
+            id,
+            groupId: group.groupId,
+        };
+
+        const defaultClose = () => {
+            unmount(popupIdentifier);
+        };
+
+        const popup = new DefaultPopup(
+            PopupComponent,
+            {
+                ...props,
+                ...omittedProps,
+            } as P,
+            popupIdentifier,
+            defaultClose
+        );
+
+        mount<P>(popup);
+
+        return () => {
+            unmount(popupIdentifier);
+        };
+    });
 
     return create;
 };
diff --git a/src/hooks/useResponsePopup.ts b/src/hooks/useResponsePopup.ts
@@ -1,5 +1,6 @@
 import { ComponentType, useCallback, useRef } from 'react';
 
+import { useEvent } from './useEvent';
 import { usePopupsContext } from './usePopupsContext';
 import { PopupGroup } from '../components/PopupGroup';
 import { OptionalParamFunction } from '../types/OptionalParamFunction';
@@ -29,34 +30,31 @@ export const useResponsePopup = <P, K extends keyof P, R>(
         unmount(popupIdentifierRef.current);
     }, [unmount]);
 
-    const waitResponse = useCallback(
-        (omittedProps?: Omit<P, K>) => {
-            let popup: ResponsePopup<P, R> | null = null;
-
-            const promise = new Promise<R>((resolve, reject) => {
-                popup = new ResponsePopup(
-                    PopupComponent,
-                    {
-                        ...props,
-                        ...omittedProps,
-                    } as P,
-                    popupIdentifierRef.current,
-                    defaultClose,
-                    resolve,
-                    reject
-                );
-
-                mount(popup);
-            });
-
-            promise.finally(() => {
-                popup!.isSettled = true;
-            });
-
-            return promise;
-        },
-        [PopupComponent, defaultClose, mount, props]
-    );
+    const waitResponse = useEvent((omittedProps?: Omit<P, K>) => {
+        let popup: ResponsePopup<P, R> | null = null;
+
+        const promise = new Promise<R>((resolve, reject) => {
+            popup = new ResponsePopup(
+                PopupComponent,
+                {
+                    ...props,
+                    ...omittedProps,
+                } as P,
+                popupIdentifierRef.current,
+                defaultClose,
+                resolve,
+                reject
+            );
+
+            mount(popup);
+        });
+
+        promise.finally(() => {
+            popup!.isSettled = true;
+        });
+
+        return promise;
+    });
 
     return waitResponse;
 };