From c5ea3b7c8a989b7c9239cc4292de53680b36c06b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 13 Dec 2019 12:22:52 +0100 Subject: [PATCH] fix code duplication --- .../molecules/SearchResults.module.scss | 36 +++++++++++++ .../components/molecules/SearchResults.tsx | 40 ++++++++++++++ .../organisms/ChannelTeaser.module.scss | 10 ---- .../components/organisms/ChannelTeaser.tsx | 25 ++++----- .../components/templates/Channel.module.scss | 20 ------- client/src/components/templates/Channel.tsx | 36 ++++--------- client/src/routes/Search.module.scss | 20 ------- client/src/routes/Search.tsx | 54 +++++++------------ 8 files changed, 116 insertions(+), 125 deletions(-) create mode 100644 client/src/components/molecules/SearchResults.module.scss create mode 100644 client/src/components/molecules/SearchResults.tsx diff --git a/client/src/components/molecules/SearchResults.module.scss b/client/src/components/molecules/SearchResults.module.scss new file mode 100644 index 0000000..7a99603 --- /dev/null +++ b/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; +} diff --git a/client/src/components/molecules/SearchResults.tsx b/client/src/components/molecules/SearchResults.tsx new file mode 100644 index 0000000..22d72de --- /dev/null +++ b/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 ? ( + + ) : results && results.length ? ( +
+ {results.map((asset: any) => ( + + ))} +
+ ) : ( +
+

No Data Sets Found.

+ + Publish A Data Set +
+ ) +} diff --git a/client/src/components/organisms/ChannelTeaser.module.scss b/client/src/components/organisms/ChannelTeaser.module.scss index 01c0d2e..a4fc43a 100644 --- a/client/src/components/organisms/ChannelTeaser.module.scss +++ b/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; - } -} diff --git a/client/src/components/organisms/ChannelTeaser.tsx b/client/src/components/organisms/ChannelTeaser.tsx index f419dae..0625753 100644 --- a/client/src/components/organisms/ChannelTeaser.tsx +++ b/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<
- {isLoadingChannel ? ( - - ) : channelAssets && channelAssets.length ? ( -
- {channelAssets.map((asset: any) => ( - - ))} -
- ) : ( -
No data sets found.
- )} +
) diff --git a/client/src/components/templates/Channel.module.scss b/client/src/components/templates/Channel.module.scss index 34d04dd..e2725f7 100644 --- a/client/src/components/templates/Channel.module.scss +++ b/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); - } -} diff --git a/client/src/components/templates/Channel.tsx b/client/src/components/templates/Channel.tsx index a0b25fe..65515b8 100644 --- a/client/src/components/templates/Channel.tsx +++ b/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 { await this.getChannelAssets() } - public renderResults = () => - this.state.isLoading ? ( - - ) : this.state.results && this.state.results.length ? ( -
- {this.state.results.map((asset: any) => ( - - ))} -
- ) : ( -
No data sets found.
- ) - public render() { - const { title, description, totalPages, currentPage } = this.state + const { + title, + description, + totalPages, + currentPage, + isLoading, + results + } = this.state return ( { image={} > - {this.renderResults()} + { const { text, page, categories } = queryString.parse(search) if (text) { - await this.setState({ + this.setState({ searchTerm: decodeURIComponent(`${text}`) }) } if (categories) { - await this.setState({ + this.setState({ searchCategories: decodeURIComponent(`${categories}`) }) } @@ -61,7 +55,7 @@ class Search extends PureComponent { // switch to respective page if query string is present if (page) { const currentPage = Number(page) - await this.setState({ currentPage }) + this.setState({ currentPage }) } this.searchAssets() @@ -116,40 +110,32 @@ class Search extends PureComponent { await this.searchAssets() } - public renderResults = () => - this.state.isLoading ? ( - - ) : this.state.results && this.state.results.length ? ( -
- {this.state.results.map((asset: any) => ( - - ))} -
- ) : ( -
-

No Data Sets Found.

- + Publish A Data Set -
- ) - public render() { - const { totalResults, totalPages, currentPage } = this.state + const { + totalResults, + totalPages, + currentPage, + isLoading, + results, + searchTerm, + searchCategories + } = this.state return ( - {!this.state.isLoading && ( + {!isLoading && (

{totalResults} results for{' '} {decodeURIComponent( - this.state.searchTerm || - this.state.searchCategories + searchTerm || searchCategories )}

)} - {this.renderResults()} + +