From 9a796c6736bd778ed4f8d59398a1fb0d10a65147 Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Wed, 19 Jun 2024 17:04:31 +0200 Subject: [PATCH] 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 --- src/components/AppProviders.jsx | 73 +++++++++---------- src/components/AppRouter.jsx | 33 ++++++++- .../Scan/ScanActions/ScanDesktopActions.jsx | 2 +- src/targets/browser/makeClient.js | 17 ++++- src/targets/browser/setupApp.jsx | 8 +- 5 files changed, 82 insertions(+), 51 deletions(-) diff --git a/src/components/AppProviders.jsx b/src/components/AppProviders.jsx index 69d71112..8ff4d7b0 100644 --- 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 ( - - - - - - - - - - - - - - - - - - {children} - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + {children} + + + + + + + + + + + + + + + + ) } diff --git a/src/components/AppRouter.jsx b/src/components/AppRouter.jsx index ef5a5792..25d595b9 100644 --- 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 ( + + + + ) +} + +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 } diff --git a/src/components/ModelSteps/Scan/ScanActions/ScanDesktopActions.jsx b/src/components/ModelSteps/Scan/ScanActions/ScanDesktopActions.jsx index 9fabc05a..4a91a51a 100644 --- 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 index 6fe83e85..a5dbbe6d 100644 --- a/src/targets/browser/makeClient.js +++ b/src/targets/browser/makeClient.js @@ -1,7 +1,10 @@ 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' @@ -9,12 +12,14 @@ 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 index b771ef94..6d1fd850 100644 --- 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://1b0c26c4c1474da4b7fb5fa9d1e57869@errors.cozycloud.cc/63', @@ -37,7 +31,7 @@ const setupApp = memoize(() => { ignoreErrors: [/^Warning: /] }) - return { root, client, lang, polyglot } + return { root, lang, polyglot } }) export default setupApp