From 579b213160e0a51854012dd05273349e347ac0a1 Mon Sep 17 00:00:00 2001 From: Bogdan Fazakas Date: Mon, 27 Sep 2021 11:16:14 +0300 Subject: [PATCH] Fix/ Put back filters published page (#867) * put back filters on published page * fix filter + pagination issue on published asset tab * renamed isSearch prop and made it optional --- .../pages/Profile/History/PublishedList.tsx | 69 +++++++++++-------- src/components/templates/Search/Filters.tsx | 64 +++++++++-------- src/components/templates/Search/index.tsx | 1 + src/utils/aquarius.ts | 6 +- 4 files changed, 82 insertions(+), 58 deletions(-) diff --git a/src/components/pages/Profile/History/PublishedList.tsx b/src/components/pages/Profile/History/PublishedList.tsx index 5e381f0f9..d95a435ab 100644 --- a/src/components/pages/Profile/History/PublishedList.tsx +++ b/src/components/pages/Profile/History/PublishedList.tsx @@ -2,7 +2,7 @@ import { Logger } from '@oceanprotocol/lib' import React, { ReactElement, useEffect, useState } from 'react' import AssetList from '../../../organisms/AssetList' import { getPublishedAssets } from '../../../../utils/aquarius' -// import Filters from '../../../templates/Search/Filters' +import Filters from '../../../templates/Search/Filters' import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' import { useUserPreferences } from '../../../../providers/UserPreferences' import styles from './PublishedList.module.css' @@ -20,45 +20,56 @@ export default function PublishedList({ const [isLoading, setIsLoading] = useState(false) const [page, setPage] = useState(1) const [service, setServiceType] = useState('dataset OR algorithm') + const [access, setAccsesType] = useState('access OR compute') const newCancelToken = useCancelToken() + async function getPublished() { + try { + setIsLoading(true) + const result = await getPublishedAssets( + accountId, + chainIds, + newCancelToken(), + page, + service, + access + ) + setQueryResult(result) + } catch (error) { + Logger.error(error.message) + } finally { + setIsLoading(false) + } + } + + useEffect(() => { + async function fetchPublishedAssets() { + await getPublished() + } + if (page !== 1) { + setPage(1) + } else { + fetchPublishedAssets() + } + }, [service, access]) + useEffect(() => { if (!accountId) return - - async function getPublished() { - try { - setIsLoading(true) - const result = await getPublishedAssets( - accountId, - chainIds, - newCancelToken(), - page - 1, - service - ) - setQueryResult(result) - } catch (error) { - Logger.error(error.message) - } finally { - setIsLoading(false) - } + async function fetchPublishedAssets() { + await getPublished() } - getPublished() - }, [ - accountId, - page, - appConfig.metadataCacheUri, - chainIds, - service, - newCancelToken - ]) + fetchPublishedAssets() + }, [accountId, page, appConfig.metadataCacheUri, chainIds, newCancelToken]) return accountId ? ( <> - {/* */} + /> > setAccessType: React.Dispatch> + addFiltersToUrl?: boolean + className?: string }): ReactElement { const navigate = useNavigate() const [serviceSelections, setServiceSelections] = useState([]) const [accessSelections, setAccessSelections] = useState([]) async function applyFilter(filter: string, filterType: string) { - let urlLocation = '' - if (filterType.localeCompare('accessType') === 0) { - urlLocation = await addExistingParamsToUrl(location, ['accessType']) - } else { - urlLocation = await addExistingParamsToUrl(location, ['serviceType']) - } - - if (filter && location.search.indexOf(filterType) === -1) { - filterType === 'accessType' - ? (urlLocation = `${urlLocation}&accessType=${filter}`) - : (urlLocation = `${urlLocation}&serviceType=${filter}`) - } - filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter) - navigate(urlLocation) + if (addFiltersToUrl) { + let urlLocation = '' + if (filterType.localeCompare('accessType') === 0) { + urlLocation = await addExistingParamsToUrl(location, ['accessType']) + } else { + urlLocation = await addExistingParamsToUrl(location, ['serviceType']) + } + + if (filter && location.search.indexOf(filterType) === -1) { + filterType === 'accessType' + ? (urlLocation = `${urlLocation}&accessType=${filter}`) + : (urlLocation = `${urlLocation}&serviceType=${filter}`) + } + + navigate(urlLocation) + } } async function handleSelectedFilter(isSelected: boolean, value: string) { @@ -109,24 +115,28 @@ export default function FilterPrice({ } } - async function applyClearFilter() { - let urlLocation = await addExistingParamsToUrl(location, [ - 'accessType', - 'serviceType' - ]) - - urlLocation = `${urlLocation}` - + async function applyClearFilter(addFiltersToUrl: boolean) { setServiceSelections([]) setAccessSelections([]) - setServiceType(undefined) setAccessType(undefined) - navigate(urlLocation) + if (addFiltersToUrl) { + let urlLocation = await addExistingParamsToUrl(location, [ + 'accessType', + 'serviceType' + ]) + urlLocation = `${urlLocation}` + navigate(urlLocation) + } } + const styleClasses = cx({ + filterList: true, + [className]: className + }) + return ( -
+
{serviceFilterItems.map((e, index) => { const isServiceSelected = e.value === serviceType || serviceSelections.includes(e.value) @@ -180,7 +190,7 @@ export default function FilterPrice({ key={index} className={showClear ? styles.showClear : styles.hideClear} onClick={async () => { - applyClearFilter() + applyClearFilter(addFiltersToUrl) }} > {e.display} diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx index 94d211988..d69b016b9 100644 --- a/src/components/templates/Search/index.tsx +++ b/src/components/templates/Search/index.tsx @@ -77,6 +77,7 @@ export default function SearchPage({ accessType={access} setServiceType={setServiceType} setAccessType={setAccessType} + addFiltersToUrl /> { if (!accountId) return type = type || 'dataset OR algorithm' + accesType = accesType || 'access OR compute' const queryPublishedAssets = { from: (Number(page) || 0) * (Number(9) || 21), size: Number(9) || 21, query: { query_string: { - query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${type}) AND (${transformChainIdsListToQuery( + query: `(publicKey.owner:${accountId}) AND (service.attributes.main.type:${type}) AND (service.type:${accesType}) AND (${transformChainIdsListToQuery( chainIds )})` }