From dc0b9c4618afdf3188c6a350423e318501cb566f Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 14 Nov 2018 17:24:08 +0100 Subject: [PATCH] feat: Re-fetch apps if app not loaded and drawer opens --- src/components/Bar.jsx | 62 +++++++++++++++++++++++++----------- test/components/Bar.spec.jsx | 52 ++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 19 deletions(-) create mode 100644 test/components/Bar.spec.jsx diff --git a/src/components/Bar.jsx b/src/components/Bar.jsx index db63a6b63..01c80c289 100644 --- a/src/components/Bar.jsx +++ b/src/components/Bar.jsx @@ -19,6 +19,7 @@ import SearchBar from 'components/SearchBar' import Claudy from 'components/Claudy' import SupportModal from 'components/SupportModal' import { + hasFetched, getContent, getCurrentApp, fetchApps, @@ -38,29 +39,47 @@ class Bar extends Component { supportDisplayed: false, searchBarEnabled: props.currentApp === 'Cozy Drive' && !props.isPublic } - if (!props.isPublic) { - props.fetchContext() - props.fetchSettingsData(false) - props.fetchApps() - } } componentDidMount() { - // if tracking enabled, init the piwik tracker if (shouldEnableTracking()) { - const trackerInstance = getTracker( - __PIWIK_TRACKER_URL__, - __PIWIK_SITEID__, - false, - false - ) - configureTracker({ - appDimensionId: __PIWIK_DIMENSION_ID_APP__, - app: 'Cozy Bar', - heartbeat: 0 - }) - this.setState({ usageTracker: trackerInstance }) + this.initPiwikTracker() + } + this.fetchInitialData() + } + + componentDidUpdate(prevProps, prevState) { + if ( + !this.props.hasFetchedApps && + this.state.drawerVisible && + prevState.drawerVisible !== this.state.drawerVisible + ) { + this.props.fetchApps() + } + } + + initPiwikTracker() { + const trackerInstance = getTracker( + __PIWIK_TRACKER_URL__, + __PIWIK_SITEID__, + false, + false + ) + configureTracker({ + appDimensionId: __PIWIK_DIMENSION_ID_APP__, + app: 'Cozy Bar', + heartbeat: 0 + }) + this.setState({ usageTracker: trackerInstance }) + } + + fetchInitialData() { + if (this.props.isPublic) { + return } + this.props.fetchContext() + this.props.fetchSettingsData(false) + this.props.fetchApps() } toggleDrawer = () => { @@ -206,7 +225,8 @@ const mapStateToProps = state => ({ barRight: getContent(state, 'right'), barCenter: getContent(state, 'center'), currentApp: getCurrentApp(state), - claudyEnabled: shouldEnableClaudy(state) + claudyEnabled: shouldEnableClaudy(state), + hasFetchedApps: hasFetched(state) }) const mapDispatchToProps = dispatch => ({ @@ -215,6 +235,10 @@ const mapDispatchToProps = dispatch => ({ fetchSettingsData: displayBusy => dispatch(fetchSettingsData(displayBusy)) }) +export { + Bar +} + export default translate()( connect( mapStateToProps, diff --git a/test/components/Bar.spec.jsx b/test/components/Bar.spec.jsx new file mode 100644 index 000000000..d7a06a797 --- /dev/null +++ b/test/components/Bar.spec.jsx @@ -0,0 +1,52 @@ +import React from 'react' +import { Bar } from 'components/Bar' +import { shallow } from 'enzyme' + +describe('Bar', () => { + + let props + beforeEach(() => { + props = { + fetchContext: jest.fn().mockResolvedValue({}), + fetchApps: jest.fn().mockResolvedValue([]), + fetchSettingsData: jest.fn().mockResolvedValue({}), + t: x => x + } + }) + + it('should fetch data when mounted', () => { + const root = shallow( + + ) + expect(props.fetchContext).toHaveBeenCalled() + expect(props.fetchApps).toHaveBeenCalled() + expect(props.fetchSettingsData).toHaveBeenCalled() + }) + + it('should not fetch data if public', () => { + const root = shallow( + + ) + expect(props.fetchContext).not.toHaveBeenCalled() + expect(props.fetchApps).not.toHaveBeenCalled() + expect(props.fetchSettingsData).not.toHaveBeenCalled() + }) + + it('should not fetch apps if hasFetchedApps is true', () => { + const root = shallow( + + ) + expect(props.fetchApps).toHaveBeenCalled() + }) + + it('should re-fetch apps if apps are not fetched and drawer opens', () => { + const root = shallow( + + ) + expect(props.fetchApps).toHaveBeenCalledTimes(1) + root.setState({ drawerVisible: true }) + expect(props.fetchApps).toHaveBeenCalledTimes(2) + root.setState({ drawerVisible: true, usageTracker: {} }) + expect(props.fetchApps).toHaveBeenCalledTimes(2) + }) +})