#95 fixed incorrect destroy modal function call (#96)

* #95 fixed incorrect destroy modal function call

* #95 live test

* #95 Bump version from 2.4.2 to 2.4.3

example/src/app.tsx

@@ -10,6 +10,7 @@ import {
   SimpleModal,
   TransitionModal,
 } from './components';
+import Route from './components/route'
 
 const SimpleLazyLoadedDialog = React.lazy(() =>
   import('./components/dialogs/simple-dialog-for-lazy-loading')
@@ -110,6 +111,9 @@ const App = () => {
           transition modal
         </Button>
       </Grid>
+      <Grid item>
+        <Route />
+      </Grid>
     </Grid>
   );
 };

example/src/components/route.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import { useModal } from '../../../src';
+import { SimpleDialog } from './dialogs';
+import { useEffect, useState } from 'react';
+
+function RouteContent() {
+  const { showModal } = useModal();
+
+  return (
+    <Button
+      variant="contained"
+      onClick={() => showModal(SimpleDialog)}
+      color="primary"
+    >
+      Hurry, click me
+    </Button>
+  );
+}
+
+export default function Route() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => setIsVisible(false), 5000);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return isVisible ? <RouteContent /> : undefined;
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.2",
+  "version": "2.4.3",
   "license": "MIT",
   "name": "mui-modal-provider",
   "author": "Quernest",

src/use-modal.ts

@@ -15,31 +15,31 @@ export default function useModal(options: UseModalOptions = defaultOptions) {
   const { disableAutoDestroy } = { ...defaultOptions, ...options };
   const {
     showModal,
-    destroyModal,
+    destroyModalsByRootId,
     ...otherModalContextProps
   } = useModalContext();
-  const id = useRef<string>(uid(6));
+  const rootId = useRef<string>(uid(6));
 
   useEffect(
     () => () => {
-      if (!disableAutoDestroy && destroyModal) {
-        destroyModal(id.current);
+      if (!disableAutoDestroy && destroyModalsByRootId) {
+        destroyModalsByRootId(rootId.current);
       }
     },
-    [disableAutoDestroy, destroyModal]
+    [disableAutoDestroy, destroyModalsByRootId]
   );
 
   return {
     showModal: useCallback<ShowFn>(
       (component, props, options) =>
         showModal(component, props, {
-          rootId: id.current,
+          rootId: rootId.current,
           hideOnClose: true,
           ...options,
         }),
       [showModal]
     ),
-    destroyModal,
+    destroyModalsByRootId,
     ...otherModalContextProps,
   };
 }