Refactor App.tsx; Update page field in manifest.json

earvinpiamonte · Feb 7, 2021 · b582341 · b582341
1 parent 6fd6382
commit b582341
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 22 deletions.
diff --git 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
@@ -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;