use shared install components

Author: skedwards88

src/components/App.js

@@ -9,7 +9,9 @@ import {TimerBlocker} from "./Timer";
 import {
   handleAppInstalled,
   handleBeforeInstallPrompt,
-} from "../logic/handleInstall";
+} from "@skedwards88/shared-components/src/logic/handleInstall";
+import InstallOverview from "@skedwards88/shared-components/src/components/InstallOverview";
+import PWAInstall from "@skedwards88/shared-components/src/components/PWAInstall";
 import {timerInit} from "../logic/timerInit";
 import {timerReducer} from "../logic/timerReducer";
 
@@ -31,11 +33,45 @@ function parseURLQuery() {
 }
 
 export default function App() {
+  // *****
+  // Install handling setup
+  // *****
+  // Set up states that will be used by the handleAppInstalled and handleBeforeInstallPrompt listeners
+  const [installPromptEvent, setInstallPromptEvent] = React.useState();
+  const [showInstallButton, setShowInstallButton] = React.useState(true);
+
+  React.useEffect(() => {
+    // Need to store the function in a variable so that
+    // the add and remove actions can reference the same function
+    const listener = (event) =>
+      handleBeforeInstallPrompt(
+        event,
+        setInstallPromptEvent,
+        setShowInstallButton,
+      );
+
+    window.addEventListener("beforeinstallprompt", listener);
+
+    return () => window.removeEventListener("beforeinstallprompt", listener);
+  }, []);
+
+  React.useEffect(() => {
+    // Need to store the function in a variable so that
+    // the add and remove actions can reference the same function
+    const listener = () =>
+      handleAppInstalled(setInstallPromptEvent, setShowInstallButton);
+
+    window.addEventListener("appinstalled", listener);
+
+    return () => window.removeEventListener("appinstalled", listener);
+  }, []);
+  // *****
+  // End install handling setup
+  // *****
+
   const [seed, gridSize, minWordLength, easyMode] = parseURLQuery();
 
   const [display, setDisplay] = React.useState("pause");
-  const [installPromptEvent, setInstallPromptEvent] = React.useState();
-  const [showInstallButton, setShowInstallButton] = React.useState(true);
 
   const [gameState, dispatchGameState] = React.useReducer(
     gameReducer,
@@ -90,26 +126,6 @@ export default function App() {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
   });
 
-  React.useEffect(() => {
-    const listener = (event) =>
-      handleBeforeInstallPrompt(
-        event,
-        setInstallPromptEvent,
-        setShowInstallButton,
-      );
-
-    window.addEventListener("beforeinstallprompt", listener);
-    return () => window.removeEventListener("beforeinstallprompt", listener);
-  }, []);
-
-  React.useEffect(() => {
-    const listener = () =>
-      handleAppInstalled(setInstallPromptEvent, setShowInstallButton);
-
-    window.addEventListener("appinstalled", listener);
-    return () => window.removeEventListener("appinstalled", listener);
-  }, []);
-
   switch (display) {
     case "settings":
       return (
@@ -139,6 +155,29 @@ export default function App() {
     case "info":
       return <Rules timerDispatch={timerDispatch} setDisplay={setDisplay} />;
 
+    case "installOverview":
+      return (
+        <InstallOverview
+          setDisplay={setDisplay}
+          setInstallPromptEvent={setInstallPromptEvent}
+          showInstallButton={showInstallButton}
+          installPromptEvent={installPromptEvent}
+          googleAppLink={
+            "https://play.google.com/store/apps/details?id=gribbles.io.github.skedwards88.twa&hl=en_US"
+          }
+        ></InstallOverview>
+      );
+
+    case "pwaInstall":
+      return (
+        <PWAInstall
+          setDisplay={setDisplay}
+          googleAppLink={
+            "https://play.google.com/store/apps/details?id=gribbles.io.github.skedwards88.twa&hl=en_US"
+          }
+        ></PWAInstall>
+      );
+
     case "game":
       return (
         <Game
@@ -147,9 +186,6 @@ export default function App() {
           timerState={timerState}
           timerDispatch={timerDispatch}
           setDisplay={setDisplay}
-          setInstallPromptEvent={setInstallPromptEvent}
-          showInstallButton={showInstallButton}
-          installPromptEvent={installPromptEvent}
         ></Game>
       );
 

src/components/ControlBar.js

@@ -1,14 +1,11 @@
 import React from "react";
-import {handleInstall} from "../logic/handleInstall";
 import {handleShare} from "./Share";
+import {isRunningStandalone} from "@skedwards88/shared-components/src/logic/isRunningStandalone";
 
 export default function ControlBar({
   gameState,
   dispatchGameState,
   setDisplay,
-  setInstallPromptEvent,
-  showInstallButton,
-  installPromptEvent,
   timerState,
   timerDispatch,
 }) {
@@ -74,12 +71,10 @@ export default function ControlBar({
         <></>
       )}
 
-      {showInstallButton && installPromptEvent ? (
+      {!isRunningStandalone() ? (
         <button
           id="installButton"
-          onClick={() =>
-            handleInstall(installPromptEvent, setInstallPromptEvent)
-          }
+          onClick={() => setDisplay("installOverview")}
         ></button>
       ) : (
         <></>

src/components/Game.js

@@ -12,9 +12,6 @@ export default function Game({
   timerState,
   timerDispatch,
   setDisplay,
-  setInstallPromptEvent,
-  showInstallButton,
-  installPromptEvent,
 }) {
   return (
     <div
@@ -32,9 +29,6 @@ export default function Game({
         gameState={gameState}
         dispatchGameState={dispatchGameState}
         setDisplay={setDisplay}
-        setInstallPromptEvent={setInstallPromptEvent}
-        showInstallButton={showInstallButton}
-        installPromptEvent={installPromptEvent}
         timerState={timerState}
         timerDispatch={timerDispatch}
       ></ControlBar>

src/index.js

@@ -3,6 +3,7 @@ import React from "react";
 import App from "./components/App";
 import "./App.css";
 import "@skedwards88/shared-components/src/styles/MoreGames.css";
+import "@skedwards88/shared-components/src/styles/Install.css";
 
 if (process.env.NODE_ENV !== "development" && "serviceWorker" in navigator) {
   const path =