fix : closeModal method logic

Author: ma9pie

src/components/modals/BottomSheet.tsx

@@ -28,8 +28,10 @@ const BottomSheet = ({
 
   useEffect(() => {
     onAfterOpen();
-    return () => onAfterClose();
-  }, [onAfterOpen, onAfterClose]);
+    return () => {
+      onAfterClose();
+    };
+  }, []);
 
   return (
     <Wrapper>

src/components/modals/Modal.tsx

@@ -26,8 +26,10 @@ const Modal = ({
 
   useEffect(() => {
     onAfterOpen();
-    return () => onAfterClose();
-  }, [onAfterOpen, onAfterClose]);
+    return () => {
+      onAfterClose();
+    };
+  }, []);
 
   return (
     <Wrapper className={isOpen ? 'fade-in' : 'fade-out'}>

src/components/provider/ModalProvider.tsx

@@ -1,5 +1,11 @@
 import { css, Global } from '@emotion/react';
-import React, { createContext, ReactNode, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  ReactNode,
+  SetStateAction,
+  useMemo,
+  useState,
+} from 'react';
 
 import BottomSheet from '@/components/modals/BottomSheet';
 import Modal from '@/components/modals/Modal';
@@ -13,7 +19,7 @@ type Props = {
 export const ModalContext = createContext({
   deleteDelay: 0,
   modals: new Map(),
-  setModals: (state: Modals) => {},
+  setModals: (value: SetStateAction<Modals>) => {},
 });
 
 const ModalProvider = ({ deleteDelay = 200, children }: Props) => {

src/hooks/useModal.tsx

@@ -26,15 +26,19 @@ const useModal = () => {
 
   const openModal = useCallback(
     (props: ModalProps) => {
-      const newMap = new Map(_modals);
-      if (props.id && newMap.has(props.id)) return;
-      const id = props.id || createUid();
-      props.id = id;
-      props.type = props.type || ModalType.Modal;
-      props.isOpen = true;
-      props.createdAt = new Date().getTime();
-      newMap.set(id, props);
-      setModals(newMap);
+      setModals((prevMap: Modals) => {
+        const newMap = new Map(prevMap);
+        if (props.id && newMap.has(props.id)) {
+          return prevMap;
+        }
+        const id = props.id || createUid();
+        props.id = id;
+        props.type = props.type || ModalType.Modal;
+        props.isOpen = true;
+        props.createdAt = new Date().getTime();
+        newMap.set(id, props);
+        return newMap;
+      });
     },
     [setModals]
   );
@@ -43,26 +47,33 @@ const useModal = () => {
     async (id?: string) => {
       const _id = id || getRecentModalId();
       if (!_id) return;
-      const newMap = new Map(_modals);
-      const props = newMap.get(_id);
-      if (!props) return;
-      props.isOpen = false;
-      newMap.set(_id, props);
-      setModals(newMap);
+      setModals((prevMap: Modals) => {
+        const newMap = new Map(prevMap);
+        const props = newMap.get(_id);
+        if (!props) {
+          return prevMap;
+        }
+        props.isOpen = false;
+        newMap.set(_id, props);
+        return newMap;
+      });
       await delay(deleteDelay);
-      newMap.delete(_id);
-      return setModals(new Map(newMap));
+      setModals((prevMap: Modals) => {
+        const newMap = new Map(prevMap);
+        newMap.delete(_id);
+        return newMap;
+      });
     },
     [deleteDelay, setModals, getRecentModalId]
   );
 
   const changeModal = useCallback(
     async (props: ModalProps) => {
       await closeModal();
-      await delay(20);
+      await delay(deleteDelay / 2);
       openModal(props);
     },
-    [openModal, closeModal]
+    [deleteDelay, openModal, closeModal]
   );
 
   const openBottomSheet = (props: ModalProps) => {

src/stories/Modal.stories.tsx

@@ -1,5 +1,6 @@
+import styled from '@emotion/styled';
 import type { Meta } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import useModal from '@/hooks/useModal';
 
@@ -12,17 +13,89 @@ const meta = {
 export default meta;
 
 const App = () => {
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
+
+  const [count, setCount] = useState(0);
+
+  const openTest1Modal = () => {
+    openModal({
+      id: 'test1',
+      component: () => (
+        <div>
+          <Button onClick={openTest2Modal}>openTest2Modal</Button>
+        </div>
+      ),
+    });
+  };
+
+  const openTest2Modal = () => {
+    openModal({
+      id: 'test2',
+      component: () => <div>test2</div>,
+      onAfterClose: async () => {
+        closeModal('test1');
+      },
+    });
+  };
+
+  const open2Modal = () => {
+    openModal({
+      id: 'test1',
+      component: () => (
+        <div>
+          <p>test1</p>
+          <p>test1</p>
+          <p>test1</p>
+          <p>test1</p>
+        </div>
+      ),
+    });
+    openModal({
+      id: 'test2',
+      component: () => (
+        <div>
+          <Button onClick={close2Modal}>close2Modal</Button>
+        </div>
+      ),
+    });
+  };
+
+  const close2Modal = () => {
+    closeModal('test1');
+    closeModal('test2');
+  };
+
+  const batchTest = () => {
+    // setCount(count + 1);
+    // setCount(count + 1);
+    // setCount(count + 1);
+    setCount((c) => c + 1);
+    setCount((c) => c + 1);
+    setCount((c) => c + 1);
+  };
 
   return (
-    <div>
-      <button onClick={() => openModal({ component: () => <div>123</div> })}>
-        Open Modal
-      </button>
-    </div>
+    <Container>
+      {/* <Button onClick={batchTest}>{`count : ${count}`}</Button> */}
+      <Button onClick={openTest1Modal}>openTest1Modal</Button>
+      <Button onClick={open2Modal}>open2Modal</Button>
+    </Container>
   );
 };
 
 export const Modal_ = {
   render: () => <App></App>,
 };
+
+const Container = styled.div`
+  display: flex;
+  flex: wrap;
+  gap: 16px;
+`;
+const Button = styled.button`
+  border: 1px solid black;
+  padding: 8px;
+  border-radius: 8px;
+  background-color: transparent;
+  cursor: pointer;
+`;

src/types/modal.ts

@@ -28,10 +28,11 @@ export interface ModalProps {
   // bottomSheet style
   height?: number | string;
 
+  // content
+  component?: () => JSX.Element;
+
   // function
   onAfterOpen?: () => void;
   onAfterClose?: () => void;
-
-  component?: () => JSX.Element;
 }
 export type Modals = Map<string, ModalProps>;