Merge pull request #319 from flacoman91/more-toggles

show more/less toggle to appear on overview
cfpb · Jul 16, 2020 · 99c3e47 · 99c3e47
2 parents 024a5c4 + cf09a65
commit 99c3e47
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 12 deletions.
diff --git a/src/components/Trends/TrendDepthToggle.jsx b/src/components/Trends/TrendDepthToggle.jsx
@@ -7,6 +7,11 @@ import React from 'react'
 import { SLUG_SEPARATOR } from '../../constants'
 
 const maxRows = 5
+const lensMap = {
+  Overview: 'product',
+  Product: 'product',
+  Company: 'company'
+}
 
 export class TrendDepthToggle extends React.Component {
 
@@ -51,6 +56,22 @@ export class TrendDepthToggle extends React.Component {
   }
 }
 
+/**
+ * helper containing logic to determine when to show the toggle
+ * @param {string} lens selected value
+ * @param {string} focus which focus we are on
+ * @param {number} resultCount count coming from trends results
+ * @param {number} queryCount count froming from aggs
+ * @returns {boolean} whether to display the toggle
+ */
+export const showToggle = ( lens, focus, resultCount, queryCount ) => {
+  // hide on Overview and Focus pages
+  if ( lens === 'Overview' || focus ) {
+    return false
+  }
+
+  return resultCount > 5 || queryCount > 5
+}
 
 export const mapDispatchToProps = dispatch => ( {
   increaseDepth: diff => {
@@ -64,7 +85,7 @@ export const mapDispatchToProps = dispatch => ( {
 export const mapStateToProps = state => {
   const { aggs, query, trends } = state
   const { focus, lens } = query
-  const lensKey = lens.toLowerCase()
+  const lensKey = lensMap[lens]
   const resultCount = coalesce( trends.results, lensKey, [] )
     .filter( o => o.visible && o.isParent ).length
 
@@ -85,7 +106,7 @@ export const mapStateToProps = state => {
     diff: totalResultsLength - resultCount,
     resultCount,
     queryCount,
-    showToggle: !focus && ( resultCount > 5 || queryCount > 5 )
+    showToggle: showToggle( lens, focus, resultCount, queryCount )
   }
 }
 

diff --git a/src/reducers/__tests__/query.spec.jsx b/src/reducers/__tests__/query.spec.jsx
@@ -931,7 +931,6 @@ describe( 'reducer:query', () => {
 
         expect( res ).toEqual( {
           queryString: '?tab=List',
-          state: [ ],
           tab: types.MODE_LIST
         } )
       } )
@@ -1005,7 +1004,6 @@ describe( 'reducer:query', () => {
           enablePer1000: true,
           mapWarningEnabled: true,
           queryString: '?tab=Map',
-          state: [],
           tab: types.MODE_MAP
         } )
       } )
@@ -1021,7 +1019,6 @@ describe( 'reducer:query', () => {
           enablePer1000: true,
           mapWarningEnabled: true,
           queryString: '?tab=Map',
-          state: [],
           tab: types.MODE_MAP
         } )
       } )
@@ -1052,7 +1049,6 @@ describe( 'reducer:query', () => {
           enablePer1000: true,
           mapWarningEnabled: true,
           queryString: '?tab=Map',
-          state: [],
           tab: types.MODE_MAP
         } )
       } )
@@ -1173,9 +1169,10 @@ describe( 'reducer:query', () => {
           focus: 'A',
           lens: 'Product',
           product: [ 'A', 'A' + SLUG_SEPARATOR + 'B'],
-          queryString: '?focus=A&lens=product&product=A&product=A%E2%80%A2B&sub_lens=sub_product&tab=Trends',
+          queryString: '?focus=A&lens=product&product=A&product=A%E2%80%A2B&sub_lens=sub_product&tab=Trends&trend_depth=25',
           subLens: 'sub_product',
           tab: 'Trends',
+          trendDepth: 25,
           trendsDateWarningEnabled: false
         } )
       } )
@@ -1192,9 +1189,10 @@ describe( 'reducer:query', () => {
           focus: 'A',
           lens: 'Company',
           company: [ 'A' ],
-          queryString: '?company=A&focus=A&lens=company&sub_lens=product&tab=Trends',
+          queryString: '?company=A&focus=A&lens=company&sub_lens=product&tab=Trends&trend_depth=25',
           subLens: 'product',
           tab: 'Trends',
+          trendDepth: 25,
           trendsDateWarningEnabled: false
         } )
       } )
@@ -1209,9 +1207,9 @@ describe( 'reducer:query', () => {
         expect( result ).toEqual( {
           focus: '',
           lens: 'Product',
-          product: [],
-          queryString: '?lens=product&tab=Trends',
+          queryString: '?lens=product&tab=Trends&trend_depth=5',
           tab: 'Trends',
+          trendDepth: 5,
           trendsDateWarningEnabled: false
         } )
       } )

diff --git a/src/reducers/__tests__/trends.spec.jsx b/src/reducers/__tests__/trends.spec.jsx
@@ -148,9 +148,17 @@ describe( 'reducer:trends', () => {
         focus: 'gg',
         tooltip: { wut: 'isthis' }
       }, action ) ).toEqual( {
+
         expandableRows: [],
         expandedTrends: [],
         focus: '',
+        results: {
+          company: [],
+          issue: [],
+          product: [],
+          'sub-issue': [],
+          'sub-product': []
+        },
         tooltip: false
       } )
     } )

diff --git a/src/reducers/query.jsx b/src/reducers/query.jsx
@@ -789,7 +789,8 @@ function changeFocus( state, action ) {
     focus,
     lens,
     subLens: state.subLens || getSubLens( lens ),
-    tab: types.MODE_TRENDS
+    tab: types.MODE_TRENDS,
+    trendDepth: 25
   }
 }
 
@@ -806,7 +807,8 @@ function removeFocus( state ) {
     ...state,
     [filterKey]: [],
     focus: '',
-    tab: types.MODE_TRENDS
+    tab: types.MODE_TRENDS,
+    trendDepth: 5
   }
 }
 
@@ -855,6 +857,19 @@ export function updateChartType( state, action ) {
   }
 }
 
+/**
+ * helper function to remove any empty arrays from known filter sets
+ * @param {object} state we need to clean up
+ */
+export function pruneEmptyFilters( state ) {
+  // go through the object and delete any filter keys that have no values in it
+  types.knownFilters.forEach( o => {
+    if ( Array.isArray( state[o] ) && state[o].length === 0 ) {
+      delete state[o]
+    }
+  } )
+}
+
 // ----------------------------------------------------------------------------
 // Query String Builder
 
@@ -998,6 +1013,8 @@ export default ( state = defaultQuery, action ) => {
     validateDateInterval( newState )
   }
 
+  // remove any filter keys with empty array
+  pruneEmptyFilters( newState )
 
   const qs = stateToQS( newState )
   newState.queryString = qs === '?' ? '' : qs

diff --git a/src/reducers/trends.jsx b/src/reducers/trends.jsx
@@ -565,6 +565,17 @@ function removeFocus( state ) {
     expandableRows: [],
     expandedTrends: [],
     focus: '',
+    results: {
+      ...state.results,
+      /* eslint-disable quote-props */
+      company: [],
+      product: [],
+      issue: [],
+      'sub-product': [],
+      'sub-issue': []
+      /* eslint-enable quote-props */
+
+    },
     tooltip: false
   }
 }