From 396048fe0bf91b3e4b07bfd767d501e3dfc7f2ea Mon Sep 17 00:00:00 2001
From: Mateusz Filipowicz <matfilipowicz@gmail.com>
Date: Sat, 13 Jun 2020 19:25:31 +0200
Subject: [PATCH] feat(search): :sparkles: add option to show search stats

---
 config/config.yml                      |  1 +
 config/default.js                      |  1 +
 src/components/Search/Stats.js         | 23 ++++++++++++++++++++++
 src/components/Search/algolia/index.js | 27 +++++++++++++-------------
 src/components/Search/algolia/stats.js |  4 ++++
 src/components/Search/index.js         |  3 ++-
 6 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Search/Stats.js
 create mode 100644 src/components/Search/algolia/stats.js

diff --git a/config/config.yml b/config/config.yml
index d5410753..88899c58 100644
--- a/config/config.yml
+++ b/config/config.yml
@@ -73,6 +73,7 @@ features:
     debounceTime: 380
     snippetLength: 23
     hitsPerPage: 10
+    showStats: true
     pagination:
       enabled: true
       totalPages: 10
diff --git a/config/default.js b/config/default.js
index b3bd81b6..ca7926bc 100644
--- a/config/default.js
+++ b/config/default.js
@@ -61,6 +61,7 @@ module.exports = {
       debounceTime: 380,
       snippetLength: 22,
       hitsPerPage: 10,
+      showStats: true,
       pagination: {
         enabled: true,
         totalPages: 10,
diff --git a/src/components/Search/Stats.js b/src/components/Search/Stats.js
new file mode 100644
index 00000000..e67d0255
--- /dev/null
+++ b/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;
diff --git a/src/components/Search/algolia/index.js b/src/components/Search/algolia/index.js
index 1aba8a84..b2bdbfa4 100644
--- a/src/components/Search/algolia/index.js
+++ b/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}
diff --git a/src/components/Search/algolia/stats.js b/src/components/Search/algolia/stats.js
new file mode 100644
index 00000000..ca6a62e8
--- /dev/null
+++ b/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} />);
diff --git a/src/components/Search/index.js b/src/components/Search/index.js
index e0447879..415c7ecc 100644
--- a/src/components/Search/index.js
+++ b/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';
\ No newline at end of file
+export { default as SearchSidebar } from './Sidebar';
+export { default as SearchStats } from './Stats';
\ No newline at end of file