feat(search): ✨ add option to show search stats

config/config.yml

@@ -73,6 +73,7 @@ features:
     debounceTime: 380
     snippetLength: 23
     hitsPerPage: 10
+    showStats: true
     pagination:
       enabled: true
       totalPages: 10

config/default.js

@@ -61,6 +61,7 @@ module.exports = {
       debounceTime: 380,
       snippetLength: 22,
       hitsPerPage: 10,
+      showStats: true,
       pagination: {
         enabled: true,
         totalPages: 10,

src/components/Search/Stats.js

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { paddingLeftRight } from './styles';
+
+const Token = styled.span`
+font-weight: bold;
+`;
+
+const StatsWrapper = styled.p`
+color: ${(props) => props.theme.search.font.base};
+font-size: 11px;
+text-align: right;
+margin-top: 10px;
+`;
+
+const Stats = ({ hits, processingTimeMS }) => (
+  <StatsWrapper css={paddingLeftRight}>
+    Found
+    <Token> {hits}</Token> results in
+    <Token> {processingTimeMS}</Token> ms
+  </StatsWrapper>
+);
+
+export default Stats;

src/components/Search/algolia/index.js

@@ -6,15 +6,15 @@ import {
   Configure,
   connectStateResults,
 } from 'react-instantsearch-dom';
-import algoliasearch from 'algoliasearch/lite'
+import algoliasearch from 'algoliasearch/lite';
 import { HitsWrapper } from '../Hits';
 import config from 'config';
 import Input from './input';
-import { PageHit }  from './hitComps';
+import { PageHit } from './hitComps';
 import styled from '@emotion/styled';
 import SearchStatus from '../Status';
 import Pagination from './pagination';
- 
+import Stats from './stats';
 
 const Root = styled.div`
   position: relative;
@@ -30,10 +30,9 @@ const Root = styled.div`
 //     (searching && `Searching...`) || (res && res.nbHits === 0 && `No results for '${state.query}'`)
 // );
 
-const Results = connectStateResults(
-  ({ searching, searchState: state, searchResults: res }) =>
-    <SearchStatus noHits={res && res.nbHits === 0} searching={searching} query={state.query}/>
-);
+const Results = connectStateResults(({ searching, searchState: state, searchResults: res }) => (
+  <SearchStatus noHits={res && res.nbHits === 0} searching={searching} query={state.query} />
+));
 
 class Algolia extends React.Component {
   state = {
@@ -56,6 +55,7 @@ class Algolia extends React.Component {
   render() {
     const ref = this.ref;
     const focus = this.focus;
+    const showResults = this.state.query.length > 1 && this.state.ready && this.state.focus;
     return (
       <InstantSearch
         searchClient={this.searchClient}
@@ -69,19 +69,20 @@ class Algolia extends React.Component {
           {...{ focus }}
         />
 
+        {showResults && config.features.search.showStats ? <Stats /> : null}
+        <Results />
         <HitsWrapper>
           <Index key={this.index} indexName={this.index}>
-            <Results />
-            {this.state.query.length > 1 && this.state.ready && this.state.focus ? (
-              <Hits hitComponent={PageHit} />
+            {showResults ? (
+              <>
+                <Hits hitComponent={PageHit} />
+              </>
             ) : (
               ''
             )}
           </Index>
         </HitsWrapper>
-        {this.state.query.length > 1 &&
-        this.state.ready &&
-        config.features.search.pagination.enabled ? (
+        {showResults && config.features.search.pagination.enabled ? (
           <Pagination
             totalPages={config.features.search.pagination.totalPages}
             showPrevious={config.features.search.pagination.showPrevious}

src/components/Search/algolia/stats.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { connectStats } from 'react-instantsearch-dom';
+import { SearchStats } from '../';
+export default connectStats(({ nbHits, ...rest }) => <SearchStats hits={nbHits} {...rest} />);

src/components/Search/index.js

@@ -1,3 +1,4 @@
 export { SearchInput, SidebarSearchInput } from './Input';
 export { default as Pagination } from './Pagination';
-export { default as SearchSidebar } from './Sidebar';
+export { default as SearchSidebar } from './Sidebar';
+export { default as SearchStats } from './Stats';