From 242d3abd3902f2abc7d157ac0066ccd4bfbe5422 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Sat, 29 Feb 2020 02:52:42 -0500 Subject: [PATCH] fix(graphCardSelectors): improve sync for multiple api calls (#215) * graphCard, require graphGranularity, relocate granularity to parent * graphCardSelectors, improve sync for multi api calls, aggregation * graphReducer, viewReducer, relocate granularity * i18n, test update * openShiftView, rhelView, relocate granularity * routerHelpers, routerTypes, test updates --- .../__snapshots__/graphCard.test.js.snap | 10 ++-- .../graphCard/__tests__/graphCard.test.js | 6 +-- src/components/graphCard/graphCard.js | 32 +++++------- .../__tests__/__snapshots__/i18n.test.js.snap | 10 ++-- .../__snapshots__/openshiftView.test.js.snap | 2 + src/components/openshiftView/openshiftView.js | 14 +++-- .../__snapshots__/rhelView.test.js.snap | 2 + src/components/rhelView/rhelView.js | 14 +++-- .../__snapshots__/routerHelpers.test.js.snap | 48 ++++++++++++++--- .../__snapshots__/routerTypes.test.js.snap | 24 +++++++-- .../__snapshots__/graphReducer.test.js.snap | 25 --------- .../__snapshots__/viewReducer.test.js.snap | 10 ++++ .../reducers/__tests__/graphReducer.test.js | 16 ------ .../reducers/__tests__/viewReducer.test.js | 17 +++++++ src/redux/reducers/graphReducer.js | 41 ++++----------- src/redux/reducers/viewReducer.js | 30 +++++++---- .../graphCardSelectors.test.js.snap | 16 ------ .../__tests__/graphCardSelectors.test.js | 51 +++++-------------- src/redux/selectors/graphCardSelectors.js | 31 ++++------- 19 files changed, 192 insertions(+), 207 deletions(-) create mode 100644 src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap index d9b2630b7..c8adda601 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap @@ -37,7 +37,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec ] } placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions={null} + selectedOptions="daily" variant="single" /> @@ -144,7 +144,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu ] } placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions={null} + selectedOptions="daily" variant="single" /> @@ -247,7 +247,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu ] } placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions={null} + selectedOptions="daily" variant="single" /> @@ -350,7 +350,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = ` ] } placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions={null} + selectedOptions="daily" variant="single" /> @@ -453,7 +453,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = ` ] } placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions={null} + selectedOptions="daily" variant="single" /> diff --git a/src/components/graphCard/__tests__/graphCard.test.js b/src/components/graphCard/__tests__/graphCard.test.js index 370748cfe..6c0cd221e 100644 --- a/src/components/graphCard/__tests__/graphCard.test.js +++ b/src/components/graphCard/__tests__/graphCard.test.js @@ -2,10 +2,11 @@ import React from 'react'; import { shallow } from 'enzyme'; import { ChartArea } from '../../chartArea/chartArea'; import { GraphCard } from '../graphCard'; +import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../../types/rhsmApiTypes'; describe('GraphCard Component', () => { it('should render a non-connected component', () => { - const props = { productId: 'lorem' }; + const props = { graphGranularity: GRANULARITY_TYPES.DAILY, productId: 'lorem' }; const component = shallow(); expect(component).toMatchSnapshot('non-connected'); @@ -13,9 +14,8 @@ describe('GraphCard Component', () => { it('should render multiple states', () => { const props = { + graphGranularity: GRANULARITY_TYPES.DAILY, productId: 'lorem', - startDate: new Date('2019-06-01T00:00:00Z'), - endDate: new Date('2019-06-30T23:59:59Z'), graphData: { physicalSockets: [ { diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js index 300db0508..994de3a59 100644 --- a/src/components/graphCard/graphCard.js +++ b/src/components/graphCard/graphCard.js @@ -17,23 +17,20 @@ class GraphCard extends React.Component { } componentDidUpdate(prevProps) { - const { graphGranularity } = this.props; + const { graphGranularity, productId } = this.props; - if (graphGranularity !== prevProps.graphGranularity) { + if (graphGranularity !== prevProps.graphGranularity || productId !== prevProps.productId) { this.onUpdateGraphData(); } } onUpdateGraphData = () => { - const { getGraphReportsCapacity, graphGranularity, productId, selectOptionsType } = this.props; + const { getGraphReportsCapacity, graphGranularity, productId } = this.props; - if (productId) { - const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType); - const updatedGranularity = graphGranularity || selected; - - const { startDate, endDate } = dateHelpers.getRangedDateTime(updatedGranularity); + if (graphGranularity && productId) { + const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity); const query = { - [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: updatedGranularity, + [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: graphGranularity, [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(), [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString() }; @@ -42,17 +39,13 @@ class GraphCard extends React.Component { } }; - onSelect = event => { - const { graphGranularity, viewId } = this.props; + onSelect = (event = {}) => { const { value } = event; - if (graphGranularity !== value) { - store.dispatch({ - type: reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM, - graphGranularity: value, - viewId - }); - } + store.dispatch({ + type: reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM, + granularity: value + }); }; /** @@ -177,7 +170,7 @@ GraphCard.propTypes = { ), getGraphReportsCapacity: PropTypes.func, graphData: PropTypes.object, - graphGranularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]), + graphGranularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired, pending: PropTypes.bool, productId: PropTypes.string.isRequired, selectOptionsType: PropTypes.oneOf(['default']), @@ -193,7 +186,6 @@ GraphCard.defaultProps = { filterGraphData: [], getGraphReportsCapacity: helpers.noop, graphData: {}, - graphGranularity: null, pending: false, selectOptionsType: 'default', t: helpers.noopTranslate, diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index 4f7c59cf1..574a1aa7f 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -14,8 +14,8 @@ exports[`I18n Component should generate a predictable pot output snapshot: pot o msgstr \\"\\" \\"Content-Type: text/plain; charset=UTF-8\\\\n\\" -#: src/components/openshiftView/openshiftView.js:64 -#: src/components/rhelView/rhelView.js:31 +#: src/components/openshiftView/openshiftView.js:66 +#: src/components/rhelView/rhelView.js:33 msgid \\"curiosity-graph.cardHeading\\" msgstr \\"\\" @@ -31,8 +31,8 @@ msgstr \\"\\" msgid \\"curiosity-graph.dropdownMonthly\\" msgstr \\"\\" -#: src/components/graphCard/graphCard.js:141 -#: src/components/graphCard/graphCard.js:145 +#: src/components/graphCard/graphCard.js:134 +#: src/components/graphCard/graphCard.js:138 msgid \\"curiosity-graph.dropdownPlaceholder\\" msgstr \\"\\" @@ -48,7 +48,7 @@ msgstr \\"\\" msgid \\"curiosity-graph.noDataLabel\\" msgstr \\"\\" -#: src/components/graphCard/graphCard.js:112 +#: src/components/graphCard/graphCard.js:105 #: src/components/graphCard/graphCardHelpers.js:81 msgid \\"curiosity-graph.thresholdLabel\\" msgstr \\"\\" diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap index d3d8bbe99..8021e1b98 100644 --- a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap +++ b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap @@ -20,6 +20,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = ` }, ] } + graphGranularity="daily" key="lorem ipsum" productId="lorem ipsum" productShortLabel="OpenShift" @@ -73,6 +74,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co }, ] } + graphGranularity="daily" key="lorem ipsum" productId="lorem ipsum" productShortLabel="OpenShift" diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js index 0105cbd31..5501c9452 100644 --- a/src/components/openshiftView/openshiftView.js +++ b/src/components/openshiftView/openshiftView.js @@ -1,11 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withTranslation } from 'react-i18next'; import { chart_color_blue_100 as chartColorBlueLight, chart_color_blue_300 as chartColorBlueDark } from '@patternfly/react-tokens'; import { PageLayout, PageHeader, PageSection } from '../pageLayout/pageLayout'; +import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes'; +import { connectTranslate } from '../../redux'; import GraphCard from '../graphCard/graphCard'; import { Select } from '../select/select'; import { helpers } from '../../common'; @@ -48,7 +49,7 @@ class OpenshiftView extends React.Component { render() { const { filters } = this.state; - const { routeDetail, t } = this.props; + const { granularity, routeDetail, t } = this.props; return ( @@ -59,6 +60,7 @@ class OpenshiftView extends React.Component { ({ ...state.view }); -export { TranslatedOpenshiftView as default, TranslatedOpenshiftView, OpenshiftView }; +const ConnectedOpenshiftView = connectTranslate(mapStateToProps)(OpenshiftView); + +export { ConnectedOpenshiftView as default, ConnectedOpenshiftView, OpenshiftView }; diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap index adde1ff2a..4c9253fca 100644 --- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap +++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap @@ -25,6 +25,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = ` }, ] } + graphGranularity="daily" key="lorem ipsum" productId="lorem ipsum" productShortLabel="RHEL" @@ -59,6 +60,7 @@ exports[`RhelView Component should render a non-connected component: non-connect }, ] } + graphGranularity="daily" key="lorem ipsum" productId="lorem ipsum" productShortLabel="RHEL" diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js index b84970fd0..184f7c3ba 100644 --- a/src/components/rhelView/rhelView.js +++ b/src/components/rhelView/rhelView.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withTranslation } from 'react-i18next'; import { chart_color_blue_100 as chartColorBlueLight, chart_color_blue_300 as chartColorBlueDark, @@ -8,6 +7,8 @@ import { chart_color_cyan_300 as chartColorCyanDark } from '@patternfly/react-tokens'; import { PageLayout, PageHeader, PageSection } from '../pageLayout/pageLayout'; +import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes'; +import { connectTranslate } from '../../redux'; import GraphCard from '../graphCard/graphCard'; import { helpers } from '../../common'; @@ -15,7 +16,7 @@ class RhelView extends React.Component { componentDidMount() {} render() { - const { initialFilters, routeDetail, t } = this.props; + const { granularity, initialFilters, routeDetail, t } = this.props; return ( @@ -26,6 +27,7 @@ class RhelView extends React.Component { ({ ...state.view }); -export { TranslatedRhelView as default, TranslatedRhelView, RhelView }; +const ConnectedRhelView = connectTranslate(mapStateToProps)(RhelView); + +export { ConnectedRhelView as default, ConnectedRhelView, RhelView }; diff --git a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap index 41b513e6a..fc329b53a 100644 --- a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap @@ -19,7 +19,13 @@ Object { "title": "Red Hat Enterprise Linux", }, "navRoute": Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "default": true, "disabled": false, "exact": true, @@ -33,7 +39,13 @@ Object { "to": "/rhel-sw/all", }, "route": Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "disabled": false, "exact": true, "redirect": true, @@ -55,7 +67,13 @@ Object { "title": "Red Hat Enterprise Linux", }, "navRoute": Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "default": true, "disabled": false, "exact": true, @@ -69,7 +87,13 @@ Object { "to": "/rhel-sw/all", }, "route": Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "disabled": false, "exact": true, "redirect": true, @@ -99,7 +123,13 @@ Object { "title": "Red Hat Enterprise Linux", }, "navRoute": Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "default": true, "disabled": false, "exact": true, @@ -134,7 +164,13 @@ Object { "title": "ARM", }, "navRoute": Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "disabled": false, "exact": true, "id": "arm", diff --git a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap index 4ac0f8343..85fd403c6 100644 --- a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap @@ -55,7 +55,13 @@ exports[`RouterTypes should return specific properties: platformRedirect 1`] = ` exports[`RouterTypes should return specific properties: routes 1`] = ` Array [ Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "disabled": false, "exact": true, "redirect": true, @@ -64,7 +70,13 @@ Array [ "to": "/rhel-sw/all", }, Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(RhelView)", + "type": [Function], + }, "disabled": false, "exact": true, "id": "rhel-sw", @@ -73,7 +85,13 @@ Array [ "to": "/rhel-sw/:variant", }, Object { - "component": [Function], + "component": Object { + "$$typeof": Symbol(react.memo), + "WrappedComponent": [Function], + "compare": null, + "displayName": "Connect(OpenshiftView)", + "type": [Function], + }, "disabled": false, "exact": true, "id": "openshift-sw", diff --git a/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap index 17e26084b..ac68e9a03 100644 --- a/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap +++ b/src/redux/reducers/__tests__/__snapshots__/graphReducer.test.js.snap @@ -14,7 +14,6 @@ Object { "metaQuery": undefined, "pending": false, }, - "component": Object {}, "report": Object {}, "reportCapacity": Object {}, }, @@ -26,7 +25,6 @@ exports[`GraphReducer should handle all defined error types: rejected types GET_ Object { "result": Object { "capacity": Object {}, - "component": Object {}, "report": Object {}, "reportCapacity": Object { "error": true, @@ -48,7 +46,6 @@ exports[`GraphReducer should handle all defined error types: rejected types GET_ Object { "result": Object { "capacity": Object {}, - "component": Object {}, "report": Object { "error": true, "errorMessage": "MESSAGE", @@ -83,7 +80,6 @@ Object { "metaQuery": undefined, "pending": false, }, - "component": Object {}, "report": Object {}, "reportCapacity": Object {}, }, @@ -95,7 +91,6 @@ exports[`GraphReducer should handle all defined fulfilled types: fulfilled types Object { "result": Object { "capacity": Object {}, - "component": Object {}, "report": Object {}, "reportCapacity": Object { "data": Object { @@ -120,7 +115,6 @@ exports[`GraphReducer should handle all defined fulfilled types: fulfilled types Object { "result": Object { "capacity": Object {}, - "component": Object {}, "report": Object { "data": Object { "test": "success", @@ -154,7 +148,6 @@ Object { "metaQuery": undefined, "pending": true, }, - "component": Object {}, "report": Object {}, "reportCapacity": Object {}, }, @@ -166,7 +159,6 @@ exports[`GraphReducer should handle all defined pending types: pending types GET Object { "result": Object { "capacity": Object {}, - "component": Object {}, "report": Object {}, "reportCapacity": Object { "error": false, @@ -187,7 +179,6 @@ exports[`GraphReducer should handle all defined pending types: pending types GET Object { "result": Object { "capacity": Object {}, - "component": Object {}, "report": Object { "error": false, "errorMessage": "", @@ -203,19 +194,3 @@ Object { "type": "GET_GRAPH_REPORT_RHSM_PENDING", } `; - -exports[`GraphReducer should handle specific defined types: defined type SET_GRAPH_GRANULARITY_RHSM 1`] = ` -Object { - "result": Object { - "capacity": Object {}, - "component": Object { - "dolor id": Object { - "graphGranularity": "lorem granularity", - }, - }, - "report": Object {}, - "reportCapacity": Object {}, - }, - "type": "SET_GRAPH_GRANULARITY_RHSM", -} -`; diff --git a/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap new file mode 100644 index 000000000..ce73d3ddb --- /dev/null +++ b/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ViewReducer should handle specific defined types: defined type SET_GRAPH_GRANULARITY_RHSM 1`] = ` +Object { + "result": Object { + "granularity": "lorem granularity", + }, + "type": "SET_GRAPH_GRANULARITY_RHSM", +} +`; diff --git a/src/redux/reducers/__tests__/graphReducer.test.js b/src/redux/reducers/__tests__/graphReducer.test.js index 1b7dcd0a6..363a9f0b6 100644 --- a/src/redux/reducers/__tests__/graphReducer.test.js +++ b/src/redux/reducers/__tests__/graphReducer.test.js @@ -7,22 +7,6 @@ describe('GraphReducer', () => { expect(graphReducer.initialState).toBeDefined(); }); - it('should handle specific defined types', () => { - const specificTypes = [types.SET_GRAPH_GRANULARITY_RHSM]; - - specificTypes.forEach(value => { - const dispatched = { - type: value, - graphGranularity: 'lorem granularity', - viewId: 'dolor id' - }; - - const resultState = graphReducer(undefined, dispatched); - - expect({ type: value, result: resultState }).toMatchSnapshot(`defined type ${value}`); - }); - }); - it('should handle all defined error types', () => { const specificTypes = [ types.GET_GRAPH_REPORT_CAPACITY_RHSM, diff --git a/src/redux/reducers/__tests__/viewReducer.test.js b/src/redux/reducers/__tests__/viewReducer.test.js index d0e165892..a79202371 100644 --- a/src/redux/reducers/__tests__/viewReducer.test.js +++ b/src/redux/reducers/__tests__/viewReducer.test.js @@ -1,7 +1,24 @@ import viewReducer from '../viewReducer'; +import { rhsmTypes as types } from '../../types'; describe('ViewReducer', () => { it('should return the initial state', () => { expect(viewReducer.initialState).toBeDefined(); }); + + it('should handle specific defined types', () => { + const specificTypes = [types.SET_GRAPH_GRANULARITY_RHSM]; + + specificTypes.forEach(value => { + const dispatched = { + type: value, + granularity: 'lorem granularity', + viewId: 'dolor id' + }; + + const resultState = viewReducer(undefined, dispatched); + + expect({ type: value, result: resultState }).toMatchSnapshot(`defined type ${value}`); + }); + }); }); diff --git a/src/redux/reducers/graphReducer.js b/src/redux/reducers/graphReducer.js index 7afc072fd..ac3b951a8 100644 --- a/src/redux/reducers/graphReducer.js +++ b/src/redux/reducers/graphReducer.js @@ -1,41 +1,22 @@ -import { reduxTypes, rhsmTypes } from '../types'; +import { rhsmTypes } from '../types'; import { reduxHelpers } from '../common/reduxHelpers'; const initialState = { capacity: {}, - component: {}, report: {}, reportCapacity: {} }; -const graphReducer = (state = initialState, action) => { - switch (action.type) { - case reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM: - return reduxHelpers.setStateProp( - 'component', - { - [action.viewId]: { - graphGranularity: action.graphGranularity - } - }, - { - state, - reset: false - } - ); - - default: - return reduxHelpers.generatedPromiseActionReducer( - [ - { ref: 'reportCapacity', type: rhsmTypes.GET_GRAPH_REPORT_CAPACITY_RHSM }, - { ref: 'capacity', type: rhsmTypes.GET_GRAPH_CAPACITY_RHSM }, - { ref: 'report', type: rhsmTypes.GET_GRAPH_REPORT_RHSM } - ], - state, - action - ); - } -}; +const graphReducer = (state = initialState, action) => + reduxHelpers.generatedPromiseActionReducer( + [ + { ref: 'reportCapacity', type: rhsmTypes.GET_GRAPH_REPORT_CAPACITY_RHSM }, + { ref: 'capacity', type: rhsmTypes.GET_GRAPH_CAPACITY_RHSM }, + { ref: 'report', type: rhsmTypes.GET_GRAPH_REPORT_RHSM } + ], + state, + action + ); graphReducer.initialState = initialState; diff --git a/src/redux/reducers/viewReducer.js b/src/redux/reducers/viewReducer.js index f08636cad..fc035e32c 100644 --- a/src/redux/reducers/viewReducer.js +++ b/src/redux/reducers/viewReducer.js @@ -1,16 +1,26 @@ -const initialState = { - view: { - data: [], - error: false, - errorStatus: null, - errorMessage: null, - pending: false, - fulfilled: false +import { reduxTypes } from '../types'; +import { reduxHelpers } from '../common/reduxHelpers'; + +const initialState = {}; + +const viewReducer = (state = initialState, action) => { + switch (action.type) { + case reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM: + return reduxHelpers.setStateProp( + null, + { + granularity: action.granularity + }, + { + state, + initialState + } + ); + default: + return state; } }; -const viewReducer = (state = initialState) => state; - viewReducer.initialState = initialState; export { viewReducer as default, initialState, viewReducer }; diff --git a/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap index 0f5df774e..ae7762424 100644 --- a/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap +++ b/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap @@ -6,10 +6,8 @@ Object { "errorStatus": undefined, "fulfilled": false, "graphData": Object {}, - "graphGranularity": "daily", "initialLoad": true, "pending": true, - "syncing": false, } `; @@ -241,10 +239,8 @@ Object { }, ], }, - "graphGranularity": "daily", "initialLoad": false, "pending": false, - "syncing": false, } `; @@ -256,7 +252,6 @@ Object { "graphData": Object {}, "initialLoad": true, "pending": false, - "syncing": false, } `; @@ -268,7 +263,6 @@ Object { "graphData": Object {}, "initialLoad": true, "pending": false, - "syncing": false, } `; @@ -280,7 +274,6 @@ Object { "graphData": Object {}, "initialLoad": true, "pending": false, - "syncing": false, } `; @@ -391,7 +384,6 @@ Object { }, "initialLoad": false, "pending": false, - "syncing": false, } `; @@ -500,10 +492,8 @@ Object { }, ], }, - "graphGranularity": "daily", "initialLoad": false, "pending": false, - "syncing": false, } `; @@ -612,10 +602,8 @@ Object { }, ], }, - "graphGranularity": "daily", "initialLoad": false, "pending": false, - "syncing": false, } `; @@ -864,10 +852,8 @@ Object { }, ], }, - "graphGranularity": "daily", "initialLoad": false, "pending": false, - "syncing": false, } `; @@ -983,10 +969,8 @@ Object { }, ], }, - "graphGranularity": "daily", "initialLoad": false, "pending": false, - "syncing": false, } `; diff --git a/src/redux/selectors/__tests__/graphCardSelectors.test.js b/src/redux/selectors/__tests__/graphCardSelectors.test.js index 122722156..7fd58c041 100644 --- a/src/redux/selectors/__tests__/graphCardSelectors.test.js +++ b/src/redux/selectors/__tests__/graphCardSelectors.test.js @@ -18,7 +18,6 @@ describe('GraphCardSelectors', () => { }; const state = { graph: { - component: {}, reportCapacity: { fulfilled: true, metaId: 'Lorem Ipsum ID missing granularity', @@ -37,11 +36,11 @@ describe('GraphCardSelectors', () => { it('should pass minimal data on a product ID without a product ID provided', () => { const props = { viewId: 'test', - productId: undefined + productId: undefined, + graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY }; const state = { graph: { - component: {}, reportCapacity: { fulfilled: true, metaId: undefined, @@ -62,15 +61,11 @@ describe('GraphCardSelectors', () => { it('should handle pending state on a product ID', () => { const props = { viewId: 'test', - productId: 'Lorem Ipsum ID pending state' + productId: 'Lorem Ipsum ID pending state', + graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY }; const state = { graph: { - component: { - test: { - graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY - } - }, reportCapacity: { 'Lorem Ipsum ID pending state': { pending: true, @@ -93,15 +88,11 @@ describe('GraphCardSelectors', () => { it('should populate data on a product ID when the api response provided mismatches index or date', () => { const props = { viewId: 'test', - productId: 'Lorem Ipsum mismatched index or date' + productId: 'Lorem Ipsum mismatched index or date', + graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY }; const state = { graph: { - component: { - test: { - graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY - } - }, reportCapacity: { 'Lorem Ipsum mismatched index or date': { fulfilled: true, @@ -138,15 +129,11 @@ describe('GraphCardSelectors', () => { it('should populate data on a product ID when the api response is missing expected properties', () => { const props = { viewId: 'test', - productId: 'Lorem Ipsum missing expected properties' + productId: 'Lorem Ipsum missing expected properties', + graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY }; const state = { graph: { - component: { - test: { - graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY - } - }, reportCapacity: { 'Lorem Ipsum missing expected properties': { fulfilled: true, @@ -208,15 +195,11 @@ describe('GraphCardSelectors', () => { it('should map a fulfilled product ID response to an aggregated output', () => { const props = { viewId: 'test', - productId: 'Lorem Ipsum fulfilled aggregated output' + productId: 'Lorem Ipsum fulfilled aggregated output', + graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY }; const state = { graph: { - component: { - test: { - graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY - } - }, reportCapacity: { 'Lorem Ipsum fulfilled aggregated output': { fulfilled: true, @@ -293,15 +276,11 @@ describe('GraphCardSelectors', () => { it('should populate data from the in memory cache', () => { const props = { viewId: 'cache-test', - productId: 'Lorem Ipsum ID cached' + productId: 'Lorem Ipsum ID cached', + graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY }; const stateDailyGranularityFulfilled = { graph: { - component: { - 'cache-test': { - graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY - } - }, reportCapacity: { 'Lorem Ipsum ID cached': { fulfilled: true, @@ -359,11 +338,6 @@ describe('GraphCardSelectors', () => { const stateDailyComponentCapacityGranularity = { graph: { - component: { - 'cache-test': { - graphGranularity: rhsmApiTypes.RHSM_API_QUERY_GRANULARITY_TYPES.DAILY - } - }, reportCapacity: { 'Lorem Ipsum ID cached': { ...stateDailyGranularityFulfilled.graph.reportCapacity['Lorem Ipsum ID cached'], @@ -379,7 +353,6 @@ describe('GraphCardSelectors', () => { const stateDailyReportCapacityGranularityMismatch = { graph: { - component: {}, reportCapacity: { 'Lorem Ipsum ID cached': { ...stateDailyGranularityFulfilled.graph.reportCapacity['Lorem Ipsum ID cached'], diff --git a/src/redux/selectors/graphCardSelectors.js b/src/redux/selectors/graphCardSelectors.js index 9150f179f..ba9905007 100644 --- a/src/redux/selectors/graphCardSelectors.js +++ b/src/redux/selectors/graphCardSelectors.js @@ -7,39 +7,27 @@ import { reduxHelpers } from '../common/reduxHelpers'; const graphCardCache = { dataId: null, data: {} }; -const graphComponent = (state, props = {}) => ({ ..._get(state, ['graph', 'component', props.viewId]) }); - const graphResponse = (state, props = {}) => ({ ..._get(state, ['graph', 'reportCapacity', props.productId]), - ...{ viewId: props.viewId, productId: props.productId } + ...{ viewId: props.viewId, productId: props.productId, graphGranularity: props.graphGranularity } }); -const graphCardSelector = createSelector([graphResponse, graphComponent], (response, component) => { - const { viewId = null, productId = null, metaQuery = {}, ...responseData } = response || {}; +const graphCardSelector = createSelector([graphResponse], response => { + const { viewId = null, productId = null, graphGranularity, metaId, metaQuery = {}, ...responseData } = response || {}; const updatedResponseData = { - ...component, error: responseData.error || false, errorStatus: responseData.errorStatus, - fulfilled: responseData.fulfilled || false, + fulfilled: false, pending: responseData.pending || false, - graphData: {}, - syncing: false + graphData: {} }; const responseGranularity = metaQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY] || null; - let granularity = null; - - if (component.graphGranularity === responseGranularity || (!component.graphGranularity && responseData.fulfilled)) { - granularity = responseGranularity; - } - - if (!granularity && responseData.fulfilled) { - updatedResponseData.syncing = true; - } const cachedGranularity = - (granularity && viewId && productId && graphCardCache.data[`${viewId}_${productId}_${granularity}`]) || {}; + (graphGranularity && viewId && productId && graphCardCache.data[`${viewId}_${productId}_${graphGranularity}`]) || + {}; const initialLoad = 'initialLoad' in cachedGranularity ? cachedGranularity.initialLoad : true; Object.assign(updatedResponseData, { initialLoad, ...cachedGranularity }); @@ -49,7 +37,7 @@ const graphCardSelector = createSelector([graphResponse, graphComponent], (respo graphCardCache.data = {}; } - if (responseData.fulfilled && granularity && productId) { + if (responseData.fulfilled && graphGranularity === responseGranularity && productId === metaId) { const [report, capacity] = responseData.data; const reportData = _get(report, [rhsmApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA], []); const capacityData = _get(capacity, [rhsmApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA], []); @@ -130,8 +118,9 @@ const graphCardSelector = createSelector([graphResponse, graphComponent], (respo }); // Update response and cache + updatedResponseData.fulfilled = true; updatedResponseData.initialLoad = false; - graphCardCache.data[`${viewId}_${productId}_${granularity}`] = { ...updatedResponseData }; + graphCardCache.data[`${viewId}_${productId}_${graphGranularity}`] = { ...updatedResponseData }; } return updatedResponseData;