Merge pull request #216 from oceanprotocol/fix/search-duplication

Fix search code duplication

client/src/components/molecules/SearchResults.module.scss

@@ -0,0 +1,36 @@
+@import '../../styles/variables';
+
+.results {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer;
+    max-width: calc(18rem + #{$spacer * 2});
+    margin: auto;
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--small) {
+        margin-left: 0;
+        margin-right: 0;
+        max-width: none;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.simple {
+    composes: results;
+    margin-top: 0;
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.empty {
+    text-align: center;
+    margin-top: $spacer * 4;
+    color: $brand-grey-light;
+}

client/src/components/molecules/SearchResults.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { DDO } from '@oceanprotocol/squid'
+import Spinner from '../atoms/Spinner'
+import AssetTeaser from './AssetTeaser'
+import styles from './SearchResults.module.scss'
+
+export interface SearchResultsState {
+    results: DDO[]
+    totalResults: number
+    offset: number
+    totalPages: number
+    currentPage: number
+    isLoading: boolean
+}
+
+export default function SearchResults({
+    isLoading,
+    results,
+    simpleGrid
+}: {
+    isLoading: boolean
+    results: DDO[]
+    simpleGrid?: boolean
+}) {
+    return isLoading ? (
+        <Spinner message="Searching..." />
+    ) : results && results.length ? (
+        <div className={simpleGrid ? styles.simple : styles.results}>
+            {results.map((asset: any) => (
+                <AssetTeaser key={asset.id} asset={asset} />
+            ))}
+        </div>
+    ) : (
+        <div className={styles.empty}>
+            <p>No Data Sets Found.</p>
+            <Link to="/publish">+ Publish A Data Set</Link>
+        </div>
+    )
+}

client/src/components/organisms/ChannelTeaser.module.scss

@@ -74,13 +74,3 @@
 .channelTeaser {
     color: $brand-grey;
 }
-
-.channelResults {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-
-    @media (min-width: $break-point--small) {
-        grid-template-columns: 1fr 1fr;
-    }
-}

client/src/components/organisms/ChannelTeaser.tsx

@@ -1,19 +1,18 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { User } from '../../context'
-import { Logger } from '@oceanprotocol/squid'
-import Spinner from '../atoms/Spinner'
-import AssetTeaser from '../molecules/AssetTeaser'
+import { Logger, DDO } from '@oceanprotocol/squid'
+import CategoryImage from '../atoms/CategoryImage'
+import SearchResults from '../molecules/SearchResults'
 import styles from './ChannelTeaser.module.scss'
 import channels from '../../data/channels.json'
-import CategoryImage from '../atoms/CategoryImage'
 
 interface ChannelTeaserProps {
     channel: string
 }
 
 interface ChannelTeaserState {
-    channelAssets?: any[]
+    channelAssets?: DDO[]
     isLoadingChannel?: boolean
 }
 
@@ -81,17 +80,11 @@ export default class ChannelTeaser extends Component<
                     </header>
                 </div>
                 <div>
-                    {isLoadingChannel ? (
-                        <Spinner message="Loading..." />
-                    ) : channelAssets && channelAssets.length ? (
-                        <div className={styles.channelResults}>
-                            {channelAssets.map((asset: any) => (
-                                <AssetTeaser key={asset.id} asset={asset} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div>No data sets found.</div>
-                    )}
+                    <SearchResults
+                        isLoading={isLoadingChannel}
+                        results={channelAssets}
+                        simpleGrid
+                    />
                 </div>
             </div>
         )

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

@@ -1,21 +1 @@
 @import '../../styles/variables';
-
-.results {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-    max-width: calc(18rem + #{$spacer * 2});
-    margin: auto;
-    margin-top: $spacer * 2;
-
-    @media (min-width: $break-point--small) {
-        margin-left: 0;
-        margin-right: 0;
-        max-width: none;
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media (min-width: $break-point--medium) {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}

client/src/components/templates/Channel.tsx

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
 import { History } from 'history'
-import Spinner from '../../components/atoms/Spinner'
 import Route from '../../components/templates/Route'
 import { User } from '../../context'
-import AssetTeaser from '../molecules/AssetTeaser'
 import Pagination from '../../components/molecules/Pagination'
-import styles from './Channel.module.scss'
+import SearchResults, { SearchResultsState } from '../molecules/SearchResults'
 import Content from '../../components/atoms/Content'
 import channels from '../../data/channels.json'
 import CategoryImage from '../atoms/CategoryImage'
@@ -20,13 +18,7 @@ interface ChannelProps {
     }
 }
 
-interface ChannelState {
-    results: any[]
-    totalResults: number
-    offset: number
-    totalPages: number
-    currentPage: number
-    isLoading: boolean
+interface ChannelState extends SearchResultsState {
     title: string
     description: string
 }
@@ -91,21 +83,15 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         await this.getChannelAssets()
     }
 
-    public renderResults = () =>
-        this.state.isLoading ? (
-            <Spinner message="Searching..." />
-        ) : this.state.results && this.state.results.length ? (
-            <div className={styles.results}>
-                {this.state.results.map((asset: any) => (
-                    <AssetTeaser key={asset.id} asset={asset} />
-                ))}
-            </div>
-        ) : (
-            <div>No data sets found.</div>
-        )
-
     public render() {
-        const { title, description, totalPages, currentPage } = this.state
+        const {
+            title,
+            description,
+            totalPages,
+            currentPage,
+            isLoading,
+            results
+        } = this.state
 
         return (
             <Route
@@ -114,7 +100,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
                 image={<CategoryImage header category={title} />}
             >
                 <Content wide>
-                    {this.renderResults()}
+                    <SearchResults isLoading={isLoading} results={results} />
 
                     <Pagination
                         totalPages={totalPages}

client/src/routes/Search.module.scss

@@ -10,23 +10,3 @@
         color: $brand-grey-dark;
     }
 }
-
-.results {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: $spacer;
-
-    @media (min-width: $break-point--small) {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media (min-width: $break-point--medium) {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-.empty {
-    text-align: center;
-    margin-top: $spacer * 4;
-    color: $brand-grey-light;
-}

client/src/routes/Search.tsx

@@ -1,12 +1,12 @@
 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'
-import Spinner from '../components/atoms/Spinner'
+import SearchResults, {
+    SearchResultsState
+} from '../components/molecules/SearchResults'
 import Route from '../components/templates/Route'
 import { User } from '../context'
-import AssetTeaser from '../components/molecules/AssetTeaser'
 import Pagination from '../components/molecules/Pagination'
 import styles from './Search.module.scss'
 import Content from '../components/atoms/Content'
@@ -17,13 +17,7 @@ interface SearchProps {
     history: History
 }
 
-interface SearchState {
-    results: any[]
-    totalResults: number
-    offset: number
-    totalPages: number
-    currentPage: number
-    isLoading: boolean
+interface SearchState extends SearchResultsState {
     searchTerm: string
     searchCategories: string
 }
@@ -116,40 +110,32 @@ class Search extends PureComponent<SearchProps, SearchState> {
         await this.searchAssets()
     }
 
-    public renderResults = () =>
-        this.state.isLoading ? (
-            <Spinner message="Searching..." />
-        ) : this.state.results && this.state.results.length ? (
-            <div className={styles.results}>
-                {this.state.results.map((asset: any) => (
-                    <AssetTeaser key={asset.id} asset={asset} />
-                ))}
-            </div>
-        ) : (
-            <div className={styles.empty}>
-                <p>No Data Sets Found.</p>
-                <Link to="/publish">+ Publish A Data Set</Link>
-            </div>
-        )
-
     public render() {
-        const { totalResults, totalPages, currentPage } = this.state
+        const {
+            totalResults,
+            totalPages,
+            currentPage,
+            isLoading,
+            results,
+            searchTerm,
+            searchCategories
+        } = this.state
 
         return (
             <Route title="Search" wide>
                 <Content wide>
-                    {!this.state.isLoading && (
+                    {!isLoading && (
                         <h2 className={styles.resultsTitle}>
                             {totalResults} results for{' '}
                             <span>
                                 {decodeURIComponent(
-                                    this.state.searchTerm ||
-                                        this.state.searchCategories
+                                    searchTerm || searchCategories
                                 )}
                             </span>
                         </h2>
                     )}
-                    {this.renderResults()}
+
+                    <SearchResults isLoading={isLoading} results={results} />
 
                     <Pagination
                         totalPages={totalPages}