From 7b42942e68b3ee0e9fc2f957dd86beed43da736e Mon Sep 17 00:00:00 2001
From: HanMoeHtet <hapo23lert@gmail.com>
Date: Mon, 15 Nov 2021 14:00:16 +0630
Subject: [PATCH] update

---
 src/composables/Page.tsx | 26 ++++++++++++++++++++++++++
 src/pages/About.tsx      | 23 +++++------------------
 src/pages/Contact.tsx    | 33 ++++++---------------------------
 src/pages/Home.tsx       | 23 +++++------------------
 4 files changed, 42 insertions(+), 63 deletions(-)
 create mode 100644 src/composables/Page.tsx

diff --git a/src/composables/Page.tsx b/src/composables/Page.tsx
new file mode 100644
index 0000000..8a56bde
--- /dev/null
+++ b/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;
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 810a691..3c2ea98 100644
--- a/src/pages/About.tsx
+++ b/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;
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index aa9a179..40dcbaf 100644
--- a/src/pages/Contact.tsx
+++ b/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;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f0de2fd..6e0b3cd 100644
--- a/src/pages/Home.tsx
+++ b/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;