displayed search results count (#312)

* displayed search results count

* updated unit test for Search component

* account for singular & plural, display message if there's no result

src/components/templates/Search/index.tsx

@@ -9,9 +9,11 @@ import Loader from '../../atoms/Loader'
 import { useOcean } from '@oceanprotocol/react'
 
 export default function SearchPage({
-  location
+  location,
+  setTotalResults
 }: {
   location: Location
+  setTotalResults: (totalResults: number) => void
 }): ReactElement {
   const { config } = useOcean()
   const parsed = queryString.parse(location.search)
@@ -24,8 +26,10 @@ export default function SearchPage({
 
     async function initSearch() {
       setLoading(true)
+      setTotalResults(undefined)
       const queryResult = await getResults(parsed, config.metadataCacheUri)
       setQueryResult(queryResult)
+      setTotalResults(queryResult.totalResults)
       setLoading(false)
     }
     initSearch()
@@ -38,7 +42,6 @@ export default function SearchPage({
           <SearchBar initialValue={(text || owner) as string} />
         )}
       </div>
-
       <div className={styles.results}>
         {loading ? <Loader /> : <AssetQueryList queryResult={queryResult} />}
       </div>

src/pages/search.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import PageSearch from '../components/templates/Search'
 import { PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
@@ -9,6 +9,7 @@ import ethereumAddress from 'ethereum-address'
 export default function PageGatsbySearch(props: PageProps): ReactElement {
   const parsed = queryString.parse(props.location.search)
   const { text, owner, tags, categories } = parsed
+  const [totalResults, setTotalResults] = useState<number>()
 
   const isETHAddress = ethereumAddress.isAddress(text as string)
   const searchValue =
@@ -17,11 +18,25 @@ export default function PageGatsbySearch(props: PageProps): ReactElement {
     categories
   const title = owner
     ? `Published by ${accountTruncate(owner as string)}`
-    : `Search for ${searchValue || 'all data sets'}`
+    : `${
+        totalResults !== undefined
+          ? searchValue
+            ? totalResults === 0
+              ? 'No results'
+              : totalResults +
+                (totalResults > 1 ? ' results' : ' result') +
+                ' for ' +
+                searchValue
+            : totalResults + ' datasets'
+          : 'Searching...'
+      }`
 
   return (
     <Page title={title} uri={props.uri}>
-      <PageSearch location={props.location} />
+      <PageSearch
+        location={props.location}
+        setTotalResults={(totalResults) => setTotalResults(totalResults)}
+      />
     </Page>
   )
 }

tests/unit/pages/search.test.tsx

@@ -10,10 +10,16 @@ import {
 describe('Search', () => {
   it('renders without crashing', async () => {
     const history = createHistory(createMemorySource('/search?text=water'))
+    const setTotalResults = (totalResults: number) => {
+      const results = totalResults
+    }
 
     const { container } = render(
       <LocationProvider history={history}>
-        <Search location={{ search: '?text=water' } as any} />
+        <Search
+          location={{ search: '?text=water' } as any}
+          setTotalResults={(totalResults) => setTotalResults(totalResults)}
+        />
       </LocationProvider>
     )
     expect(container.firstChild).toBeInTheDocument()