fix unable to render multiple modals (#49)

reapit · Aug 1, 2019 · 280f6fc · 280f6fc
1 parent ada66b9
commit 280f6fc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 31 deletions.
diff --git a/src/components/ui/__tests__/modal.tsx b/src/components/ui/__tests__/modal.tsx
@@ -22,21 +22,25 @@ const App: React.FunctionComponent<any> = ({ defaultVisible = false }: { default
   )
 }
 
-// const AppWithMultipleModal: React.FunctionComponent<any> = () => {
-//   const [visible, setVisible] = React.useState<boolean>(false)
-//   return (
-//     <>
-//       <Modal visible={true}>
-//         <div>
-//           <button data-test="show-second-modal" onClick={() => setVisible(true)} />
-//           <Modal visible={visible}>
-//             <div>modal child 2</div>
-//           </Modal>
-//         </div>
-//       </Modal>
-//     </>
-//   )
-// }
+const InnerComponentWithAnotherModal = () => {
+  const [visible, setVisible] = React.useState<boolean>(false)
+  return (
+    <div>
+      <button data-test="show-second-modal" onClick={() => setVisible(true)} />
+      <Modal visible={visible}>
+        <div>modal child 2</div>
+      </Modal>
+    </div>
+  )
+}
+
+const AppModalInsideModal: React.FunctionComponent<any> = () => {
+  return (
+    <Modal visible={true}>
+      <InnerComponentWithAnotherModal />
+    </Modal>
+  )
+}
 
 describe('Modal', () => {
   it('should show Modal when visible prop is true', () => {
@@ -55,15 +59,26 @@ describe('Modal', () => {
     expect(wrapper.find('[data-test="modal"]')).toHaveLength(0)
   })
 
-  // TODO: will make the test pass later
-  // it('Should render multiple Modals correctly', () => {
-  //   const wrapper = mount(renderWithPortalProvider(<AppWithMultipleModal />))
-  //   const showSecondModalButton = wrapper.find('[data-test="show-second-modal"]')
-  //   expect(wrapper.find('[data-test="modal"]')).toHaveLength(1)
-  //   expect(showSecondModalButton).toHaveLength(1)
-  //   showSecondModalButton.simulate('click')
-  //   expect(wrapper.find('[data-test="modal"]')).toHaveLength(2)
-  // })
+  it('Should render multiple Modals correctly', () => {
+    const wrapper = mount(
+      renderWithPortalProvider(
+        <>
+          <Modal visible={true}>Modal 1</Modal>
+          <Modal visible={true}>Modal 2</Modal>
+        </>
+      )
+    )
+    expect(wrapper.find('[data-test="modal"]')).toHaveLength(2)
+  })
+
+  it('Should render a component containing a Modal inside a Modal', () => {
+    const wrapper = mount(renderWithPortalProvider(<AppModalInsideModal />))
+    const showSecondModalButton = wrapper.find('[data-test="show-second-modal"]')
+    expect(wrapper.find('[data-test="modal"]')).toHaveLength(1)
+    expect(showSecondModalButton).toHaveLength(1)
+    showSecondModalButton.simulate('click')
+    expect(wrapper.find('[data-test="modal"]')).toHaveLength(2)
+  })
 
   afterEach(() => {
     jest.resetAllMocks()

diff --git a/src/hooks/use-portal/portal-provider.tsx b/src/hooks/use-portal/portal-provider.tsx
@@ -11,19 +11,21 @@ export const PortalProvider: React.FunctionComponent<PortalProviderProps> = ({ c
 
   const showPortal = React.useCallback(
     (key: string, modal: React.ComponentType<any>) => {
-      setPortals({
-        ...portals,
+      setPortals(prevPortals => ({
+        ...prevPortals,
         [key]: modal
-      })
+      }))
     },
     [portals]
   )
 
   const hidePortal = React.useCallback(
     (key: string) => {
-      const newPortals = { ...portals }
-      delete newPortals[key]
-      setPortals(newPortals)
+      setPortals(prevPortals => {
+        const newPortals = { ...prevPortals }
+        delete newPortals[key]
+        return newPortals
+      })
     },
     [portals]
   )

diff --git a/src/hooks/use-portal/use-portal.ts b/src/hooks/use-portal/use-portal.ts
@@ -21,7 +21,9 @@ export function usePortal(component: React.ComponentType<any>) {
       context.hidePortal(key)
     }
 
-    return () => context.hidePortal(key)
+    return () => {
+      context.hidePortal(key)
+    }
   }, [portal, isShown])
 
   return [showPortal, hidePortal]