From b582341df0bd1dc0f48aea8268e21dac1366c924 Mon Sep 17 00:00:00 2001
From: Noel Earvin Piamonte <earvin.piamonte@gmail.com>
Date: Sun, 7 Feb 2021 16:01:24 +0800
Subject: [PATCH] Refactor `App.tsx`; Update `page` field in `manifest.json`

---
 public/manifest.json |  4 ++--
 src/App.tsx          | 29 +++++++++--------------------
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index d60429e..9754485 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -25,10 +25,10 @@
     }
   ],
   "page_action": {
-    "default_popup": "index.html?page=popup",
+    "default_popup": "index.html?page=Popup",
     "default_title": "Open Jira Software Tool"
   },
-  "options_page": "index.html?page=options",
+  "options_page": "index.html?page=Options",
   "icons": {
     "16": "images/16.png",
     "32": "images/32.png",
diff --git a/src/App.tsx b/src/App.tsx
index 3f47269..ec92894 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,11 @@ import React from "react";
 
 import GetManifestWithChrome from "./utils/GetManifestWithChrome";
 
-import Popup from "./pages/Popup";
-import Options from "./pages/Options";
-import Test from "./pages/Test";
-
 const App = ({ page }: { page: string }) => {
+  const Component = React.lazy(
+    () => import(`./pages/${page}`).catch((err) => null) // catch but I hope I don't fall
+  );
+
   const [manifest, setManifest] = React.useState();
 
   const loadManifest = async () => {
@@ -18,22 +18,11 @@ const App = ({ page }: { page: string }) => {
     loadManifest();
   }, []);
 
-  // check what page is requested base on `page` props passed from `index.js`
-  switch (page) {
-    case "popup":
-      return <Popup manifest={manifest} />;
-    case "options":
-      return <Options manifest={manifest} />;
-    case "test":
-      return process.env.NODE_ENV === "development" ? (
-        <Test />
-      ) : (
-        <Options manifest={manifest} />
-      );
-    // return default page - Options page
-    default:
-      return <Options manifest={manifest} />;
-  }
+  return (
+    <React.Suspense fallback={null}>
+      <Component manifest={manifest} />
+    </React.Suspense>
+  );
 };
 
 export default App;