feat: Use the hook useWebviewIntent instead setWebviewContext

As we added the Bar into the react tree we can use the provider from it

BREAKING CHANGE : The BarComponent need to wrap into an WebviewIntentProvider from cozy-intent

src/components/Apps/ButtonCozyHome.jsx

@@ -3,19 +3,18 @@ import PropTypes from 'prop-types'
 
 import flag from 'cozy-flags'
 import { isFlagshipApp } from 'cozy-device-helper'
+import { useWebviewIntent } from 'cozy-intent'
 
 import IconCozyHome from './IconCozyHome'
 
-export const ButtonCozyHome = ({
-  webviewContext,
-  homeHref,
-  isInvertedTheme
-}) => {
+export const ButtonCozyHome = ({ homeHref, isInvertedTheme }) => {
+  const webviewIntent = useWebviewIntent()
+
   if (isFlagshipApp() || flag('flagship.debug'))
     return (
       <a
         onClick={() => {
-          webviewContext.call('backToHome')
+          webviewIntent.call('backToHome')
         }}
         className="coz-nav-apps-btns-home --is-flagship"
       >
@@ -48,7 +47,6 @@ export const ButtonCozyHome = ({
 }
 
 ButtonCozyHome.propTypes = {
-  webviewContext: PropTypes.object,
   homeHref: PropTypes.string,
   isInvertedTheme: PropTypes.bool
 }

src/components/Apps/ButtonCozyHome.spec.jsx

@@ -2,14 +2,15 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import { ButtonCozyHome } from './ButtonCozyHome'
 import { isFlagshipApp } from 'cozy-device-helper'
+import { useWebviewIntent } from 'cozy-intent'
 
 jest.mock('cozy-device-helper')
+jest.mock('cozy-intent', () => ({
+  useWebviewIntent: jest.fn(() => ({ call: jest.fn() }))
+}))
 
 const homeHref = 'foo'
 const expectedCall = 'backToHome'
-const webviewContext = {
-  call: jest.fn()
-}
 
 describe('ButtonCozyHome', () => {
   it('should render a span with no props', () => {
@@ -31,30 +32,28 @@ describe('ButtonCozyHome', () => {
 
   it('should render an anchor when isFlagshipApp', () => {
     isFlagshipApp.mockImplementation(() => true)
-    const render = shallow(<ButtonCozyHome webviewContext={webviewContext} />)
+    const render = shallow(<ButtonCozyHome />)
     const element = render.getElement()
 
     expect(element.type).toBe('a')
   })
 
   it('should give priority to anchor if both isFlagshipApp and homeHref are present', () => {
     isFlagshipApp.mockImplementation(() => true)
-    const render = shallow(
-      <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
-    )
+    const render = shallow(<ButtonCozyHome homeHref={homeHref} />)
     const element = render.getElement()
 
     expect(element.type).toBe('a')
   })
 
   it('should call the correct context method on click', () => {
     isFlagshipApp.mockImplementation(() => true)
-    const render = shallow(
-      <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
-    )
+    const mockCall = jest.fn()
+    useWebviewIntent.mockImplementation(() => ({ call: mockCall }))
+    const render = shallow(<ButtonCozyHome homeHref={homeHref} />)
 
     render.simulate('click')
 
-    expect(webviewContext.call).toBeCalledWith(expectedCall)
+    expect(mockCall).toBeCalledWith(expectedCall)
   })
 })

src/components/Bar.jsx

@@ -16,8 +16,7 @@ import {
   hasFetched,
   fetchApps,
   fetchContext,
-  fetchSettingsData,
-  getWebviewContext
+  fetchSettingsData
 } from 'lib/reducers'
 import useI18n from 'components/useI18n'
 import { useClient } from 'cozy-client'
@@ -49,7 +48,6 @@ export const Bar = ({
   onLogOut,
   userActionRequired,
   isInvertedTheme,
-  webviewContext,
   appName,
   appNamePrefix,
   appSlug,
@@ -110,12 +108,7 @@ export const Bar = ({
 
   const renderLeft = () => {
     if (isFlagshipApp() || flag('flagship.debug')) {
-      return (
-        <ButtonCozyHome
-          webviewContext={webviewContext}
-          isInvertedTheme={isInvertedTheme}
-        />
-      )
+      return <ButtonCozyHome isInvertedTheme={isInvertedTheme} />
     }
 
     // data-tutorial attribute allows to be targeted in an application tutorial
@@ -188,8 +181,7 @@ Bar.propTypes = {
 export const mapStateToProps = state => ({
   theme: getTheme(state).name,
   themeOverrides: getTheme(state).overrides,
-  hasFetchedApps: hasFetched(state),
-  webviewContext: getWebviewContext(state)
+  hasFetchedApps: hasFetched(state)
 })
 
 export const mapDispatchToProps = dispatch => ({

src/lib/reducers/index.js

@@ -1,6 +1,5 @@
 import { combineReducers } from 'redux'
 import * as theme from 'lib/reducers/theme'
-import * as unserializable from 'lib/reducers/unserializable'
 import appsReducer, * as apps from 'lib/reducers/apps'
 import settingsReducer, * as settings from 'lib/reducers/settings'
 import contextReducer, * as context from 'lib/reducers/context'
@@ -12,15 +11,13 @@ const proxy = (attr, method) => {
 }
 
 const setTheme = theme.setTheme
-const setWebviewContext = unserializable.setWebviewContext
 const fetchApps = apps.fetchApps
 const setInfos = apps.setInfos
 const fetchSettingsData = settings.fetchSettingsData
 const logOut = settings.logOut
 const fetchContext = context.fetchContext
 export {
   setTheme,
-  setWebviewContext,
   fetchApps,
   setInfos,
   fetchSettingsData,
@@ -39,10 +36,6 @@ export const getSettingsAppURL = proxy('settings', settings.getSettingsAppURL)
 export const isSettingsBusy = proxy('settings', settings.isSettingsBusy)
 export const isFetchingSettings = proxy('settings', settings.isFetchingSettings)
 export const getHelpLink = proxy('context', context.getHelpLink)
-export const getWebviewContext = proxy(
-  'unserializable',
-  unserializable.getWebviewContext
-)
 
 // realtime handlers
 export const onRealtimeCreate = apps.receiveApp
@@ -52,8 +45,7 @@ export const reducers = {
   apps: appsReducer,
   context: contextReducer,
   settings: settingsReducer,
-  theme: theme.reducer,
-  unserializable: unserializable.reducer
+  theme: theme.reducer
 }
 
 export default combineReducers(reducers)