feat: Handle offline mode in Flagship app

We want mespapiers to be compatible with the new Flagship app's Offline mode When hosted in a Flagship app's WebView we now want to use FlagshipLink instead of StackLink in cozy-client This link will allow to redirect all queries to the Flagship app that will handle data access when offline but also when online Related PR: cozy/cozy-client#1507 Related PR: cozy/cozy-flagship-app#1239
cozy · Sep 13, 2024 · 5703fb2 · 5703fb2
1 parent 58d6bd7
commit 5703fb2
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 51 deletions.
diff --git a/src/components/AppProviders.jsx b/src/components/AppProviders.jsx
@@ -14,7 +14,6 @@ import { launchMetadataMigrationJob } from 'src/helpers/migration/metadata'
 
 import { BarProvider } from 'cozy-bar'
 import { CozyProvider } from 'cozy-client'
-import { WebviewIntentProvider } from 'cozy-intent'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
@@ -45,43 +44,41 @@ export const AppProviders = ({ client, lang, polyglot, children }) => {
 
   return (
     <ErrorProvider>
-      <WebviewIntentProvider>
-        <StylesProvider generateClassName={generateClassName}>
-          <CozyProvider client={client}>
-            <I18n lang={lang} polyglot={polyglot}>
-              <CozyTheme>
-                <BreakpointsProvider>
-                  <BarProvider>
-                    <PapersCreatedProvider>
-                      <AlertProvider>
-                        <PaywallProvider>
-                          <ScannerI18nProvider>
-                            <FileSharingProvider>
-                              <SearchProvider
-                                doctypes={[FILES_DOCTYPE, CONTACTS_DOCTYPE]}
-                              >
-                                <PapersDefinitionsProvider>
-                                  <ModalProvider>
-                                    <CreatePaperDataBackupProvider>
-                                      <MultiSelectionProvider>
-                                        {children}
-                                      </MultiSelectionProvider>
-                                    </CreatePaperDataBackupProvider>
-                                  </ModalProvider>
-                                </PapersDefinitionsProvider>
-                              </SearchProvider>
-                            </FileSharingProvider>
-                          </ScannerI18nProvider>
-                        </PaywallProvider>
-                      </AlertProvider>
-                    </PapersCreatedProvider>
-                  </BarProvider>
-                </BreakpointsProvider>
-              </CozyTheme>
-            </I18n>
-          </CozyProvider>
-        </StylesProvider>
-      </WebviewIntentProvider>
+      <StylesProvider generateClassName={generateClassName}>
+        <CozyProvider client={client}>
+          <I18n lang={lang} polyglot={polyglot}>
+            <CozyTheme>
+              <BreakpointsProvider>
+                <BarProvider>
+                  <PapersCreatedProvider>
+                    <AlertProvider>
+                      <PaywallProvider>
+                        <ScannerI18nProvider>
+                          <FileSharingProvider>
+                            <SearchProvider
+                              doctypes={[FILES_DOCTYPE, CONTACTS_DOCTYPE]}
+                            >
+                              <PapersDefinitionsProvider>
+                                <ModalProvider>
+                                  <CreatePaperDataBackupProvider>
+                                    <MultiSelectionProvider>
+                                      {children}
+                                    </MultiSelectionProvider>
+                                  </CreatePaperDataBackupProvider>
+                                </ModalProvider>
+                              </PapersDefinitionsProvider>
+                            </SearchProvider>
+                          </FileSharingProvider>
+                        </ScannerI18nProvider>
+                      </PaywallProvider>
+                    </AlertProvider>
+                  </PapersCreatedProvider>
+                </BarProvider>
+              </BreakpointsProvider>
+            </CozyTheme>
+          </I18n>
+        </CozyProvider>
+      </StylesProvider>
     </ErrorProvider>
   )
 }
diff --git a/src/components/AppRouter.jsx b/src/components/AppRouter.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   Navigate,
   Outlet,
@@ -24,6 +24,10 @@ import InformationEdit from 'src/components/Views/InformationEdit'
 import MultiselectView from 'src/components/Views/MultiselectView'
 import ConditionnalPapersList from 'src/components/Views/PapersList'
 import PlaceholdersSelector from 'src/components/Views/PlaceholdersSelector'
