feat: split ecolyo and cozy store

src/components/App.tsx

+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 import { hot } from 'react-hot-loader'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import { ecolyoReducer } from 'store'
 import { RecoilRoot } from 'recoil'
 import { HashRouter } from 'react-router-dom'
 import { createBrowserHistory } from 'history'
@@ -14,22 +19,26 @@ import SplashScreenError from 'components/Splash/SplashScreenError'
 export const history = createBrowserHistory()
 
 export const App = () => {
+  const store = createStore(ecolyoReducer, composeWithDevTools())
+
   return (
     <HashRouter {...history}>
       <Layout>
-        <RecoilRoot>
-          <SplashRoot
-            splashComponent={SplashScreen}
-            splashErrorComponent={SplashScreenError}
-          >
-            <Navbar />
-            <Main>
-              <Content className="app-content">
-                <Routes />
-              </Content>
-            </Main>
-          </SplashRoot>
-        </RecoilRoot>
+        <Provider store={store as any}>
+          <RecoilRoot>
+            <SplashRoot
+              splashComponent={SplashScreen}
+              splashErrorComponent={SplashScreenError}
+            >
+              <Navbar />
+              <Main>
+                <Content className="app-content">
+                  <Routes />
+                </Content>
+              </Main>
+            </SplashRoot>
+          </RecoilRoot>
+        </Provider>
       </Layout>
     </HashRouter>
   )

src/components/Splash/SplashRoot.tsx

@@ -51,7 +51,7 @@ const SplashRoot = ({
     async function loadData() {
       try {
         // Init index
-        // await initializationService.initIndex()
+        await initializationService.initIndex()
         // Init profile and update ecogestures, seasons, report
         let profile = await initializationService.initProfile()
         if (subscribed && profile) {

src/cozy-client.d.ts

@@ -8,7 +8,7 @@ declare module 'cozy-client' {
    * @typedef {object} HydratedDocument
    */
 
-  export const CozyProvider: React.FC<{ client: Client; store: any }>
+  export const CozyProvider: React.FC<{ client: Client; store?: any }>
 
   export function useClient(): Client
   export function Q(doctype: TDoctype): QueryDefinition

src/services/initialization.service.spec.ts

@@ -4,10 +4,8 @@ import { FluidStatus, Profile } from 'models'
 import InitializationService from './initialization.service'
 import mockClient from '../../test/__mocks__/client'
 import { ecogesturesData } from '../../test/__mocks__/ecogesturesData.mock'
-import { challengesTypeData } from '../../test/__mocks__/challengesTypeData.mock'
 import { profileData } from '../../test/__mocks__/profile.mock'
 import { fluidStatusData } from '../../test/__mocks__/fluidStatusData.mock'
-import challengeTypeData from 'db/challengeTypeData.json'
 import ecogestureData from 'db/ecogestureData.json'
 
 import { hashFile } from 'utils/hash'

src/services/initialization.service.ts

@@ -105,7 +105,7 @@ export default class InitializationService {
               $lte: 23,
             },
             minute: {
-              $let: 30,
+              $lte: 30,
             },
           }
         default:

src/store/index.ts

-import { GlobalState, ModalState, Profile } from 'models'
+import { combineReducers } from 'redux'
 import { globalReducer } from 'store/global/global.reducer'
 import { profileReducer } from './profile/profile.reducer'
 import { modalReducer } from 'store/modal/modal.reducer'
 
-export interface EcolyoState {
-  global: GlobalState
-  profile: Profile
-  modal: ModalState
-}
-
-export const ecolyoReducer = {
+export const ecolyoReducer = combineReducers({
   global: globalReducer,
   profile: profileReducer,
   modal: modalReducer,
-}
+})
+
+export type EcolyoState = ReturnType<typeof ecolyoReducer>

src/targets/browser/index.tsx

+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* global cozy */
 import '../../styles/index.scss'
@@ -5,28 +6,22 @@ import '../../styles/index.scss'
 import React from 'react'
 import ReactDOM, { render } from 'react-dom'
 import CozyClient, { CozyProvider, Client } from 'cozy-client'
-import { combineReducers, createStore } from 'redux'
-import { Provider } from 'react-redux'
-import { composeWithDevTools } from 'redux-devtools-extension'
 import { Document } from 'cozy-doctypes'
 import { I18n, initTranslation } from 'cozy-ui/transpiled/react/I18n'
 import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
 import schema from 'doctypes'
-import { ecolyoReducer } from 'store'
 
 const manifest = require('../../../manifest.webapp')
 
-const renderApp = (polyglot: any, lang: string, client: Client, store: any) => {
+const renderApp = (polyglot: any, lang: string, client: Client) => {
   if (handleOAuthResponse()) return
   const App = require('components/App').default
   render(
-    <Provider store={store}>
-      <CozyProvider client={client} store={store}>
-        <I18n lang={lang} polyglot={polyglot}>
-          <App />
-        </I18n>
-      </CozyProvider>
-    </Provider>,
+    <CozyProvider client={client}>
+      <I18n lang={lang} polyglot={polyglot}>
+        <App />
+      </I18n>
+    </CozyProvider>,
     document.querySelector('[role=application]')
   )
 }
@@ -82,33 +77,23 @@ const initApp = () => {
     Document.registerClient(client)
   }
 
-  const store = createStore(
-    combineReducers({
-      ...ecolyoReducer,
-      cozy: client.reducer(),
-    }),
-    composeWithDevTools()
-  )
-
   // necessary to initialize the bar with the correct React instance
   window.React = React
   window.ReactDOM = ReactDOM
-  // This timeout fix the problem for setStore (param store in CozyProvider), why ? why not
-  setTimeout(() => {
-    cozy.bar.init({
-      appName,
-      appNamePrefix,
-      iconPath,
-      lang,
-      replaceTitleOnMobile: true,
-      cozyClient: client,
-    })
 
-    const { setTheme } = cozy.bar
-    setTheme('primary', { primaryColor: 'transparent' })
-  }, 0)
+  cozy.bar.init({
+    appName,
+    appNamePrefix,
+    iconPath,
+    lang,
+    replaceTitleOnMobile: true,
+    cozyClient: client,
+  })
+
+  const { setTheme } = cozy.bar
+  setTheme('primary', { primaryColor: 'transparent' })
 
-  renderApp(polyglot, lang, client, store)
+  renderApp(polyglot, lang, client)
 }
 
 // initial rendering of the application