From ff949c6a674117ce51388d0ac191362f735db966 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 1 Jul 2020 18:13:32 +0200 Subject: [PATCH] search & asset teaser refactor --- src/components/molecules/AssetTeaser.tsx | 87 ++++++++----------- src/components/organisms/AssetList.tsx | 57 +++++++----- .../index.module.css} | 0 src/components/templates/Search/index.tsx | 53 +++++++++++ .../templates/{Search.tsx => Search/utils.ts} | 59 +------------ tests/unit/pages/search.test.tsx | 2 +- 6 files changed, 130 insertions(+), 128 deletions(-) rename src/components/templates/{Search.module.css => Search/index.module.css} (100%) create mode 100644 src/components/templates/Search/index.tsx rename src/components/templates/{Search.tsx => Search/utils.ts} (52%) diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 4e6f311a0..b90b2f198 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -1,72 +1,61 @@ import React from 'react' -import { DDO } from '@oceanprotocol/squid' import { Link } from 'gatsby' import Dotdotdot from 'react-dotdotdot' -import { - AdditionalInformationMarket, - MetaDataMarket -} from '../../@types/MetaData' +import { MetaDataMarket } from '../../@types/MetaData' import Tags from '../atoms/Tags' import Price from '../atoms/Price' import styles from './AssetTeaser.module.css' import Rating from '../atoms/Rating' declare type AssetTeaserProps = { - ddo: Partial + did: string + metadata: MetaDataMarket } -const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { - const { attributes } = ddo.findServiceByType('metadata') - const { name, price } = attributes.main +const AssetTeaser: React.FC = ({ + did, + metadata +}: AssetTeaserProps) => { + const { name, price } = metadata.main - let description - let copyrightHolder - let tags - let categories - let access + const { + description, + copyrightHolder, + tags, + categories, + access + } = metadata.additionalInformation - if (attributes && attributes.additionalInformation) { - ;({ - description, - copyrightHolder, - tags, - categories, - access - } = attributes.additionalInformation as AdditionalInformationMarket) - } - - const { curation } = attributes as MetaDataMarket + const { curation } = metadata return ( ) diff --git a/src/components/organisms/AssetList.tsx b/src/components/organisms/AssetList.tsx index c58397e7b..7f92635c4 100644 --- a/src/components/organisms/AssetList.tsx +++ b/src/components/organisms/AssetList.tsx @@ -5,6 +5,7 @@ import shortid from 'shortid' import Pagination from '../molecules/Pagination' import { updateQueryStringParameter } from '../../utils' import styles from './AssetList.module.css' +import { MetaDataMarket } from '../../@types/MetaData' declare type AssetListProps = { queryResult: QueryResult @@ -13,40 +14,50 @@ declare type AssetListProps = { const AssetList: React.FC = ({ queryResult }) => { // Construct the urls on the pagination links. This is only for UX, // since the links are no they will not work by itself. - function hrefBuilder(pageIndex: number) { - const newUrl = updateQueryStringParameter( - router.asPath, - 'page', - `${pageIndex}` - ) - return newUrl - } + // function hrefBuilder(pageIndex: number) { + // const newUrl = updateQueryStringParameter( + // router.asPath, + // 'page', + // `${pageIndex}` + // ) + // return newUrl + // } - // This is what iniitates a new search with new `page` - // url parameter - function onPageChange(selected: number) { - const newUrl = updateQueryStringParameter( - router.asPath, - 'page', - `${selected + 1}` - ) - return router.push(newUrl) - } + // // This is what iniitates a new search with new `page` + // // url parameter + // function onPageChange(selected: number) { + // const newUrl = updateQueryStringParameter( + // router.asPath, + // 'page', + // `${selected + 1}` + // ) + // return router.push(newUrl) + // } return ( <>
{queryResult.results && - queryResult.results.map((ddo) => ( - - ))} + queryResult.results.map((ddo) => { + const { attributes }: MetaDataMarket = ddo.findServiceByType( + 'metadata' + ) + + return ( + + ) + })}
- + /> */} ) } diff --git a/src/components/templates/Search.module.css b/src/components/templates/Search/index.module.css similarity index 100% rename from src/components/templates/Search.module.css rename to src/components/templates/Search/index.module.css diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx new file mode 100644 index 000000000..859d7c1e6 --- /dev/null +++ b/src/components/templates/Search/index.tsx @@ -0,0 +1,53 @@ +import React, { ReactElement, useState, useEffect } from 'react' +import { QueryResult } from '@oceanprotocol/squid/dist/node/aquarius/Aquarius' +import SearchBar from '../../molecules/SearchBar' +import AssetList from '../../organisms/AssetList' +import { SearchPriceFilter } from '../../molecules/SearchPriceFilter' + +import styles from './index.module.css' +import queryString from 'query-string' +import { getResults } from './utils' + +export declare type SearchPageProps = { + text: string | string[] + tag: string | string[] + queryResult: QueryResult +} + +export default function SearchPage({ + location +}: { + location: Location +}): ReactElement { + const parsed = queryString.parse(location.search) + const { text, tag } = parsed + const [queryResult, setQueryResult] = useState() + + useEffect(() => { + async function initSearch() { + const results = await getResults(parsed) + setQueryResult(results) + } + initSearch() + }, []) + + return ( +
+
+ {text && } +
+ + + +
+ {queryResult && queryResult.results.length > 0 ? ( + + ) : ( +
No results found.
+ )} +
+
+ ) +} diff --git a/src/components/templates/Search.tsx b/src/components/templates/Search/utils.ts similarity index 52% rename from src/components/templates/Search.tsx rename to src/components/templates/Search/utils.ts index 7ed7b8ff0..6f380f13a 100644 --- a/src/components/templates/Search.tsx +++ b/src/components/templates/Search/utils.ts @@ -1,23 +1,10 @@ -import React, { ReactElement, useState, useEffect } from 'react' import { - QueryResult, - SearchQuery + SearchQuery, + QueryResult } from '@oceanprotocol/squid/dist/node/aquarius/Aquarius' -import SearchBar from '../molecules/SearchBar' -import AssetList from '../organisms/AssetList' -import { SearchPriceFilter } from '../molecules/SearchPriceFilter' - -import styles from './Search.module.css' -import { priceQueryParamToWei } from '../../utils' +import { priceQueryParamToWei } from '../../../utils' import { Aquarius, Logger } from '@oceanprotocol/squid' -import { config } from '../../config/ocean' -import queryString from 'query-string' - -export declare type SearchPageProps = { - text: string | string[] - tag: string | string[] - queryResult: QueryResult -} +import { config } from '../../../config/ocean' export function getSearchQuery( page?: string | string[], @@ -72,41 +59,3 @@ export async function getResults(params: any): Promise { return queryResult } - -export default function SearchPage({ - location -}: { - location: Location -}): ReactElement { - const parsed = queryString.parse(location.search) - const { text, tag } = parsed - const [queryResult, setQueryResult] = useState() - - useEffect(() => { - async function initSearch() { - const results = await getResults(parsed) - setQueryResult(results) - } - initSearch() - }, []) - - return ( -
-
- {text && } -
- - - -
- {queryResult && queryResult.results.length > 0 ? ( - - ) : ( -
No results found.
- )} -
-
- ) -} diff --git a/tests/unit/pages/search.test.tsx b/tests/unit/pages/search.test.tsx index 0964c9ef2..7eec7fa9f 100644 --- a/tests/unit/pages/search.test.tsx +++ b/tests/unit/pages/search.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' -import Search from '../../../src/components/templates/search' +import Search from '../../../src/components/templates/Search' import { createHistory, createMemorySource,