search tweaks

src/components/molecules/Pagination.tsx

@@ -22,18 +22,16 @@ export default function Pagination({
   }
 
   useEffect(() => {
-    if (!totalPages || totalPages < 2) return
-
     const mq = window.matchMedia('(min-width: 600px)')
     viewportChange(mq)
-    mq.addListener(viewportChange)
+    mq.addEventListener('change', viewportChange)
 
     return () => {
-      mq.removeListener(viewportChange)
+      mq.removeEventListener('change', viewportChange)
     }
-  }, [totalPages])
+  }, [])
 
-  return (
+  return totalPages && totalPages > 1 ? (
     <ReactPaginate
       pageCount={totalPages}
       // react-pagination starts counting at 0, we start at 1
@@ -55,5 +53,5 @@ export default function Pagination({
       disabledClassName={styles.prevNextDisabled}
       breakLinkClassName={styles.break}
     />
-  )
+  ) : null
 }

src/components/organisms/AssetContent/index.tsx

@@ -60,7 +60,7 @@ export default function AssetContent({
             {metadata?.additionalInformation?.categories?.length && (
               <p>
                 <Link
-                  to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
+                  to={`/search?categories=${metadata?.additionalInformation?.categories[0]}`}
                 >
                   {metadata?.additionalInformation?.categories[0]}
                 </Link>

src/components/pages/Home.module.css

@@ -12,3 +12,7 @@
   font-size: var(--font-size-large);
   color: var(--color-secondary);
 }
+
+.latest [class*='button'] {
+  margin-top: var(--spacer);
+}

src/components/pages/Home.tsx

@@ -10,6 +10,7 @@ import {
 import Container from '../atoms/Container'
 import Loader from '../atoms/Loader'
 import { useOcean } from '@oceanprotocol/react'
+import Button from '../atoms/Button'
 
 const queryHighest = {
   page: 1,
@@ -109,6 +110,11 @@ export default function HomePage(): ReactElement {
         ) : (
           queryResultLatest && <AssetList queryResult={queryResultLatest} />
         )}
+        {queryResultLatest?.results.length === 9 && (
+          <Button style="text" to="/search">
+            All data sets →
+          </Button>
+        )}
       </section>
     </>
   )

src/components/templates/Search/index.tsx

@@ -8,12 +8,6 @@ import { getResults } from './utils'
 import Loader from '../../atoms/Loader'
 import { useOcean } from '@oceanprotocol/react'
 
-export declare type SearchPageProps = {
-  text: string | string[]
-  tag: string | string[]
-  queryResult: QueryResult
-}
-
 export default function SearchPage({
   location
 }: {
@@ -28,7 +22,6 @@ export default function SearchPage({
   useEffect(() => {
     async function initSearch() {
       setLoading(true)
-      console.log(parsed)
       const queryResult = await getResults(parsed, config.metadataCacheUri)
       setQueryResult(queryResult)
       setLoading(false)

src/components/templates/Search/utils.ts

@@ -8,20 +8,22 @@ export function getSearchQuery(
   page?: string | string[],
   offset?: string | string[],
   text?: string | string[],
-  tags?: string | string[]
+  tags?: string | string[],
+  categories?: string | string[]
 ): SearchQuery {
   return {
     page: Number(page) || 1,
     offset: Number(offset) || 20,
     query: {
       text,
-      tags: tags ? [tags] : undefined
+      tags: tags ? [tags] : undefined,
+      categories: categories ? [categories] : undefined
     },
     sort: {
       created: -1
     }
 
-    // Something in squid-js is weird when using 'tags: [tag]'
+    // Something in ocean.js is weird when using 'tags: [tag]'
     // which is the only way the query actually returns desired results.
     // But it doesn't follow 'SearchQuery' interface so we have to assign
     // it here.
@@ -29,16 +31,20 @@ export function getSearchQuery(
 }
 
 export async function getResults(
-  params: { text?: string; tags?: string; page?: string; offset?: string },
+  params: {
+    text?: string
+    tags?: string
+    categories?: string
+    page?: string
+    offset?: string
+  },
   metadataCacheUri: string
 ): Promise<QueryResult> {
-  const { text, tags, page, offset } = params
+  const { text, tags, page, offset, categories } = params
 
   const metadataCache = new MetadataCache(metadataCacheUri, Logger)
-  const sQuery = getSearchQuery(page, offset, text, tags)
-  console.log(sQuery)
   const queryResult = await metadataCache.queryMetadata(
-    getSearchQuery(page, offset, text, tags)
+    getSearchQuery(page, offset, text, tags, categories)
   )
 
   return queryResult

src/pages/search.tsx

@@ -6,10 +6,14 @@ import queryString from 'query-string'
 
 export default function PageGatsbySearch(props: PageProps): ReactElement {
   const parsed = queryString.parse(props.location.search)
-  const { text, tags } = parsed
+  const { text, tags, categories } = parsed
+  const searchValue = text || tags || categories
 
   return (
-    <Layout title={`Search for '${text || tags}'`} uri={props.uri}>
+    <Layout
+      title={`Search for ${searchValue || 'all data sets'}`}
+      uri={props.uri}
+    >
       <PageSearch location={props.location} />
     </Layout>
   )