From 66655adbf5726b4f1d34b69f424ad789f5e082b5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 24 May 2019 11:15:08 +0200
Subject: [PATCH] improve empty search view

---
 client/src/routes/Search.module.scss |  6 ++++++
 client/src/routes/Search.tsx         | 22 +++++++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/routes/Search.module.scss b/client/src/routes/Search.module.scss
index ff69462..eccc96f 100644
--- a/client/src/routes/Search.module.scss
+++ b/client/src/routes/Search.module.scss
@@ -24,3 +24,9 @@
         grid-template-columns: repeat(3, 1fr);
     }
 }
+
+.empty {
+    text-align: center;
+    margin-top: $spacer * 4;
+    color: $brand-grey-light;
+}
diff --git a/client/src/routes/Search.tsx b/client/src/routes/Search.tsx
index fc78562..5593a61 100644
--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import { Link } from 'react-router-dom'
 import queryString from 'query-string'
 import { History, Location } from 'history'
 import { Logger } from '@oceanprotocol/squid'
@@ -123,7 +124,10 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                 ))}
             </div>
         ) : (
-            <div>No data sets found.</div>
+            <div className={styles.empty}>
+                <p>No Data Sets Found.</p>
+                <Link to="/publish">+ Publish A Data Set</Link>
+            </div>
         )
 
     public render() {
@@ -132,16 +136,16 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         return (
             <Route title="Search" wide>
                 <Content wide>
-                    {totalResults > 0 && (
-                        <h2
-                            className={styles.resultsTitle}
-                            dangerouslySetInnerHTML={{
-                                __html: `${totalResults} results for <span>${decodeURIComponent(
+                    {!this.state.isLoading && (
+                        <h2 className={styles.resultsTitle}>
+                            {totalResults} results for{' '}
+                            <span>
+                                {decodeURIComponent(
                                     this.state.searchTerm ||
                                         this.state.searchCategories
-                                )}</span>`
-                            }}
-                        />
+                                )}
+                            </span>
+                        </h2>
                     )}
                     {this.renderResults()}