search results tweaks

client/src/components/templates/Route.module.scss

@@ -3,13 +3,21 @@
 .header {
     margin-top: $spacer;
     margin-bottom: $spacer;
+}
 
-    h1 {
+.title {
-        margin: 0;
+    margin: 0;
-    }
+}
 
-    p {
+.description {
-        margin-top: $spacer / 2;
+    margin-top: $spacer / 2;
-        font-size: $font-size-large;
+    font-size: $font-size-large;
+}
+
+.titleReverse {
+    color: $brand-grey-light;
+
+    span {
+        color: $brand-grey-dark;
     }
 }

client/src/components/templates/Route.tsx

@@ -7,12 +7,14 @@ import meta from '../../data/meta.json'
 const Route = ({
     title,
     description,
+    titleReverse,
     wide,
     children,
     className
 }: {
     title: string
     description?: string
+    titleReverse?: boolean
     children: any
     wide?: boolean
     className?: string
@@ -26,8 +28,22 @@ const Route = ({
         <Content wide={wide}>
             <article>
                 <header className={styles.header}>
-                    <h1>{title}</h1>
+                    <h1
-                    {description && <p>{description}</p>}
+                        className={
+                            titleReverse ? styles.titleReverse : styles.title
+                        }
+                        dangerouslySetInnerHTML={{
+                            __html: title
+                        }}
+                    />
+                    {description && (
+                        <p
+                            className={styles.description}
+                            dangerouslySetInnerHTML={{
+                                __html: description
+                            }}
+                        />
+                    )}
                 </header>
 
                 {children}

client/src/routes/Search.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import queryString from 'query-string'
+import { Logger } from '@oceanprotocol/squid'
 import Spinner from '../components/atoms/Spinner'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
@@ -21,8 +22,21 @@ export default class Search extends Component<SearchProps, SearchState> {
 
     public async componentDidMount() {
         const searchParams = queryString.parse(this.props.location.search)
+
+        const queryRequest = {
+            offset: 500,
+            page: 1,
+            query: {
+                text: searchParams.text
+            },
+            sort: {
+                text: 1
+            }
+        }
+
         const assets = await this.context.ocean.assets.search(searchParams.text)
         this.setState({ results: assets, isLoading: false })
+        Logger.log(`Loaded ${assets.length} assets`)
     }
 
     public renderResults = () =>
@@ -39,8 +53,14 @@ export default class Search extends Component<SearchProps, SearchState> {
         )
 
     public render() {
+        const searchTerm = queryString.parse(this.props.location.search).text
+
         return (
-            <Route title="Search Results" wide>
+            <Route
+                title={`Search Results for <span>${searchTerm}</span>`}
+                titleReverse
+                wide
+            >
                 {this.renderResults()}
             </Route>
         )