fix(ui): improve PWA install support

ncarlier · Sep 16, 2024 · 7437f45 · 7437f45
1 parent 83869ba
commit 7437f45
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 32 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -7,6 +7,7 @@ import { Store } from 'redux'
 
 import {
   CurrentUserProvider,
+  DeviceProvider,
   GraphQLProvider,
   LocalConfigurationProvider,
   MessageProvider,
@@ -37,21 +38,23 @@ export default function App({ store, history /*, theme*/ }: Props) {
       <ConnectedRouter history={history}>
         <AuthenticationProvider>
           <GraphQLProvider>
-            <LocalConfigurationProvider>
-              <MessageProvider>
-                <ModalProvider>
-                  <NavbarProvider>
-                    <ScrollMemoryProvider>
-                      <CurrentUserProvider>
-                        <AppLayout>
-                          <Routes />
-                        </AppLayout>
-                      </CurrentUserProvider>
-                    </ScrollMemoryProvider>
-                  </NavbarProvider>
-                </ModalProvider>
-              </MessageProvider>
-            </LocalConfigurationProvider>
+            <DeviceProvider>
+              <LocalConfigurationProvider>
+                <MessageProvider>
+                  <ModalProvider>
+                    <NavbarProvider>
+                      <ScrollMemoryProvider>
+                        <CurrentUserProvider>
+                          <AppLayout>
+                            <Routes />
+                          </AppLayout>
+                        </CurrentUserProvider>
+                      </ScrollMemoryProvider>
+                    </NavbarProvider>
+                  </ModalProvider>
+                </MessageProvider>
+              </LocalConfigurationProvider>
+            </DeviceProvider>
           </GraphQLProvider>
         </AuthenticationProvider>
       </ConnectedRouter>

diff --git a/ui/src/contexts/DeviceContext.tsx b/ui/src/contexts/DeviceContext.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, FC, PropsWithChildren, useContext, useState } from 'react'
+import { useAddToHomescreenPrompt } from '../hooks'
+import { isDisplayMode } from '../helpers'
+
+interface DeviceContextType {
+  isInstalled: boolean
+  isInstallable: boolean
+  promptToInstall: () => void
+}
+
+const DeviceContext = createContext<DeviceContextType>({
+  isInstalled: false,
+  isInstallable: false,
+  promptToInstall: () => {return},
+})
+
+const DeviceProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [prompt, promptToInstall] = useAddToHomescreenPrompt()
+  const [isInstalled] = useState(isDisplayMode('standalone'))
+  const [isInstallable, setInstallableState] = useState(false)
+
+  React.useEffect(
+    () => {
+      if (prompt) {
+        setInstallableState(true)
+      }
+    },
+    [prompt]
+  )
+
+  return <DeviceContext.Provider value={{ isInstalled, isInstallable, promptToInstall }}>{children}</DeviceContext.Provider>
+}
+
+export { DeviceProvider }
+
+export const useDevice = () => useContext(DeviceContext)
diff --git a/ui/src/contexts/index.ts b/ui/src/contexts/index.ts
@@ -1,4 +1,5 @@
 export * from './CurrentUserContext'
+export * from './DeviceContext'
 export * from './GraphQLContext'
 export * from './LocalConfigurationContext'
 export * from './MessageContext'

diff --git a/ui/src/hooks/useAddToHomeScreenPrompt.ts b/ui/src/hooks/useAddToHomeScreenPrompt.ts
@@ -17,7 +17,7 @@ export function useAddToHomescreenPrompt(): [
     null
   )
 
-  const promptToInstall = () => {
+  const promptToInstall = React.useCallback(() => {
     if (prompt) {
       return prompt.prompt()
     }
@@ -26,7 +26,7 @@ export function useAddToHomescreenPrompt(): [
         'Tried installing before browser sent "beforeinstallprompt" event'
       )
     )
-  }
+  }, [prompt])
 
   React.useEffect(() => {
     const ready = (e: IBeforeInstallPromptEvent) => {

diff --git a/ui/src/settings/preferences/InstallationBox.tsx b/ui/src/settings/preferences/InstallationBox.tsx
@@ -1,8 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { Box, Button } from '../../components'
-import { isDisplayMode } from '../../helpers'
-import { useAddToHomescreenPrompt } from '../../hooks'
+import { useDevice } from '../../contexts'
 
 interface InstallProps {
   onClick?: (e: any) => void
@@ -38,18 +37,7 @@ const Uninstallable = () => (
 )
 
 const InstallationBox = () => {
-  const [prompt, promptToInstall] = useAddToHomescreenPrompt()
-  const [isInstalled] = useState(isDisplayMode('standalone'))
-  const [isInstallable, setInstallableState] = useState(false)
-
-  React.useEffect(
-    () => {
-      if (prompt) {
-        setInstallableState(true)
-      }
-    },
-    [prompt]
-  )
+  const {isInstalled, isInstallable, promptToInstall} = useDevice()
 
   return (
     <Box title="Installation">