From c2a247b605df46c3f05e59f172dbf5eb197a43d9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 24 Oct 2020 17:39:51 +0200 Subject: [PATCH] search tweaks --- src/components/molecules/Pagination.tsx | 12 +++++----- .../organisms/AssetContent/index.tsx | 2 +- src/components/pages/Home.module.css | 4 ++++ src/components/pages/Home.tsx | 6 +++++ src/components/templates/Search/index.tsx | 7 ------ src/components/templates/Search/utils.ts | 22 ++++++++++++------- src/pages/search.tsx | 8 +++++-- 7 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/components/molecules/Pagination.tsx b/src/components/molecules/Pagination.tsx index 067879532..47c2d842c 100644 --- a/src/components/molecules/Pagination.tsx +++ b/src/components/molecules/Pagination.tsx @@ -22,18 +22,16 @@ export default function Pagination({ } useEffect(() => { - if (!totalPages || totalPages < 2) return - const mq = window.matchMedia('(min-width: 600px)') viewportChange(mq) - mq.addListener(viewportChange) + mq.addEventListener('change', viewportChange) return () => { - mq.removeListener(viewportChange) + mq.removeEventListener('change', viewportChange) } - }, [totalPages]) + }, []) - return ( + return totalPages && totalPages > 1 ? ( - ) + ) : null } diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx index f4b948e85..3d3419c12 100644 --- a/src/components/organisms/AssetContent/index.tsx +++ b/src/components/organisms/AssetContent/index.tsx @@ -60,7 +60,7 @@ export default function AssetContent({ {metadata?.additionalInformation?.categories?.length && (

{metadata?.additionalInformation?.categories[0]} diff --git a/src/components/pages/Home.module.css b/src/components/pages/Home.module.css index da9107e40..633e6fa94 100644 --- a/src/components/pages/Home.module.css +++ b/src/components/pages/Home.module.css @@ -12,3 +12,7 @@ font-size: var(--font-size-large); color: var(--color-secondary); } + +.latest [class*='button'] { + margin-top: var(--spacer); +} diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 1607b948d..fea262682 100644 --- a/src/components/pages/Home.tsx +++ b/src/components/pages/Home.tsx @@ -10,6 +10,7 @@ import { import Container from '../atoms/Container' import Loader from '../atoms/Loader' import { useOcean } from '@oceanprotocol/react' +import Button from '../atoms/Button' const queryHighest = { page: 1, @@ -109,6 +110,11 @@ export default function HomePage(): ReactElement { ) : ( queryResultLatest && )} + {queryResultLatest?.results.length === 9 && ( + + )} ) diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx index 629a19392..c7bed53b0 100644 --- a/src/components/templates/Search/index.tsx +++ b/src/components/templates/Search/index.tsx @@ -8,12 +8,6 @@ import { getResults } from './utils' import Loader from '../../atoms/Loader' import { useOcean } from '@oceanprotocol/react' -export declare type SearchPageProps = { - text: string | string[] - tag: string | string[] - queryResult: QueryResult -} - export default function SearchPage({ location }: { @@ -28,7 +22,6 @@ export default function SearchPage({ useEffect(() => { async function initSearch() { setLoading(true) - console.log(parsed) const queryResult = await getResults(parsed, config.metadataCacheUri) setQueryResult(queryResult) setLoading(false) diff --git a/src/components/templates/Search/utils.ts b/src/components/templates/Search/utils.ts index 0ae7973ea..25f5a98d0 100644 --- a/src/components/templates/Search/utils.ts +++ b/src/components/templates/Search/utils.ts @@ -8,20 +8,22 @@ export function getSearchQuery( page?: string | string[], offset?: string | string[], text?: string | string[], - tags?: string | string[] + tags?: string | string[], + categories?: string | string[] ): SearchQuery { return { page: Number(page) || 1, offset: Number(offset) || 20, query: { text, - tags: tags ? [tags] : undefined + tags: tags ? [tags] : undefined, + categories: categories ? [categories] : undefined }, sort: { created: -1 } - // Something in squid-js is weird when using 'tags: [tag]' + // Something in ocean.js is weird when using 'tags: [tag]' // which is the only way the query actually returns desired results. // But it doesn't follow 'SearchQuery' interface so we have to assign // it here. @@ -29,16 +31,20 @@ export function getSearchQuery( } export async function getResults( - params: { text?: string; tags?: string; page?: string; offset?: string }, + params: { + text?: string + tags?: string + categories?: string + page?: string + offset?: string + }, metadataCacheUri: string ): Promise { - const { text, tags, page, offset } = params + const { text, tags, page, offset, categories } = params const metadataCache = new MetadataCache(metadataCacheUri, Logger) - const sQuery = getSearchQuery(page, offset, text, tags) - console.log(sQuery) const queryResult = await metadataCache.queryMetadata( - getSearchQuery(page, offset, text, tags) + getSearchQuery(page, offset, text, tags, categories) ) return queryResult diff --git a/src/pages/search.tsx b/src/pages/search.tsx index def68321a..581fcd17c 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -6,10 +6,14 @@ import queryString from 'query-string' export default function PageGatsbySearch(props: PageProps): ReactElement { const parsed = queryString.parse(props.location.search) - const { text, tags } = parsed + const { text, tags, categories } = parsed + const searchValue = text || tags || categories return ( - + )