update

src/composables/Page.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { endLoading, startLoading } from '../services/nprogress';
+import { usePage } from './usePage';
+
+interface PageProps {}
+
+const Page: React.FC<PageProps> = ({ children }) => {
+  const { onLoad } = usePage();
+
+  const render = React.useMemo(() => {
+    return <>{children}</>;
+  }, [children]);
+
+  React.useEffect(() => {
+    onLoad(render);
+  }, [onLoad, render]);
+
+  React.useEffect(() => {
+    endLoading();
+    return () => startLoading();
+  }, []);
+
+  return render;
+};
+
+export default Page;

src/pages/About.tsx

@@ -1,21 +1,19 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { ModalContext } from '../composables/ModalProvider';
-import { usePage } from '../composables/usePage';
-import { endLoading, startLoading } from '../services/nprogress';
+import Page from '../composables/Page';
 
 interface AboutProps {}
 
 const About: React.FC<AboutProps> = () => {
-  const { onLoad } = usePage();
   const { isOpen, updateIsOpen } = React.useContext(ModalContext);
 
   const toggleModal = React.useCallback(() => {
     updateIsOpen(!isOpen);
   }, [isOpen, updateIsOpen]);
 
-  const render = React.useMemo(() => {
-    return (
+  return (
+    <Page>
       <div>
         <Link to="/">Home</Link>
         <Link to="/contact">Contact</Link>
@@ -28,19 +26,8 @@ const About: React.FC<AboutProps> = () => {
           Toggle Modal
         </button>
       </div>
-    );
-  }, [toggleModal]);
-
-  React.useEffect(() => {
-    onLoad(render);
-  }, [onLoad, render]);
-
-  React.useEffect(() => {
-    endLoading();
-    return () => startLoading();
-  }, []);
-
-  return render;
+    </Page>
+  );
 };
 
 export default About;

src/pages/Contact.tsx

@@ -1,48 +1,27 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { ModalContext } from '../composables/ModalProvider';
-import { usePage } from '../composables/usePage';
-import { endLoading, startLoading } from '../services/nprogress';
+import Page from '../composables/Page';
 
 interface ContactProps {}
 
 const Contact: React.FC<ContactProps> = () => {
-  const { onLoad } = usePage();
   const { isOpen, updateIsOpen } = React.useContext(ModalContext);
 
   const toggleModal = React.useCallback(() => {
-    console.log(isOpen);
     updateIsOpen(!isOpen);
   }, [isOpen, updateIsOpen]);
 
-  const render = React.useMemo(() => {
-    return (
+  return (
+    <Page>
       <div>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
         <h1>Contact</h1>
-        <button
-          onClick={() => {
-            toggleModal();
-            console.log('hello');
-          }}
-        >
-          Toggle Modal
-        </button>
+        <button onClick={toggleModal}>Toggle Modal</button>
       </div>
-    );
-  }, [toggleModal]);
-
-  React.useEffect(() => {
-    onLoad(render);
-  }, [onLoad, render]);
-
-  React.useEffect(() => {
-    endLoading();
-    return () => startLoading();
-  }, []);
-
-  return render;
+    </Page>
+  );
 };
 
 export default Contact;

src/pages/Home.tsx

@@ -1,21 +1,19 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { ModalContext } from '../composables/ModalProvider';
-import { usePage } from '../composables/usePage';
-import { endLoading, startLoading } from '../services/nprogress';
+import Page from '../composables/Page';
 
 interface HomeProps {}
 
 const Home: React.FC<HomeProps> = () => {
-  const { onLoad } = usePage();
   const { isOpen, updateIsOpen } = React.useContext(ModalContext);
 
   const toggleModal = React.useCallback(() => {
     updateIsOpen(!isOpen);
   }, [isOpen, updateIsOpen]);
 
-  const render = React.useMemo(() => {
-    return (
+  return (
+    <Page>
       <div>
         <Link to="/about">About</Link>
         <Link to="/contact">Contact</Link>
@@ -28,19 +26,8 @@ const Home: React.FC<HomeProps> = () => {
           Toggle Modal
         </button>
       </div>
-    );
-  }, [toggleModal]);
-
-  React.useEffect(() => {
-    onLoad(render);
-  }, [onLoad, render]);
-
-  React.useEffect(() => {
-    endLoading();
-    return () => startLoading();
-  }, []);
-
-  return render;
+    </Page>
+  );
 };
 
 export default Home;