From 78eaf749eb8b4ff7561037652a482e4181ff6d80 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Wed, 26 Feb 2020 14:16:57 -0500 Subject: [PATCH] fix(build): npm lint updates (#208) --- .../__tests__/__snapshots__/i18n.test.js.snap | 2 +- src/components/openshiftView/openshiftView.js | 5 +- .../select/__tests__/select.test.js | 10 +- .../common/__tests__/reduxHelpers.test.js | 7 +- src/redux/index.js | 12 +- src/redux/selectors/graphCardSelectors.js | 233 +++++++++--------- 6 files changed, 136 insertions(+), 133 deletions(-) diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index af4c69e5a..4f7c59cf1 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -14,7 +14,7 @@ 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:61 +#: src/components/openshiftView/openshiftView.js:64 #: src/components/rhelView/rhelView.js:31 msgid \\"curiosity-graph.cardHeading\\" msgstr \\"\\" diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js index 3f612734a..0105cbd31 100644 --- a/src/components/openshiftView/openshiftView.js +++ b/src/components/openshiftView/openshiftView.js @@ -38,7 +38,10 @@ class OpenshiftView extends React.Component { renderSelect() { const { option } = this.state; const { initialOption } = this.props; - const options = [{ title: 'Cores', value: 'cores' }, { title: 'Sockets', value: 'sockets' }]; + const options = [ + { title: 'Cores', value: 'cores' }, + { title: 'Sockets', value: 'sockets' } + ]; return ); @@ -17,7 +20,10 @@ describe('Select Component', () => { it('should render a checkbox select', () => { const props = { id: 'test', - options: [{ title: 'lorem', value: 'ipsum' }, { title: 'hello', value: 'world', selected: true }], + options: [ + { title: 'lorem', value: 'ipsum' }, + { title: 'hello', value: 'world', selected: true } + ], selectedOptions: ['world', 'ipsum'], variant: SelectVariant.checkbox, placeholder: 'multiselect test' diff --git a/src/redux/common/__tests__/reduxHelpers.test.js b/src/redux/common/__tests__/reduxHelpers.test.js index f2cb15262..2af9edb5a 100644 --- a/src/redux/common/__tests__/reduxHelpers.test.js +++ b/src/redux/common/__tests__/reduxHelpers.test.js @@ -14,7 +14,12 @@ describe('ReduxHelpers', () => { it('should generate an expected API response with an existing schema', () => { expect(reduxHelpers.setResponseSchemas([{ LOREM: 'ipsum' }, { HELLO: 'world' }])).toMatchSnapshot('object'); - expect(reduxHelpers.setResponseSchemas([['lorem', 'ipsum'], ['hello', 'world']])).toMatchSnapshot('array'); + expect( + reduxHelpers.setResponseSchemas([ + ['lorem', 'ipsum'], + ['hello', 'world'] + ]) + ).toMatchSnapshot('array'); }); it('should get a message from a service call response', () => { diff --git a/src/redux/index.js b/src/redux/index.js index 6578c923d..0d4e5fd02 100644 --- a/src/redux/index.js +++ b/src/redux/index.js @@ -9,21 +9,13 @@ import { reduxTypes } from './types'; import { helpers } from '../common/helpers'; const connectTranslate = (mapStateToProps, mapDispatchToProps) => component => - connect( - mapStateToProps, - mapDispatchToProps - )((!helpers.TEST_MODE && withTranslation()(component)) || component); + connect(mapStateToProps, mapDispatchToProps)((!helpers.TEST_MODE && withTranslation()(component)) || component); const connectRouterTranslate = (mapStateToProps, mapDispatchToProps) => component => withRouter(connectTranslate(mapStateToProps, mapDispatchToProps)(component)); const connectRouter = (mapStateToProps, mapDispatchToProps) => component => - withRouter( - connect( - mapStateToProps, - mapDispatchToProps - )(component) - ); + withRouter(connect(mapStateToProps, mapDispatchToProps)(component)); export { connect, diff --git a/src/redux/selectors/graphCardSelectors.js b/src/redux/selectors/graphCardSelectors.js index 552df4592..9150f179f 100644 --- a/src/redux/selectors/graphCardSelectors.js +++ b/src/redux/selectors/graphCardSelectors.js @@ -14,131 +14,128 @@ const graphResponse = (state, props = {}) => ({ ...{ viewId: props.viewId, productId: props.productId } }); -const graphCardSelector = createSelector( - [graphResponse, graphComponent], - (response, component) => { - const { viewId = null, productId = null, metaQuery = {}, ...responseData } = response || {}; - - const updatedResponseData = { - ...component, - error: responseData.error || false, - errorStatus: responseData.errorStatus, - fulfilled: responseData.fulfilled || false, - pending: responseData.pending || false, - graphData: {}, - syncing: false - }; - - 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}`]) || {}; - const initialLoad = 'initialLoad' in cachedGranularity ? cachedGranularity.initialLoad : true; - - Object.assign(updatedResponseData, { initialLoad, ...cachedGranularity }); - - if (viewId && graphCardCache.dataId !== viewId) { - graphCardCache.dataId = viewId; - graphCardCache.data = {}; - } - - if (responseData.fulfilled && granularity && productId) { - 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], []); - - /** - * ToDo: Reevaluate this reset on graphData when working with Reselect's memoize. - * Creating a new object i.e. updatedResponseData.graphData = {}; causes an update, - * which in turn causes the graph to reload and flash. - */ - Object.keys(updatedResponseData.graphData).forEach(graphDataKey => { - updatedResponseData.graphData[graphDataKey] = []; - }); +const graphCardSelector = createSelector([graphResponse, graphComponent], (response, component) => { + const { viewId = null, productId = null, metaQuery = {}, ...responseData } = response || {}; + + const updatedResponseData = { + ...component, + error: responseData.error || false, + errorStatus: responseData.errorStatus, + fulfilled: responseData.fulfilled || false, + pending: responseData.pending || false, + graphData: {}, + syncing: false + }; + + const responseGranularity = metaQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY] || null; + let granularity = null; + + if (component.graphGranularity === responseGranularity || (!component.graphGranularity && responseData.fulfilled)) { + granularity = responseGranularity; + } - // Populate expected API response values with undefined - const [tallySchema = {}, capacitySchema = {}] = reduxHelpers.setResponseSchemas([ - rhsmApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES, - rhsmApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA_TYPES - ]); - - // Apply "display logic" then return a custom value for Capacity graph entries - const customCapacityValue = (data, key, { date, x, y }) => ({ - date, - x, - y: data[rhsmApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA_TYPES.HAS_INFINITE] === true ? null : y - }); + if (!granularity && responseData.fulfilled) { + updatedResponseData.syncing = true; + } + + const cachedGranularity = + (granularity && viewId && productId && graphCardCache.data[`${viewId}_${productId}_${granularity}`]) || {}; + const initialLoad = 'initialLoad' in cachedGranularity ? cachedGranularity.initialLoad : true; + + Object.assign(updatedResponseData, { initialLoad, ...cachedGranularity }); + + if (viewId && graphCardCache.dataId !== viewId) { + graphCardCache.dataId = viewId; + graphCardCache.data = {}; + } - // Generate reflected graph data for number, undefined, and null - reportData.forEach((value, index) => { - const date = moment - .utc(value[rhsmApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.DATE]) - .startOf('day') - .toDate(); - - const generateGraphData = ({ graphDataObj, keyPrefix = '', customValue = null }) => { - Object.keys(graphDataObj).forEach(graphDataObjKey => { - if ( - typeof graphDataObj[graphDataObjKey] === 'number' || - graphDataObj[graphDataObjKey] === undefined || - graphDataObj[graphDataObjKey] === null - ) { - const casedGraphDataObjKey = _camelCase(`${keyPrefix} ${graphDataObjKey}`).trim(); - - if (!updatedResponseData.graphData[casedGraphDataObjKey]) { - updatedResponseData.graphData[casedGraphDataObjKey] = []; - } - - let generatedY; - - if (typeof graphDataObj[graphDataObjKey] === 'number') { - generatedY = Number.parseInt(graphDataObj[graphDataObjKey], 10); - } else if (graphDataObj[graphDataObjKey] === undefined) { - generatedY = 0; - } else if (graphDataObj[graphDataObjKey] === null) { - generatedY = graphDataObj[graphDataObjKey]; - } - - const updatedItem = - (typeof customValue === 'function' && - customValue(graphDataObj, graphDataObjKey, { date, x: index, y: generatedY })) || - {}; - - updatedResponseData.graphData[casedGraphDataObjKey][index] = { - date, - x: index, - y: generatedY, - ...updatedItem - }; + if (responseData.fulfilled && granularity && productId) { + 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], []); + + /** + * ToDo: Reevaluate this reset on graphData when working with Reselect's memoize. + * Creating a new object i.e. updatedResponseData.graphData = {}; causes an update, + * which in turn causes the graph to reload and flash. + */ + Object.keys(updatedResponseData.graphData).forEach(graphDataKey => { + updatedResponseData.graphData[graphDataKey] = []; + }); + + // Populate expected API response values with undefined + const [tallySchema = {}, capacitySchema = {}] = reduxHelpers.setResponseSchemas([ + rhsmApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES, + rhsmApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA_TYPES + ]); + + // Apply "display logic" then return a custom value for Capacity graph entries + const customCapacityValue = (data, key, { date, x, y }) => ({ + date, + x, + y: data[rhsmApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA_TYPES.HAS_INFINITE] === true ? null : y + }); + + // Generate reflected graph data for number, undefined, and null + reportData.forEach((value, index) => { + const date = moment + .utc(value[rhsmApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.DATE]) + .startOf('day') + .toDate(); + + const generateGraphData = ({ graphDataObj, keyPrefix = '', customValue = null }) => { + Object.keys(graphDataObj).forEach(graphDataObjKey => { + if ( + typeof graphDataObj[graphDataObjKey] === 'number' || + graphDataObj[graphDataObjKey] === undefined || + graphDataObj[graphDataObjKey] === null + ) { + const casedGraphDataObjKey = _camelCase(`${keyPrefix} ${graphDataObjKey}`).trim(); + + if (!updatedResponseData.graphData[casedGraphDataObjKey]) { + updatedResponseData.graphData[casedGraphDataObjKey] = []; } - }); - }; - - generateGraphData({ graphDataObj: { ...tallySchema, ...value } }); - generateGraphData({ - graphDataObj: { ...capacitySchema, ...capacityData[index] }, - keyPrefix: 'threshold', - customValue: customCapacityValue + + let generatedY; + + if (typeof graphDataObj[graphDataObjKey] === 'number') { + generatedY = Number.parseInt(graphDataObj[graphDataObjKey], 10); + } else if (graphDataObj[graphDataObjKey] === undefined) { + generatedY = 0; + } else if (graphDataObj[graphDataObjKey] === null) { + generatedY = graphDataObj[graphDataObjKey]; + } + + const updatedItem = + (typeof customValue === 'function' && + customValue(graphDataObj, graphDataObjKey, { date, x: index, y: generatedY })) || + {}; + + updatedResponseData.graphData[casedGraphDataObjKey][index] = { + date, + x: index, + y: generatedY, + ...updatedItem + }; + } }); - }); + }; - // Update response and cache - updatedResponseData.initialLoad = false; - graphCardCache.data[`${viewId}_${productId}_${granularity}`] = { ...updatedResponseData }; - } + generateGraphData({ graphDataObj: { ...tallySchema, ...value } }); + generateGraphData({ + graphDataObj: { ...capacitySchema, ...capacityData[index] }, + keyPrefix: 'threshold', + customValue: customCapacityValue + }); + }); - return updatedResponseData; + // Update response and cache + updatedResponseData.initialLoad = false; + graphCardCache.data[`${viewId}_${productId}_${granularity}`] = { ...updatedResponseData }; } -); + + return updatedResponseData; +}); const makeGraphCardSelector = () => graphCardSelector;