mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
Remove price from queries (#600)
* subgraph query added * return ddo list * price queries removed from sorting and filtering * subgraph query added return ddo list price queries removed from sorting and filtering * subgraph query removed * removed unused subgraph query * undo subgraph fetchData change * linting errors fixed * files renamed, priceType removed * removed unused imports and vars * removed all price filter variables Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro>
This commit is contained in:
parent
48cb9b1840
commit
82acbba5ce
@ -1,188 +0,0 @@
|
||||
import React, { ReactElement, useEffect, useState } from 'react'
|
||||
import { useNavigate } from '@reach/router'
|
||||
import styles from './filterPrice.module.css'
|
||||
import classNames from 'classnames/bind'
|
||||
import {
|
||||
addExistingParamsToUrl,
|
||||
FilterByPriceOptions,
|
||||
FilterByTypeOptions
|
||||
} from './utils'
|
||||
import Button from '../../atoms/Button'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const clearFilters = [{ display: 'Clear', value: '' }]
|
||||
|
||||
const priceFilterItems = [
|
||||
{ display: 'fixed price', value: FilterByPriceOptions.Fixed },
|
||||
{ display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
|
||||
]
|
||||
|
||||
const serviceFilterItems = [
|
||||
{ display: 'data sets', value: FilterByTypeOptions.Data },
|
||||
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm }
|
||||
]
|
||||
|
||||
export default function FilterPrice({
|
||||
priceType,
|
||||
serviceType,
|
||||
setPriceType,
|
||||
setServiceType
|
||||
}: {
|
||||
priceType: string
|
||||
setPriceType: React.Dispatch<React.SetStateAction<string>>
|
||||
serviceType: string
|
||||
setServiceType: React.Dispatch<React.SetStateAction<string>>
|
||||
}): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [priceSelections, setPriceSelections] = useState<string[]>([])
|
||||
const [serviceSelections, setServiceSelections] = useState<string[]>([])
|
||||
|
||||
async function applyPriceFilter(filterBy: string) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, 'priceType')
|
||||
if (filterBy) {
|
||||
urlLocation = `${urlLocation}&priceType=${filterBy}`
|
||||
}
|
||||
setPriceType(filterBy)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
async function applyServiceFilter(filterBy: string) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
|
||||
if (filterBy && location.search.indexOf('&serviceType') === -1) {
|
||||
urlLocation = `${urlLocation}&serviceType=${filterBy}`
|
||||
}
|
||||
setServiceType(filterBy)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
async function handleSelectedFilter(isSelected: boolean, value: string) {
|
||||
if (
|
||||
value === FilterByPriceOptions.Fixed ||
|
||||
value === FilterByPriceOptions.Dynamic
|
||||
) {
|
||||
if (isSelected) {
|
||||
if (priceSelections.length > 1) {
|
||||
// both selected -> select the other one
|
||||
const otherValue = priceFilterItems.find((p) => p.value !== value)
|
||||
.value
|
||||
await applyPriceFilter(otherValue)
|
||||
} else {
|
||||
// only the current one selected -> deselect it
|
||||
await applyPriceFilter(undefined)
|
||||
}
|
||||
} else {
|
||||
if (priceSelections.length > 0) {
|
||||
// one already selected -> both selected
|
||||
await applyPriceFilter(FilterByPriceOptions.All)
|
||||
setPriceSelections(priceFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
// none selected -> select
|
||||
await applyPriceFilter(value)
|
||||
setPriceSelections([value])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (isSelected) {
|
||||
if (serviceSelections.length > 1) {
|
||||
const otherValue = serviceFilterItems.find((p) => p.value !== value)
|
||||
.value
|
||||
await applyServiceFilter(otherValue)
|
||||
setServiceSelections([otherValue])
|
||||
} else {
|
||||
await applyServiceFilter(undefined)
|
||||
}
|
||||
} else {
|
||||
if (serviceSelections.length) {
|
||||
await applyServiceFilter(undefined)
|
||||
setServiceSelections(serviceFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
await applyServiceFilter(value)
|
||||
setServiceSelections([value])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function applyClearFilter() {
|
||||
let urlLocation = await addExistingParamsToUrl(
|
||||
location,
|
||||
'priceType',
|
||||
'serviceType'
|
||||
)
|
||||
|
||||
urlLocation = `${urlLocation}`
|
||||
|
||||
setServiceSelections([])
|
||||
setPriceSelections([])
|
||||
|
||||
setPriceType(undefined)
|
||||
setServiceType(undefined)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.filterList}>
|
||||
{priceFilterItems.map((e, index) => {
|
||||
const isPriceSelected =
|
||||
e.value === priceType || priceSelections.includes(e.value)
|
||||
const selectFilter = cx({
|
||||
[styles.selected]: isPriceSelected,
|
||||
[styles.filter]: true
|
||||
})
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={selectFilter}
|
||||
onClick={async () => {
|
||||
handleSelectedFilter(isPriceSelected, e.value)
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
{serviceFilterItems.map((e, index) => {
|
||||
const isServiceSelected =
|
||||
e.value === serviceType || serviceSelections.includes(e.value)
|
||||
const selectFilter = cx({
|
||||
[styles.selected]: isServiceSelected,
|
||||
[styles.filter]: true
|
||||
})
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={selectFilter}
|
||||
onClick={async () => {
|
||||
handleSelectedFilter(isServiceSelected, e.value)
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
{clearFilters.map((e, index) => {
|
||||
const showClear =
|
||||
priceSelections.length > 0 || serviceSelections.length > 0
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={showClear ? styles.showClear : styles.hideClear}
|
||||
onClick={async () => {
|
||||
applyClearFilter()
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
108
src/components/templates/Search/filterService.tsx
Normal file
108
src/components/templates/Search/filterService.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import React, { ReactElement, useState } from 'react'
|
||||
import { useNavigate } from '@reach/router'
|
||||
import styles from './filterService.module.css'
|
||||
import classNames from 'classnames/bind'
|
||||
import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
|
||||
import Button from '../../atoms/Button'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const clearFilters = [{ display: 'Clear', value: '' }]
|
||||
|
||||
const serviceFilterItems = [
|
||||
{ display: 'data sets', value: FilterByTypeOptions.Data },
|
||||
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm }
|
||||
]
|
||||
|
||||
export default function FilterPrice({
|
||||
serviceType,
|
||||
setServiceType
|
||||
}: {
|
||||
serviceType: string
|
||||
setServiceType: React.Dispatch<React.SetStateAction<string>>
|
||||
}): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
const [serviceSelections, setServiceSelections] = useState<string[]>([])
|
||||
|
||||
async function applyServiceFilter(filterBy: string) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
|
||||
if (filterBy && location.search.indexOf('&serviceType') === -1) {
|
||||
urlLocation = `${urlLocation}&serviceType=${filterBy}`
|
||||
}
|
||||
setServiceType(filterBy)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
async function handleSelectedFilter(isSelected: boolean, value: string) {
|
||||
if (isSelected) {
|
||||
if (serviceSelections.length > 1) {
|
||||
const otherValue = serviceFilterItems.find((p) => p.value !== value)
|
||||
.value
|
||||
await applyServiceFilter(otherValue)
|
||||
setServiceSelections([otherValue])
|
||||
} else {
|
||||
await applyServiceFilter(undefined)
|
||||
}
|
||||
} else {
|
||||
if (serviceSelections.length) {
|
||||
await applyServiceFilter(undefined)
|
||||
setServiceSelections(serviceFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
await applyServiceFilter(value)
|
||||
setServiceSelections([value])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function applyClearFilter() {
|
||||
let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
|
||||
|
||||
urlLocation = `${urlLocation}`
|
||||
|
||||
setServiceSelections([])
|
||||
setServiceType(undefined)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.filterList}>
|
||||
{serviceFilterItems.map((e, index) => {
|
||||
const isServiceSelected =
|
||||
e.value === serviceType || serviceSelections.includes(e.value)
|
||||
const selectFilter = cx({
|
||||
[styles.selected]: isServiceSelected,
|
||||
[styles.filter]: true
|
||||
})
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={selectFilter}
|
||||
onClick={async () => {
|
||||
handleSelectedFilter(isServiceSelected, e.value)
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
{clearFilters.map((e, index) => {
|
||||
const showClear = serviceSelections.length > 0
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={showClear ? styles.showClear : styles.hideClear}
|
||||
onClick={async () => {
|
||||
applyClearFilter()
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
@ -4,7 +4,7 @@ import SearchBar from '../../molecules/SearchBar'
|
||||
import AssetList from '../../organisms/AssetList'
|
||||
import styles from './index.module.css'
|
||||
import queryString from 'query-string'
|
||||
import PriceFilter from './filterPrice'
|
||||
import ServiceFilter from './filterService'
|
||||
import Sort from './sort'
|
||||
import { getResults } from './utils'
|
||||
import { navigate } from 'gatsby'
|
||||
@ -21,19 +21,9 @@ export default function SearchPage({
|
||||
}): ReactElement {
|
||||
const { config } = useOcean()
|
||||
const parsed = queryString.parse(location.search)
|
||||
const {
|
||||
text,
|
||||
owner,
|
||||
tags,
|
||||
page,
|
||||
sort,
|
||||
sortOrder,
|
||||
priceType,
|
||||
serviceType
|
||||
} = parsed
|
||||
const { text, owner, tags, page, sort, sortOrder, serviceType } = parsed
|
||||
const [queryResult, setQueryResult] = useState<QueryResult>()
|
||||
const [loading, setLoading] = useState<boolean>()
|
||||
const [price, setPriceType] = useState<string>(priceType as string)
|
||||
const [service, setServiceType] = useState<string>(serviceType as string)
|
||||
const [sortType, setSortType] = useState<string>(sort as string)
|
||||
const [sortDirection, setSortDirection] = useState<string>(
|
||||
@ -58,7 +48,6 @@ export default function SearchPage({
|
||||
tags,
|
||||
sort,
|
||||
page,
|
||||
priceType,
|
||||
serviceType,
|
||||
sortOrder,
|
||||
config.metadataCacheUri
|
||||
@ -80,10 +69,8 @@ export default function SearchPage({
|
||||
<SearchBar initialValue={(text || owner) as string} />
|
||||
)}
|
||||
<div className={styles.row}>
|
||||
<PriceFilter
|
||||
priceType={price}
|
||||
<ServiceFilter
|
||||
serviceType={service}
|
||||
setPriceType={setPriceType}
|
||||
setServiceType={setServiceType}
|
||||
/>
|
||||
<Sort
|
||||
@ -91,8 +78,6 @@ export default function SearchPage({
|
||||
sortDirection={sortDirection}
|
||||
setSortType={setSortType}
|
||||
setSortDirection={setSortDirection}
|
||||
setPriceType={setPriceType}
|
||||
setServiceType={setServiceType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,9 +3,7 @@ import { useNavigate } from '@reach/router'
|
||||
import {
|
||||
addExistingParamsToUrl,
|
||||
SortTermOptions,
|
||||
SortValueOptions,
|
||||
FilterByPriceOptions,
|
||||
FilterByTypeOptions
|
||||
SortValueOptions
|
||||
} from './utils'
|
||||
import Button from '../../atoms/Button'
|
||||
import styles from './sort.module.css'
|
||||
@ -13,26 +11,18 @@ import classNames from 'classnames/bind'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const sortItems = [
|
||||
{ display: 'Published', value: SortTermOptions.Created },
|
||||
{ display: 'Liquidity', value: SortTermOptions.Liquidity },
|
||||
{ display: 'Price', value: SortTermOptions.Price }
|
||||
]
|
||||
const sortItems = [{ display: 'Published', value: SortTermOptions.Created }]
|
||||
|
||||
export default function Sort({
|
||||
sortType,
|
||||
setSortType,
|
||||
sortDirection,
|
||||
setSortDirection,
|
||||
setPriceType,
|
||||
setServiceType
|
||||
setSortDirection
|
||||
}: {
|
||||
sortType: string
|
||||
setSortType: React.Dispatch<React.SetStateAction<string>>
|
||||
sortDirection: string
|
||||
setSortDirection: React.Dispatch<React.SetStateAction<string>>
|
||||
setPriceType: React.Dispatch<React.SetStateAction<string>>
|
||||
setServiceType: React.Dispatch<React.SetStateAction<string>>
|
||||
}): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
const directionArrow = String.fromCharCode(
|
||||
@ -41,12 +31,7 @@ export default function Sort({
|
||||
async function sortResults(sortBy?: string, direction?: string) {
|
||||
let urlLocation: string
|
||||
if (sortBy) {
|
||||
urlLocation = await addExistingParamsToUrl(location, 'sort', 'priceType')
|
||||
urlLocation = `${urlLocation}&sort=${sortBy}`
|
||||
if (sortBy === SortTermOptions.Liquidity) {
|
||||
urlLocation = `${urlLocation}&priceType=${FilterByPriceOptions.Dynamic}`
|
||||
setPriceType(FilterByPriceOptions.Dynamic)
|
||||
}
|
||||
setSortType(sortBy)
|
||||
} else if (direction) {
|
||||
urlLocation = await addExistingParamsToUrl(location, 'sortOrder')
|
||||
|
@ -6,8 +6,6 @@ import { MetadataCache, Logger } from '@oceanprotocol/lib'
|
||||
import queryString from 'query-string'
|
||||
|
||||
export const SortTermOptions = {
|
||||
Liquidity: 'liquidity',
|
||||
Price: 'price',
|
||||
Created: 'created'
|
||||
} as const
|
||||
type SortTermOptions = typeof SortTermOptions[keyof typeof SortTermOptions]
|
||||
@ -25,36 +23,12 @@ export const SortValueOptions = {
|
||||
} as const
|
||||
type SortValueOptions = typeof SortValueOptions[keyof typeof SortValueOptions]
|
||||
|
||||
export const FilterByPriceOptions = {
|
||||
Fixed: 'exchange',
|
||||
Dynamic: 'pool',
|
||||
All: 'all'
|
||||
} as const
|
||||
type FilterByPriceOptions = typeof FilterByPriceOptions[keyof typeof FilterByPriceOptions]
|
||||
|
||||
export const FilterByTypeOptions = {
|
||||
Data: 'dataset',
|
||||
Algorithm: 'algorithm'
|
||||
} as const
|
||||
type FilterByTypeOptions = typeof FilterByTypeOptions[keyof typeof FilterByTypeOptions]
|
||||
|
||||
function addPriceFilterToQuery(sortTerm: string, priceFilter: string): string {
|
||||
if (priceFilter === FilterByPriceOptions.All) {
|
||||
sortTerm = priceFilter
|
||||
? sortTerm === ''
|
||||
? `(price.type:${FilterByPriceOptions.Fixed} OR price.type:${FilterByPriceOptions.Dynamic})`
|
||||
: `${sortTerm} AND (price.type:${FilterByPriceOptions.Dynamic} OR price.type:${FilterByPriceOptions.Fixed})`
|
||||
: sortTerm
|
||||
} else {
|
||||
sortTerm = priceFilter
|
||||
? sortTerm === ''
|
||||
? `price.type:${priceFilter}`
|
||||
: `${sortTerm} AND price.type:${priceFilter}`
|
||||
: sortTerm
|
||||
}
|
||||
return sortTerm
|
||||
}
|
||||
|
||||
function addTypeFilterToQuery(sortTerm: string, typeFilter: string): string {
|
||||
sortTerm = typeFilter
|
||||
? sortTerm === ''
|
||||
@ -64,13 +38,8 @@ function addTypeFilterToQuery(sortTerm: string, typeFilter: string): string {
|
||||
return sortTerm
|
||||
}
|
||||
|
||||
function getSortType(sortParam: string): string {
|
||||
const sortTerm =
|
||||
sortParam === SortTermOptions.Liquidity
|
||||
? SortElasticTerm.Liquidity
|
||||
: sortParam === SortTermOptions.Price
|
||||
? SortElasticTerm.Price
|
||||
: SortTermOptions.Created
|
||||
function getSortType(): string {
|
||||
const sortTerm = SortTermOptions.Created
|
||||
return sortTerm
|
||||
}
|
||||
|
||||
@ -83,10 +52,9 @@ export function getSearchQuery(
|
||||
offset?: string,
|
||||
sort?: string,
|
||||
sortOrder?: string,
|
||||
priceType?: string,
|
||||
serviceType?: string
|
||||
): SearchQuery {
|
||||
const sortTerm = getSortType(sort)
|
||||
const sortTerm = getSortType()
|
||||
const sortValue = sortOrder === SortValueOptions.Ascending ? 1 : -1
|
||||
let searchTerm = owner
|
||||
? `(publicKey.owner:${owner})`
|
||||
@ -98,7 +66,6 @@ export function getSearchQuery(
|
||||
`(service.attributes.additionalInformation.categories:\"${categories}\")`
|
||||
: text || ''
|
||||
searchTerm = addTypeFilterToQuery(searchTerm, serviceType)
|
||||
searchTerm = addPriceFilterToQuery(searchTerm, priceType)
|
||||
|
||||
return {
|
||||
page: Number(page) || 1,
|
||||
@ -136,7 +103,6 @@ export async function getResults(
|
||||
offset?: string
|
||||
sort?: string
|
||||
sortOrder?: string
|
||||
priceType?: string
|
||||
serviceType?: string
|
||||
},
|
||||
metadataCacheUri: string
|
||||
@ -150,10 +116,10 @@ export async function getResults(
|
||||
categories,
|
||||
sort,
|
||||
sortOrder,
|
||||
priceType,
|
||||
serviceType
|
||||
} = params
|
||||
const metadataCache = new MetadataCache(metadataCacheUri, Logger)
|
||||
|
||||
const searchQuery = getSearchQuery(
|
||||
text,
|
||||
owner,
|
||||
@ -163,11 +129,10 @@ export async function getResults(
|
||||
offset,
|
||||
sort,
|
||||
sortOrder,
|
||||
priceType,
|
||||
serviceType
|
||||
)
|
||||
const queryResult = await metadataCache.queryMetadata(searchQuery)
|
||||
|
||||
const queryResult = await metadataCache.queryMetadata(searchQuery)
|
||||
return queryResult
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user