From 6427af90ef6a5df1bb22b99602ad2bfe53778e52 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Thu, 21 Jul 2022 22:27:59 +0800 Subject: [PATCH] refactor: usePWAInstallPrompt --- src/app/services/server.ts | 6 --- src/common/component/BlankPlaceholder.tsx | 12 ++--- src/common/component/Manifest/index.tsx | 23 +++------- src/common/component/Manifest/usePrompt.tsx | 17 ------- src/common/hook/usePWAInstallPrompt.ts | 49 +++++++++++++++++++++ 5 files changed, 63 insertions(+), 44 deletions(-) delete mode 100644 src/common/component/Manifest/usePrompt.tsx create mode 100644 src/common/hook/usePWAInstallPrompt.ts diff --git a/src/app/services/server.ts b/src/app/services/server.ts index ca4c78c8..c4cf6419 100644 --- a/src/app/services/server.ts +++ b/src/app/services/server.ts @@ -189,11 +189,6 @@ export const serverApi = createApi({ body: data }) }), - getInitialized: builder.query({ - query: () => ({ - url: `/admin/system/initialized` - }) - }), getLicense: builder.query({ query: () => ({ url: `/license` @@ -244,7 +239,6 @@ export const { useGetThirdPartySecretQuery, useUpdateThirdPartySecretMutation, useCreateAdminMutation, - useGetInitializedQuery, useUpsertLicenseMutation, useCheckLicenseMutation, useGetLicenseQuery diff --git a/src/common/component/BlankPlaceholder.tsx b/src/common/component/BlankPlaceholder.tsx index f603d080..5eec4c75 100644 --- a/src/common/component/BlankPlaceholder.tsx +++ b/src/common/component/BlankPlaceholder.tsx @@ -1,6 +1,6 @@ import { FC, useState } from "react"; import styled from "styled-components"; -import { NavLink } from "react-router-dom"; +// import { NavLink } from "react-router-dom"; import ChannelModal from "./ChannelModal"; import InviteModal from "./InviteModal"; import IconChat from "../../assets/icons/placeholder.chat.svg"; @@ -8,6 +8,7 @@ import IconAsk from "../../assets/icons/placeholder.question.svg"; import IconInvite from "../../assets/icons/placeholder.invite.svg"; import IconDownload from "../../assets/icons/placeholder.download.svg"; import UsersModal from "./UsersModal"; +import usePWAInstallPrompt from "../hook/usePWAInstallPrompt"; import { useAppSelector } from "../../app/store"; const Styled = styled.div` @@ -72,6 +73,7 @@ interface Props { } const BlankPlaceholder: FC = ({ type = "chat" }) => { + const { showPrompt } = usePWAInstallPrompt(); const server = useAppSelector((store) => store.server); const [inviteModalVisible, setInviteModalVisible] = useState(false); const [createChannelVisible, setCreateChannelVisible] = useState(false); @@ -108,14 +110,14 @@ const BlankPlaceholder: FC = ({ type = "chat" }) => {
{chatTip}
- + +
Got questions? Visit our help center
- + {createChannelVisible && ( diff --git a/src/common/component/Manifest/index.tsx b/src/common/component/Manifest/index.tsx index 7d643342..0b00bcaf 100644 --- a/src/common/component/Manifest/index.tsx +++ b/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 = () => { - const { setCanceled: setCanceled, prompted } = usePrompt(); - const deferredPromptRef = useRef(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 = () => { 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(); diff --git a/src/common/component/Manifest/usePrompt.tsx b/src/common/component/Manifest/usePrompt.tsx deleted file mode 100644 index 95f1cb80..00000000 --- a/src/common/component/Manifest/usePrompt.tsx +++ /dev/null @@ -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 - }; -} diff --git a/src/common/hook/usePWAInstallPrompt.ts b/src/common/hook/usePWAInstallPrompt.ts new file mode 100644 index 00000000..042e597a --- /dev/null +++ b/src/common/hook/usePWAInstallPrompt.ts @@ -0,0 +1,49 @@ +import { useRef, useEffect } from "react"; +import { KEY_PWA_INSTALLED } from "../../app/config"; +import { BeforeInstallPromptEvent } from "../../types/global"; + +export default function usePWAInstallPrompt() { + const deferredPromptRef = useRef(null); + const resetPrompt = () => { + localStorage.removeItem(KEY_PWA_INSTALLED); + deferredPromptRef.current = null; + }; + const setPrompt = () => { + localStorage.setItem(KEY_PWA_INSTALLED, "true"); + }; + + const setDeferredPrompt = (p: BeforeInstallPromptEvent | null) => { + deferredPromptRef.current = p; + }; + const showPrompt = async () => { + 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 + setDeferredPrompt(null); + }; + useEffect(() => { + const handleInstallPromotion = (e: BeforeInstallPromptEvent) => { + // Prevent the mini-infobar from appearing on mobile + e.preventDefault(); + // Stash the event so it can be triggered later. + setDeferredPrompt(e); + }; + window.addEventListener("beforeinstallprompt", handleInstallPromotion, true); + return () => { + window.removeEventListener("beforeinstallprompt", handleInstallPromotion, true); + }; + }, []); + return { + setCanceled: setPrompt, + prompted: !!localStorage.getItem(KEY_PWA_INSTALLED), + resetPrompt, + deferredPrompt: deferredPromptRef.current, + setDeferredPrompt, + showPrompt + }; +}