From a15719f09ddbac6c881127ada9336d465c246fde Mon Sep 17 00:00:00 2001 From: Crash-- Date: Thu, 25 Aug 2022 16:28:28 +0200 Subject: [PATCH] feat: Add persisted store feature This is a test of the new cozy-client api in order to have a background fetching. It seems to work nicely! I need to enable this feature for the flagship app. I'll see also, what we can do for the UX --- package.json | 3 +- src/targets/browser/configureStore.js | 21 ++++++++++++ src/targets/browser/index.jsx | 47 ++++++++++++++++----------- yarn.lock | 41 +++++++++++++---------- 4 files changed, 74 insertions(+), 38 deletions(-) create mode 100644 src/targets/browser/configureStore.js diff --git a/package.json b/package.json index 22c94364..878b80e2 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@material-ui/styles": "4.11.4", "classnames": "2.3.1", "cozy-bar": "7.19.1", - "cozy-client": "^32.5.0", + "cozy-client": "33.0.0", "cozy-device-helper": "^2.2.1", "cozy-doctypes": "1.85.0", "cozy-editor-core": "134.0.3", @@ -79,6 +79,7 @@ "react-dom": "18.2.0", "react-intl": "2.9.0", "react-router-dom": "6.3.0", + "redux-persist": "^6.0.0", "rxjs": "5.5.12", "styled-components": "3.4.10", "url-search-params-polyfill": "7.0.1", diff --git a/src/targets/browser/configureStore.js b/src/targets/browser/configureStore.js new file mode 100644 index 00000000..cc077317 --- /dev/null +++ b/src/targets/browser/configureStore.js @@ -0,0 +1,21 @@ +/** global __DEVELOPMENT__ **/ +import { createStore, combineReducers } from 'redux' +import storage from 'redux-persist/lib/storage' // defaults to localStorage for web +import { persistStore, persistReducer } from 'redux-persist' + +const configureStore = client => { + const persistConfig = { + key: 'root', + storage + } + const rootReducer = combineReducers({ + cozy: client.reducer() + }) + const persistedReducer = persistReducer(persistConfig, rootReducer) + const store = createStore(persistedReducer) + const persistor = persistStore(store) + + return { store, persistor } +} + +export default configureStore diff --git a/src/targets/browser/index.jsx b/src/targets/browser/index.jsx index 6ed64719..94c3eba0 100644 --- a/src/targets/browser/index.jsx +++ b/src/targets/browser/index.jsx @@ -13,6 +13,7 @@ import { createGenerateClassName } from '@material-ui/core/styles' import { fr, en } from '@atlaskit/editor-core/i18n' +import { PersistGate } from 'redux-persist/integration/react' import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme' import CozyClient, { CozyProvider } from 'cozy-client' @@ -28,6 +29,7 @@ import { getDataOrDefault, getPublicSharecode } from 'lib/initFromDom' +import configureStore from './configureStore' const manifest = require('../../../manifest.webapp') @@ -55,7 +57,7 @@ const generateClassName = createGenerateClassName({ disableGlobal: true }) -const renderApp = function(appLocale, client, isPublic) { +const renderApp = function(appLocale, client, isPublic, persistor) { const App = require('components/app').default const container = document.querySelector('[role=application]') @@ -73,20 +75,22 @@ const renderApp = function(appLocale, client, isPublic) { messages={locales[appLocale].atlaskit} > - - - {!isPublic && ( - - - - )} - {isPublic && } - - + + + + {!isPublic && ( + + + + )} + {isPublic && } + + + @@ -131,12 +135,17 @@ export const initApp = () => { appMetadata: { slug: appSlug, version: appVersion - } + }, + store: false, + backgroundFetching: true }) + if (!Document.cozyClient) { Document.registerClient(client) } client.registerPlugin(RealtimePlugin) + const { store, persistor } = configureStore(client) + client.setStore(store) if (!isPublic) { // initialize the bar, common of all applications, it allows @@ -155,13 +164,13 @@ export const initApp = () => { isPublic: isPublic }) } - return { appLocale, client, isPublic } + return { appLocale, client, isPublic, persistor } } const memoizedInit = memoize(initApp) const init = () => { - const { appLocale, client, isPublic } = memoizedInit() - renderApp(appLocale, client, isPublic) + const { appLocale, client, isPublic, persistor } = memoizedInit() + renderApp(appLocale, client, isPublic, persistor) } document.addEventListener('DOMContentLoaded', init) diff --git a/yarn.lock b/yarn.lock index 34484d16..bdcf8fb2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7309,19 +7309,16 @@ cozy-bi-auth@0.0.24: lodash "^4.17.20" node-jose "^1.1.4" -cozy-client@^27.14.4: - version "27.15.0" - resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-27.15.0.tgz#7ec2e4ad9a8fdfd9f3998583461d1e34c340c725" - integrity sha512-s4Vqc0FPEnsuD2gqpvzAyItAVXGERVyqAV/H1N1tOGN0rt27HxYycO6aBQz9uHPfoLhzZ/vw0xjrSUsC2tIoEA== +cozy-client@33.0.0: + version "33.0.0" + resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-33.0.0.tgz#0711096ce281c9ebfe017a95475ceacf7879dd2e" + integrity sha512-RXzjoii+3/ri99EJTJF+ogEvYKW7qQ2VPcmMS5q1UCBOqziXGnDxND/DbHPX6wZaOynSBfJ/iyBIqhlmEi469w== dependencies: "@cozy/minilog" "1.0.0" "@types/jest" "^26.0.20" "@types/lodash" "^4.14.170" btoa "^1.2.1" - cozy-device-helper "^1.12.0" - cozy-flags "2.7.1" - cozy-logger "^1.6.0" - cozy-stack-client "^27.15.0" + cozy-stack-client "^33.0.0" json-stable-stringify "^1.0.1" lodash "^4.17.13" microee "^0.0.6" @@ -7336,16 +7333,19 @@ cozy-client@^27.14.4: sift "^6.0.0" url-search-params-polyfill "^8.0.0" -cozy-client@^32.5.0: - version "32.5.0" - resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-32.5.0.tgz#ae92bc8e0a29325aaa6bbe1d516e8da63eb3fa09" - integrity sha512-a+6eM9y1pmO8Hzjg7EThBqM0MlQoSI41l7/QL6XQgUAZG9zJanb+uOqDE52eY1b00SrwYZURZgESI3/NSG59EA== +cozy-client@^27.14.4: + version "27.15.0" + resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-27.15.0.tgz#7ec2e4ad9a8fdfd9f3998583461d1e34c340c725" + integrity sha512-s4Vqc0FPEnsuD2gqpvzAyItAVXGERVyqAV/H1N1tOGN0rt27HxYycO6aBQz9uHPfoLhzZ/vw0xjrSUsC2tIoEA== dependencies: "@cozy/minilog" "1.0.0" "@types/jest" "^26.0.20" "@types/lodash" "^4.14.170" btoa "^1.2.1" - cozy-stack-client "^32.3.3" + cozy-device-helper "^1.12.0" + cozy-flags "2.7.1" + cozy-logger "^1.6.0" + cozy-stack-client "^27.15.0" json-stable-stringify "^1.0.1" lodash "^4.17.13" microee "^0.0.6" @@ -7707,10 +7707,10 @@ cozy-stack-client@^27.15.0: mime "^2.4.0" qs "^6.7.0" -cozy-stack-client@^32.3.3: - version "32.3.3" - resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-32.3.3.tgz#4afa61b60f2c57a1862d2d81799f0f1bcdce6b15" - integrity sha512-LsoRT4J+S4uQcXU1U4gFqWZ3pjFK5NZoFNYdFlo8sNIiUj3gN0UIKHyDV64xo4422WTwX9YEuSjlOL0W7hH/dg== +cozy-stack-client@^33.0.0: + version "33.0.0" + resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-33.0.0.tgz#cd65a0aa82e773653b6e03392508f30792fea2b2" + integrity sha512-SqEhtJXuSDsCeC2goHibozX3c2HzoV/vfnp2J10XORMFcvzfx7pfYuwH5XQrRMtAzhERqqn7UNPjPzb/Yo6ljw== dependencies: detect-node "^2.0.4" mime "^2.4.0" @@ -15408,7 +15408,7 @@ raf-schd@^4.0.2: resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== -raf@^3.4.0: +raf@^3.4.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -16075,6 +16075,11 @@ redux-persist@5.10.0: resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b" integrity sha512-sSJAzNq7zka3qVHKce1hbvqf0Vf5DuTVm7dr4GtsqQVOexnrvbV47RWFiPxQ8fscnyiuWyD2O92DOxPl0tGCRg== +redux-persist@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8" + integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ== + redux-thunk@2.3.0, redux-thunk@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"