Feature #161750271 – Add headers to results (#12)

* Add a ResultsHeaderClass that is rendered on top of the results list

* Add headers to demo page

* Minor code clean-up

* 2.5.0-beta

* Clean code style

packages/scxa-faceted-search-results/__test__/FacetGroups.test.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import Enzyme from 'enzyme'
-import {mount} from 'enzyme'
+import { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-import {getRandomInt, vindicators} from './TestUtils'
+import { getRandomInt, vindicators } from './TestUtils'
 
 import CheckboxFacetGroup from '../src/facetgroups/CheckboxFacetGroup'
 import MultiselectDropdownFacetGroup from '../src/facetgroups/MultiselectDropdownFacetGroup'

packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import Enzyme from 'enzyme'
-import {mount} from 'enzyme'
+import { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {episodes, EpisodeCard} from './TestUtils'

packages/scxa-faceted-search-results/__test__/FilterList.test.js

@@ -1,25 +1,27 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import Enzyme from 'enzyme'
-import {shallow} from 'enzyme'
+import { shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-import {episodes, EpisodeCard} from './TestUtils'
+import { episodes, EpisodesHeader, EpisodeCard } from './TestUtils'
 
 import FilterList from '../src/FilterList'
 
 Enzyme.configure({ adapter: new Adapter() })
 
 const props = {
   filteredResults: episodes,
+  ResultsHeaderClass: EpisodesHeader,
   ResultElementClass: EpisodeCard
 }
 
 describe(`FilterList`, () => {
   test(`renders as many components of ResultElementClass as filtered results`, () => {
-    const randomFilteredResults=episodes.filter(() => Math.random() > 0.5)
+    const randomFilteredResults = episodes.filter(() => Math.random() > 0.5)
     const wrapper = shallow(<FilterList {...props} filteredResults={randomFilteredResults}/>)
-    expect(wrapper.find(props.ResultElementClass)).toHaveLength(randomFilteredResults.length)
+    expect(wrapper.find(EpisodesHeader)).toHaveLength(1)
+    expect(wrapper.find(EpisodeCard)).toHaveLength(randomFilteredResults.length)
   })
 
   test(`matches snapshot`, () => {

packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import Enzyme from 'enzyme'
-import {mount} from 'enzyme'
+import { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-import {getRandomInt, episodes} from './TestUtils'
+import { getRandomInt, episodes } from './TestUtils'
 
 import FilterSidebar from '../src/FilterSidebar'
 

packages/scxa-faceted-search-results/__test__/TestUtils.js

@@ -10,6 +10,11 @@ EpisodeCard.propTypes = {
   title: PropTypes.string.isRequired
 }
 
+const EpisodesHeader = () =>
+  <div>
+    <span>Episode title</span>
+  </div>
+
 // Stolen from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
 const getRandomInt = (min, max) => {
   min = Math.ceil(min)
@@ -172,4 +177,4 @@ const episodes = [
   }
 ]
 
-export {getRandomInt, vindicators, episodes, EpisodeCard}
+export {getRandomInt, vindicators, episodes, EpisodesHeader, EpisodeCard}

packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap

@@ -5,6 +5,11 @@ exports[`FilterList matches snapshot 1`] = `
   <h4>
     
   </h4>
+  <div>
+    <span>
+      Episode title
+    </span>
+  </div>
   <div>
     <div>
       <p>

packages/scxa-faceted-search-results/html/EpisodesHeader.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const EpisodesHeader = ({title}) =>
+  <div style={{textAlign: `center`}}>
+    <b>Episode Title</b>
+  </div>
+
+export default EpisodesHeader

packages/scxa-faceted-search-results/html/facetedSearchContainerDemo.js

@@ -3,6 +3,7 @@
 
   import FacetedSearchContainer from '../src/FacetedSearchContainer'
   import EpisodeCard from './EpisodeCard'
+  import EpisodesHeader from './EpisodesHeader'
 
   const render = (target) => {
     const episodes =  [
@@ -153,6 +154,7 @@
 
     ReactDOM.render(
       <FacetedSearchContainer results={episodes}
+                              ResultsHeaderClass={EpisodesHeader}
                               ResultElementClass={EpisodeCard}
                               checkboxFacetGroups={[`Season`]}
                               resultsMessage={`Search results`}/>,

packages/scxa-faceted-search-results/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-faceted-search",
-  "version": "2.4.0",
+  "version": "2.5.0-beta",
   "description": "Faceted experiments list for Single Cell Expression Atlas gene search results",
   "main": "lib/index.js",
   "scripts": {

packages/scxa-faceted-search-results/src/FacetedSearchContainer.js

@@ -114,7 +114,7 @@ class FacetedSearchContainer extends React.Component {
   render() {
     const {facets} = this.state
 
-    const {checkboxFacetGroups, ResultElementClass, resultsMessage} = this.props
+    const {checkboxFacetGroups, ResultElementClass, ResultsHeaderClass, resultsMessage} = this.props
     const {selectedFacets} = this.state
 
     return(
@@ -127,7 +127,7 @@ class FacetedSearchContainer extends React.Component {
         }
 
         <div className={`small-12 medium-8 large-9 columns`}>
-          <FilterList {...{resultsMessage, ResultElementClass}}
+          <FilterList {...{resultsMessage, ResultElementClass, ResultsHeaderClass}}
                       filteredResults={this._filterResults(selectedFacets)}/>
         </div>
         <ReactTooltip effect={`solid`}/>
@@ -142,8 +142,9 @@ FacetedSearchContainer.propTypes = {
   results: PropTypes.arrayOf(ResultPropTypes).isRequired,
   checkboxFacetGroups: PropTypes.arrayOf(PropTypes.string),
   resultsMessage: PropTypes.string,
-  // Must be a class that extends React.Component, sadly there’s no such prop type :(
+  // Must be classes that extends React.Component, sadly there’s no such prop type :(
   // See also https://stackoverflow.com/questions/45315918/react-proptypes-component-class
+  ResultsHeaderClass: PropTypes.func,
   ResultElementClass: PropTypes.func.isRequired
 }
 

packages/scxa-faceted-search-results/src/FetchLoader.js

@@ -34,7 +34,7 @@ class FetchLoader extends React.Component {
   }
 
   render() {
-    const { ResultElementClass, noResultsMessageFormatter, resultsMessageFormatter } = this.props
+    const { ResultsHeaderClass, ResultElementClass, noResultsMessageFormatter, resultsMessageFormatter } = this.props
     const { data, loading, error } = this.state
 
     return(
@@ -49,6 +49,7 @@ class FetchLoader extends React.Component {
         data.results && data.results.length > 0 ?
           <FacetedSearchContainer
             {...data}
+            ResultsHeaderClass={ResultsHeaderClass}
             ResultElementClass={ResultElementClass}
             resultsMessage={resultsMessageFormatter(data)}/> :
           <div className={`row expanded`}>
@@ -109,6 +110,7 @@ class FetchLoader extends React.Component {
 FetchLoader.propTypes = {
   host: PropTypes.string.isRequired,
   resource: PropTypes.string.isRequired,
+  ResultsHeaderClass: PropTypes.func,
   ResultElementClass: PropTypes.func.isRequired,
   noResultsMessageFormatter: PropTypes.func,
   resultsMessageFormatter: PropTypes.func

packages/scxa-faceted-search-results/src/FilterList.js

@@ -2,20 +2,22 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {ResultPropTypes} from './ResultPropTypes'
 
-const FilterList = ({filteredResults, resultsMessage, ResultElementClass}) => {
+const FilterList = ({filteredResults, resultsMessage, ResultsHeaderClass, ResultElementClass}) => {
   const filteredElements = filteredResults.map((result) => result.element)
 
   return (
     <div>
       <h4>{resultsMessage}</h4>
-      {filteredElements.map((element, index) => <div key={index}><ResultElementClass {...element}/></div>)}
+      { filteredElements.length && ResultsHeaderClass && <ResultsHeaderClass /> }
+      { filteredElements.map((element, index) => <div key={index}><ResultElementClass {...element}/></div>) }
     </div>
   )
 }
 
 FilterList.propTypes = {
   filteredResults: PropTypes.arrayOf(ResultPropTypes).isRequired,
   resultsMessage: PropTypes.string,
+  ResultsHeaderClass: PropTypes.func,
   ResultElementClass: PropTypes.func.isRequired
 }