Total match count

components/browseArchives/index.js

@@ -17,12 +17,13 @@ class BrowseArchives extends React.Component {
     this.state = {
       term: '',
       debounceTerm: '',
-      searchResults: [null],
+      searchResults: [],
       isSingleInterviewModalOpen: false,
       isInterviewsListModalOpen: false,
       activeSingleInterviewId: 1,
       isSearchActive: false,
       interviewData: this.transformInterviews(InterviewsData),
+      matchedCount: 0,
     };
 
     this.onSearchInputChange = this.onSearchInputChange.bind(this);
@@ -39,7 +40,7 @@ class BrowseArchives extends React.Component {
     this.setState({
       term: event.target.value,
       isSearchActive: true,
-      searchResults: [null],
+      searchResults: [],
     });
 
     if (event.target.value.length === 0) {
@@ -71,9 +72,13 @@ class BrowseArchives extends React.Component {
       return filtered;
     }, []);
 
+    const matchedCount = searchResults
+      .reduce((accumulator, match) => accumulator + match.matchCount, 0);
+
     this.setState({
       searchResults,
       debounceTerm: term,
+      matchedCount,
     });
   }
 
@@ -102,6 +107,8 @@ class BrowseArchives extends React.Component {
     this.setState({
       isSearchActive: false,
       term: '',
+      matchedCount: 0,
+      searchResults: [],
     });
   }
 
@@ -239,6 +246,7 @@ class BrowseArchives extends React.Component {
       searchResults,
       interviewData,
       debounceTerm,
+      matchedCount,
     } = this.state;
 
     return (
@@ -248,6 +256,8 @@ class BrowseArchives extends React.Component {
           clearSearchInput={this.clearSearchInput}
           isSearchActive={isSearchActive}
           term={term}
+          numResults={searchResults.length}
+          numMatchedTerms={matchedCount}
         />
         <div className="browse-content-wrap container">
           <div className="browse-content-left">

components/searchBar/index.js

@@ -28,6 +28,10 @@ const SearchBar = props => (
           )
         }
       </form>
+      {props.numResults > 0 && props.numResults[0] !== null ?
+        // eslint-disable-next-line
+        <p style={{marginTop: '32px'}}>{ props.numMatchedTerms } search term matches | { props.numResults } interviews</p> :
+      ''}
     </div>
   </div>
 );
@@ -37,6 +41,8 @@ SearchBar.propTypes = {
   isSearchActive: PropTypes.bool.isRequired,
   onSearchInputChange: PropTypes.func.isRequired,
   clearSearchInput: PropTypes.func.isRequired,
+  numResults: PropTypes.number.isRequired,
+  numMatchedTerms: PropTypes.number.isRequired,
 };
 
 export default SearchBar;

components/searchResults/index.js

@@ -105,14 +105,11 @@ const SearchResults = (props) => {
                   <img src={`${publicRuntimeConfig.subDirPath}/static/img/right-chevron-icon.svg`} alt="right chevron icon" />
                 </div>
               </div>
-              <p>
-                { interview.matchCount } matches
-              </p>
               {interview.matchingQuestionAnswerPositions ?
               interview.matchingQuestionAnswerPositions.map(match => (
                 <div key={match.index + 1}>
                   <h5>{match.index + 1})&nbsp;
-                    { findQuestion(match) } ({match.count} matches)
+                    { findQuestion(match) }
                   </h5>
                   <div>
                     { Parser(processText(match.answer, match.strpos)) }