refactor: usePWAInstallPrompt

src/common/component/Manifest/index.tsx

@@ -1,25 +1,24 @@
-import { useEffect, useState, useRef, FC } from "react";
-import { BeforeInstallPromptEvent } from "../../../types/global";
+import { useEffect, useState, FC } from "react";
 import Prompt from "./Prompt";
-import usePrompt from "./usePrompt";
+import usePWAInstallPrompt from "../../hook/usePWAInstallPrompt";
+import { BeforeInstallPromptEvent } from "../../../types/global";
 interface IProps {}
 const Manifest: FC<IProps> = () => {
-  const { setCanceled: setCanceled, prompted } = usePrompt();
-  const deferredPromptRef = useRef<null | BeforeInstallPromptEvent>(null);
+  const { setCanceled, prompted, setDeferredPrompt, showPrompt } = usePWAInstallPrompt();
   const [popup, setPopup] = useState(false);
   useEffect(() => {
     const handleInstallPromotion = (e: BeforeInstallPromptEvent) => {
       // Prevent the mini-infobar from appearing on mobile
       e.preventDefault();
       // Stash the event so it can be triggered later.
-      deferredPromptRef.current = e;
+      setDeferredPrompt(e);
       // Update UI notify the user they can install the PWA
       setPopup(true);
       // Optionally, send analytics event that PWA install promo was shown.
       console.log(`'beforeinstallprompt' event was fired.`);
     };
     const handleInstalled = () => {
-      deferredPromptRef.current = null;
+      setDeferredPrompt(null);
       setPopup(false);
     };
     window.addEventListener("beforeinstallprompt", handleInstallPromotion, true);
@@ -32,15 +31,7 @@ const Manifest: FC<IProps> = () => {
   const handleInstall = async () => {
     // Hide the app provided install promotion
     setPopup(false);
-    if (!deferredPromptRef.current) return;
-    // Show the install prompt
-    deferredPromptRef.current.prompt();
-    // Wait for the user to respond to the prompt
-    const { outcome } = await deferredPromptRef.current.userChoice;
-    // Optionally, send analytics event with outcome of user choice
-    console.log(`User response to the install prompt: ${outcome}`);
-    // We've used the prompt, and can't use it again, throw it away
-    deferredPromptRef.current = null;
+    await showPrompt();
   };
   const handleClose = async () => {
     setCanceled();

src/common/component/Manifest/usePrompt.tsx

@@ -1,17 +0,0 @@
-// import React from "react";
-import { KEY_PWA_INSTALLED } from "../../../app/config";
-
-export default function usePrompt() {
-  const resetPrompt = () => {
-    localStorage.removeItem(KEY_PWA_INSTALLED);
-  };
-  const setPrompt = () => {
-    localStorage.setItem(KEY_PWA_INSTALLED, "true");
-  };
-
-  return {
-    setCanceled: setPrompt,
-    prompted: !!localStorage.getItem(KEY_PWA_INSTALLED),
-    resetPrompt
-  };
-}