feat: Handle offline mode in Flagship app

manifest.webapp

@@ -13,6 +13,7 @@
   },
   "version": "1.85.0",
   "licence": "AGPL-3.0",
+  "offline_support": true,
   "permissions": {
     "home": {
       "description": "Required to manage default redirection update",

package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@sentry/react": "7.119.0",
     "cozy-client": "^51.6.0",
-    "cozy-dataproxy-lib": "^2.3.0",
+    "cozy-dataproxy-lib": "^3.4.1",
     "cozy-device-helper": "3.7.1",
     "cozy-devtools": "^1.2.1",
     "cozy-doctypes": "1.83.8",
@@ -47,6 +47,7 @@
     "cozy-keys-lib": "^6.1.1",
     "cozy-logger": "1.10.4",
     "cozy-minilog": "^3.3.1",
+    "cozy-pouch-link": "^54.0.0",
     "cozy-realtime": "^5.0.4",
     "cozy-stack-client": "^51.6.0",
     "cozy-tsconfig": "1.2.0",

src/components/AppHighlightAlert/AppHighlightAlertWrapper.jsx

@@ -2,34 +2,52 @@ import React, { useEffect, useState } from 'react'
 
 import { getAvailableAppHighlightAlerts } from 'components/AppHighlightAlert/helpers'
 import { useClient } from 'cozy-client'
+import log from 'cozy-logger'
 
 const AppHighlightAlertWrapper = ({ apps }) => {
   const [appHighlightAlerts, setAppHighlightAlerts] = useState([])
+  const [isAppHighlightAlertsError, setIsAppHighlightAlertsError] =
+    useState(false)
   const client = useClient()
 
   useEffect(() => {
     const getAppHighlightAlerts = async () => {
-      const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts(
-        client,
-        apps
-      )
-
-      setAppHighlightAlerts(availableAppHighlightAlerts)
+      try {
+        const availableAppHighlightAlerts =
+          await getAvailableAppHighlightAlerts(client, apps)
+
+        setAppHighlightAlerts(availableAppHighlightAlerts)
+      } catch (error) {
+        log('error', `App highlight error: ${error}`)
+        setIsAppHighlightAlertsError(true)
+      }
     }
 
-    if (apps && appHighlightAlerts.length === 0) {
+    if (apps && !isAppHighlightAlertsError && appHighlightAlerts.length === 0) {
       getAppHighlightAlerts()
     }
-  }, [client, apps, appHighlightAlerts.length])
+  }, [client, apps, isAppHighlightAlertsError, appHighlightAlerts.length])
 
-  useEffect(() => {
+  if (appHighlightAlerts && appHighlightAlerts?.length > 0) {
     appHighlightAlerts.forEach(component => {
-      if (component.displayed) {
-        component.onDisplayed()
-      } else {
-        component.onNotDisplayed()
+      if (component) {
+        component.displayed
+          ? component.onDisplayed()
+          : component.onNotDisplayed()
       }
     })
+  }
+
+  useEffect(() => {
+    if (appHighlightAlerts && appHighlightAlerts?.length > 0) {
+      appHighlightAlerts.forEach(component => {
+        if (component) {
+          component.displayed
+            ? component.onDisplayed()
+            : component.onNotDisplayed()
+        }
+      })
+    }
   }, [appHighlightAlerts])
 
   return (

src/components/AppWrapper.jsx

@@ -1,10 +1,15 @@
-import React, { createContext } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 import memoize from 'lodash/memoize'
 
 import flag from 'cozy-flags'
-import CozyClient, { CozyProvider, RealTimeQueries } from 'cozy-client'
+import CozyClient, {
+  CozyProvider,
+  RealTimeQueries,
+  WebFlagshipLink
+} from 'cozy-client'
 import CozyDevtools from 'cozy-devtools'
+import { useWebviewIntent } from 'cozy-intent'
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -14,7 +19,7 @@ import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import configureStore from 'store/configureStore'
 import { RealtimePlugin } from 'cozy-realtime'
-// import { isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp, isFlagshipOfflineSupported } from 'cozy-device-helper'
 
 import { DataProxyProvider } from 'cozy-dataproxy-lib'
 import { useWallpaperContext } from 'hooks/useWallpaperContext'
@@ -32,12 +37,19 @@ export const AppContext = createContext()
  *
  * Is memoized to avoid several clients in case of hot-reload
  */
-export const setupAppContext = memoize(() => {
+export const setupAppContext = memoize(intent => {
   const lang = document.documentElement.getAttribute('lang') || 'en'
   const context = window.context || 'cozy'
   const root = document.querySelector('[role=application]')
   const data = root.dataset
 
+  const shouldUseWebFlagshipLink =
+    isFlagshipApp() && isFlagshipOfflineSupported()
+
+  const links = shouldUseWebFlagshipLink
+    ? [new WebFlagshipLink({ webviewIntent: intent })]
+    : null
+
   // New improvements must be done with CozyClient
   const cozyClient = new CozyClient({
     uri: `${window.location.protocol}//${data.cozyDomain}`,
@@ -48,7 +60,8 @@ export const setupAppContext = memoize(() => {
       'home.store.persist'
     )
       ? true
-      : false
+      : false,
+    links
   })
 
   cozyClient.registerPlugin(flag.plugin)
@@ -103,7 +116,21 @@ const ThemeProvider = ({ children }) => {
  * for an app
  */
 const AppWrapper = ({ children }) => {
-  const appContext = setupAppContext()
+  const webviewIntent = useWebviewIntent()
+  const [appContext, setAppContext] = useState(undefined)
+
+  useEffect(() => {
+    if (isFlagshipApp() && !webviewIntent) return
+
+    const newAppContext = setupAppContext(webviewIntent)
+
+    setAppContext(newAppContext)
+  }, [webviewIntent])
+
+  if (!appContext) {
+    return null
+  }
+
   const { store, cozyClient, context, lang, persistor } = appContext
 
   return (

src/components/DefaultRedirectionSnackbar/DefaultRedirectionSnackbar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { useClient, useQuery } from 'cozy-client'
+import { useSettings } from 'cozy-client'
 import { useWebviewIntent } from 'cozy-intent'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -10,13 +10,12 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LightbulbIcon from 'cozy-ui/transpiled/react/Icons/Lightbulb'
 
-import { instanceSettingsConn, homeSettingsConn } from 'queries'
 import {
-  shouldShowDefaultRedirectionSnackbar,
-  disableDefaultRedirectionSnackbar,
-  setDefaultRedirectionToHome
-} from './helpers'
+  HOME_DEFAULT_REDIRECTION,
+  useShouldShowDefaultRedirectionSnackbar
+} from './useShouldShowDefaultRedirectionSnackbar'
 import useIncrementDefaultRedirectionViewCount from './useIncrementDefaultRedirectionViewCount'
+import { isFlagshipApp } from 'cozy-device-helper'
 
 const useStyles = makeStyles(theme => ({
   snackbar: {
@@ -29,39 +28,39 @@ const useStyles = makeStyles(theme => ({
 
 const DefaultAppSnackbar = () => {
   const { t } = useI18n()
-  const client = useClient()
   const classes = useStyles()
   const [isOpen, setIsOpen] = useState(true)
 
   const webviewIntent = useWebviewIntent()
 
-  const instanceSettingsResult = useQuery(
-    instanceSettingsConn.query,
-    instanceSettingsConn
-  )
+  const { save: saveHome } = useSettings('home', [
+    'default_redirection_snackbar_disabled'
+  ])
 
-  const homeSettingsResult = useQuery(homeSettingsConn.query, homeSettingsConn)
+  const { save: saveGlobal } = useSettings('instance', ['default_redirection'])
 
-  useIncrementDefaultRedirectionViewCount(
-    instanceSettingsResult,
-    homeSettingsResult
-  )
+  useIncrementDefaultRedirectionViewCount()
 
-  const showDefaultAppSnackbar = shouldShowDefaultRedirectionSnackbar(
-    instanceSettingsResult,
-    homeSettingsResult,
-    isOpen
-  )
+  const showDefaultAppSnackbar = useShouldShowDefaultRedirectionSnackbar(isOpen)
 
   const onRefuse = () => {
     setIsOpen(false)
-    disableDefaultRedirectionSnackbar(client, homeSettingsResult)
+    saveHome({
+      default_redirection_snackbar_disabled: true
+    })
   }
 
   const onAccept = () => {
     setIsOpen(false)
-    disableDefaultRedirectionSnackbar(client, homeSettingsResult)
-    setDefaultRedirectionToHome(client, instanceSettingsResult, webviewIntent)
+    saveHome({
+      default_redirection_snackbar_disabled: true
+    })
+    saveGlobal({
+      default_redirection: HOME_DEFAULT_REDIRECTION
+    })
+    if (isFlagshipApp()) {
+      webviewIntent.call('setDefaultRedirection', HOME_DEFAULT_REDIRECTION)
+    }
   }
 
   return (

src/components/DefaultRedirectionSnackbar/DefaultRedirectionSnackbar.spec.jsx

@@ -1,22 +1,21 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
+import { useSettings } from 'cozy-client'
+
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import AppLike from 'test/AppLike'
 import DefaultRedirectionSnackbar from './DefaultRedirectionSnackbar'
-import {
-  shouldShowDefaultRedirectionSnackbar,
-  disableDefaultRedirectionSnackbar,
-  setDefaultRedirectionToHome
-} from './helpers'
+import { useShouldShowDefaultRedirectionSnackbar } from './useShouldShowDefaultRedirectionSnackbar'
 
 jest.mock('cozy-client', () => ({
   ...jest.requireActual('cozy-client'),
   useQuery: jest.fn(),
-  useClient: jest.fn()
+  useClient: jest.fn(),
+  useSettings: jest.fn()
 }))
-jest.mock('./helpers')
+jest.mock('./useShouldShowDefaultRedirectionSnackbar')
 jest.mock('./useIncrementDefaultRedirectionViewCount')
 
 const setup = () => {
@@ -36,7 +35,26 @@ describe('DefaultRedirectionSnackbar', () => {
   })
 
   it('should display default redirection snackbar', () => {
-    shouldShowDefaultRedirectionSnackbar.mockReturnValue(true)
+    useShouldShowDefaultRedirectionSnackbar.mockReturnValue(true)
+    const mockSaveInstance = jest.fn()
+    const mockSaveHome = jest.fn()
+    useSettings.mockImplementation((...args) => {
+      if (args[0] === 'instance') {
+        return {
+          values: {
+            default_redirection: 'drive/#/folder'
+          },
+          save: mockSaveInstance
+        }
+      } else if (args[0] === 'home') {
+        return {
+          values: {
+            default_redirection_view_count: 4
+          },
+          save: mockSaveHome
+        }
+      }
+    })
 
     const { root } = setup()
 
@@ -45,24 +63,70 @@ describe('DefaultRedirectionSnackbar', () => {
   })
 
   it('should disable default redirection snackbar and set default redirection to home when accepting', () => {
-    shouldShowDefaultRedirectionSnackbar.mockReturnValue(true)
+    useShouldShowDefaultRedirectionSnackbar.mockReturnValue(true)
+
+    const mockSaveInstance = jest.fn()
+    const mockSaveHome = jest.fn()
+    useSettings.mockImplementation((...args) => {
+      if (args[0] === 'instance') {
+        return {
+          values: {
+            default_redirection: 'drive/#/folder'
+          },
+          save: mockSaveInstance
+        }
+      } else if (args[0] === 'home') {
+        return {
+          values: {
+            default_redirection_view_count: 4
+          },
+          save: mockSaveHome
+        }
+      }
+    })
 
     const { root } = setup()
 
     fireEvent.click(root.queryByText('OK'))
 
-    expect(disableDefaultRedirectionSnackbar).toHaveBeenCalled()
-    expect(setDefaultRedirectionToHome).toHaveBeenCalled()
+    expect(mockSaveInstance).toHaveBeenCalledWith({
+      default_redirection: 'home/'
+    })
+    expect(mockSaveHome).toHaveBeenCalledWith({
+      default_redirection_snackbar_disabled: true
+    })
   })
 
   it('should disable default redirection snackbar when refusing', () => {
-    shouldShowDefaultRedirectionSnackbar.mockReturnValue(true)
+    useShouldShowDefaultRedirectionSnackbar.mockReturnValue(true)
+
+    const mockSaveInstance = jest.fn()
+    const mockSaveHome = jest.fn()
+    useSettings.mockImplementation((...args) => {
+      if (args[0] === 'instance') {
+        return {
+          values: {
+            default_redirection: 'drive/#/folder'
+          },
+          save: mockSaveInstance
+        }
+      } else if (args[0] === 'home') {
+        return {
+          values: {
+            default_redirection_view_count: 4
+          },
+          save: mockSaveHome
+        }
+      }
+    })
 
     const { root } = setup()
 
     fireEvent.click(root.queryByText('No, thank you'))
 
-    expect(disableDefaultRedirectionSnackbar).toHaveBeenCalled()
-    expect(setDefaultRedirectionToHome).not.toHaveBeenCalled()
+    expect(mockSaveHome).toHaveBeenCalledWith({
+      default_redirection_snackbar_disabled: true
+    })
+    expect(mockSaveInstance).not.toHaveBeenCalled()
   })
 })