From 7198c157476ac7e163e5ce93b75c2eb66b521c8c Mon Sep 17 00:00:00 2001
From: Anton <21086792+Quernest@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:36:36 +0300
Subject: [PATCH] #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              |  4 ++++
 example/src/components/route.tsx | 33 ++++++++++++++++++++++++++++++++
 package.json                     |  2 +-
 src/use-modal.ts                 | 14 +++++++-------
 4 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 example/src/components/route.tsx

diff --git a/example/src/app.tsx b/example/src/app.tsx
index 1645db0..8167521 100644
--- a/example/src/app.tsx
+++ b/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>
   );
 };
diff --git a/example/src/components/route.tsx b/example/src/components/route.tsx
new file mode 100644
index 0000000..b860e0f
--- /dev/null
+++ b/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;
+}
diff --git a/package.json b/package.json
index d0cc53d..992def0 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.4.2",
+  "version": "2.4.3",
   "license": "MIT",
   "name": "mui-modal-provider",
   "author": "Quernest",
diff --git a/src/use-modal.ts b/src/use-modal.ts
index c126352..73c04c7 100644
--- a/src/use-modal.ts
+++ b/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,
   };
 }