+import { makeClient } from 'src/targets/browser/makeClient'
+
+import { isFlagshipApp } from 'cozy-device-helper'
+import { useWebviewIntent, WebviewIntentProvider } from 'cozy-intent'
 
 const fileViewerRoutes = props => [
   {
@@ -165,7 +169,32 @@ const makeRoutes = props => [
 ]
 
 export const AppRouter = props => {
-  const router = createHashRouter(makeRoutes(props))
+  return (
+    <WebviewIntentProvider>
+      <AppSubRouter {...props} />
+    </WebviewIntentProvider>
+  )
+}
+
+export const AppSubRouter = props => {
+  const webviewIntent = useWebviewIntent()
+  const [client, setClient] = useState(undefined)
+
+  useEffect(() => {
+    if (isFlagshipApp() && !webviewIntent) return
+
+    const client = makeClient(webviewIntent)
+
+    setClient(client)
+  }, [webviewIntent])
+
+  if (!client) {
+    return null
+  }
+
+  const propsWithClient = { ...props, client }
+
+  const router = createHashRouter(makeRoutes(propsWithClient))
 
   return <RouterProvider router={router} />
 }
diff --git a/src/components/ModelSteps/Scan/ScanActions/ScanDesktopActions.jsx b/src/components/ModelSteps/Scan/ScanActions/ScanDesktopActions.jsx
@@ -38,7 +38,7 @@ const ScanDesktopActions = ({ onOpenFilePickerModal, onChangeFile }) => {
   const showAlert = flag('mespapiers.aa-suggestion.disabled')
     ? false
     : isLoadedSettings
-    ? settingsData[0].showScanDesktopActionsAlert ?? true
+    ? settingsData[0]?.showScanDesktopActionsAlert ?? true
     : true
 
   const handleKeyDown = ({ key }) => {

diff --git a/src/targets/browser/makeClient.js b/src/targets/browser/makeClient.js
@@ -1,20 +1,25 @@
 import schema from 'src/doctypes'
 
-import CozyClient from 'cozy-client'
+import CozyClient, { FlagshipLink } from 'cozy-client'
+import { isFlagshipApp, isFlagshipOfflineSupported } from 'cozy-device-helper'
+import flag from 'cozy-flags'
 import { Intents } from 'cozy-interapp'
+import { RealtimePlugin } from 'cozy-realtime'
 
 import manifest from '../../../manifest.webapp'
 
 /**
  * Make and returns cozy client instance
  * @returns {import('cozy-client/types/CozyClient').default} cozy client instance
  */
-export const makeClient = () => {
+export const makeClient = intent => {
   const root = document.querySelector('[role=application]')
   const data = JSON.parse(root.dataset.cozy)
   const protocol = window.location.protocol
   const cozyUrl = `${protocol}//${data.domain}`
 
+  const shouldUseFlagshipLink = isFlagshipApp() && isFlagshipOfflineSupported()
+
   const client = new CozyClient({
     uri: cozyUrl,
     token: data.token,
@@ -23,11 +28,17 @@ export const makeClient = () => {
       version: manifest.version
     },
     schema,
-    store: true
+    store: true,
+    links: shouldUseFlagshipLink
+      ? new FlagshipLink({ webviewIntent: intent })
+      : null
   })
 
   const intents = new Intents({ client })
   client.intents = intents
 
+  client.registerPlugin(RealtimePlugin)
+  client.registerPlugin(flag.plugin)
+
   return client
 }
diff --git a/src/targets/browser/setupApp.jsx b/src/targets/browser/setupApp.jsx
@@ -1,10 +1,7 @@
 import { CaptureConsole } from '@sentry/integrations'
 import * as Sentry from '@sentry/react'
 import memoize from 'lodash/memoize'
-import { makeClient } from 'src/targets/browser/makeClient'
 
-import flag from 'cozy-flags'
-import { RealtimePlugin } from 'cozy-realtime'
 import { initTranslation } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import manifest from '../../../manifest.webapp'
@@ -20,9 +17,6 @@ const setupApp = memoize(() => {
   const locale = JSON.parse(root.dataset.cozy)?.locale
   const lang = getDataOrDefault(locale, 'en')
   const polyglot = initTranslation(lang, lang => require(`locales/${lang}`))
-  const client = makeClient()
-  client.registerPlugin(RealtimePlugin)
-  client.registerPlugin(flag.plugin)
 
   Sentry.init({
     dsn: 'https://[email protected]/63',
@@ -37,7 +31,7 @@ const setupApp = memoize(() => {
     ignoreErrors: [/^Warning: /]
   })
 
-  return { root, client, lang, polyglot }
+  return { root, lang, polyglot }
 })
 
 export default setupApp