mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
roll back search filter refactor for published list
This commit is contained in:
parent
eacd0c56a0
commit
15a29bcb01
GPG Key ID:
606EEEF3C479A91F
@ -3,7 +3,7 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/Metadata
|
||||
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'
|
||||
@ -53,12 +53,11 @@ export default function PublishedList({
|
||||
|
||||
return accountId ? (
|
||||
<>
|
||||
<Filters
|
||||
{/* <Filters
|
||||
serviceType={service}
|
||||
setServiceType={setServiceType}
|
||||
isSearch={false}
|
||||
className={styles.filters}
|
||||
/>
|
||||
/> */}
|
||||
<AssetList
|
||||
assets={queryResult?.results}
|
||||
isLoading={isLoading}
|
||||
|
||||
@ -23,20 +23,16 @@ const accessFilterItems = [
|
||||
{ display: 'compute ', value: FilterByAccessOptions.Compute }
|
||||
]
|
||||
|
||||
export default function Filters({
|
||||
export default function FilterPrice({
|
||||
serviceType,
|
||||
accessType,
|
||||
setServiceType,
|
||||
setAccessType,
|
||||
isSearch,
|
||||
className
|
||||
setAccessType
|
||||
}: {
|
||||
serviceType: string
|
||||
accessType: string
|
||||
setServiceType: React.Dispatch<React.SetStateAction<string>>
|
||||
isSearch: boolean
|
||||
setAccessType: React.Dispatch<React.SetStateAction<string>>
|
||||
className?: string
|
||||
}): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
const [serviceSelections, setServiceSelections] = useState<string[]>([])
|
||||
@ -50,165 +46,147 @@ export default function Filters({
|
||||
urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
|
||||
}
|
||||
|
||||
async function applyServiceFilter(filterBy: string) {
|
||||
setServiceType(filterBy)
|
||||
if (filter && location.search.indexOf(filterType) === -1) {
|
||||
filterType === 'accessType'
|
||||
? (urlLocation = `${urlLocation}&accessType=${filter}`)
|
||||
: (urlLocation = `${urlLocation}&serviceType=${filter}`)
|
||||
}
|
||||
|
||||
if (isSearch) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, [
|
||||
'serviceType'
|
||||
])
|
||||
if (filterBy && location.search.indexOf('&serviceType') === -1) {
|
||||
urlLocation = `${urlLocation}&serviceType=${filterBy}`
|
||||
}
|
||||
filterType === 'accessType'
|
||||
? setAccessType(filter)
|
||||
: setServiceType(filter)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
if (filter && location.search.indexOf(filterType) === -1) {
|
||||
filterType === 'accessType'
|
||||
? (urlLocation = `${urlLocation}&accessType=${filter}`)
|
||||
: (urlLocation = `${urlLocation}&serviceType=${filter}`)
|
||||
}
|
||||
|
||||
async function handleSelectedFilter(isSelected: boolean, value: string) {
|
||||
if (
|
||||
value === FilterByAccessOptions.Download ||
|
||||
value === FilterByAccessOptions.Compute
|
||||
) {
|
||||
if (isSelected) {
|
||||
if (accessSelections.length > 1) {
|
||||
// both selected -> select the other one
|
||||
const otherValue = accessFilterItems.find(
|
||||
(p) => p.value !== value
|
||||
).value
|
||||
await applyFilter(otherValue, 'accessType')
|
||||
setAccessSelections([otherValue])
|
||||
} else {
|
||||
// only the current one selected -> deselect it
|
||||
await applyFilter(undefined, 'accessType')
|
||||
setAccessSelections([])
|
||||
}
|
||||
filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter)
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
async function handleSelectedFilter(isSelected: boolean, value: string) {
|
||||
if (
|
||||
value === FilterByAccessOptions.Download ||
|
||||
value === FilterByAccessOptions.Compute
|
||||
) {
|
||||
if (isSelected) {
|
||||
if (accessSelections.length > 1) {
|
||||
// both selected -> select the other one
|
||||
const otherValue = accessFilterItems.find(
|
||||
(p) => p.value !== value
|
||||
).value
|
||||
await applyFilter(otherValue, 'accessType')
|
||||
setAccessSelections([otherValue])
|
||||
} else {
|
||||
if (accessSelections.length) {
|
||||
// one already selected -> both selected
|
||||
await applyFilter(undefined, 'accessType')
|
||||
setAccessSelections(accessFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
// none selected -> select
|
||||
await applyFilter(value, 'accessType')
|
||||
setAccessSelections([value])
|
||||
}
|
||||
// only the current one selected -> deselect it
|
||||
await applyFilter(undefined, 'accessType')
|
||||
setAccessSelections([])
|
||||
}
|
||||
} else {
|
||||
if (isSelected) {
|
||||
if (serviceSelections.length > 1) {
|
||||
const otherValue = serviceFilterItems.find(
|
||||
(p) => p.value !== value
|
||||
).value
|
||||
await applyFilter(otherValue, 'serviceType')
|
||||
setServiceSelections([otherValue])
|
||||
} else {
|
||||
await applyFilter(undefined, 'serviceType')
|
||||
setServiceSelections([])
|
||||
}
|
||||
if (accessSelections.length) {
|
||||
// one already selected -> both selected
|
||||
await applyFilter(undefined, 'accessType')
|
||||
setAccessSelections(accessFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
if (serviceSelections.length) {
|
||||
await applyFilter(undefined, 'serviceType')
|
||||
setServiceSelections(serviceFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
await applyFilter(value, 'serviceType')
|
||||
setServiceSelections([value])
|
||||
}
|
||||
// none selected -> select
|
||||
await applyFilter(value, 'accessType')
|
||||
setAccessSelections([value])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (isSelected) {
|
||||
if (serviceSelections.length > 1) {
|
||||
const otherValue = serviceFilterItems.find(
|
||||
(p) => p.value !== value
|
||||
).value
|
||||
await applyFilter(otherValue, 'serviceType')
|
||||
setServiceSelections([otherValue])
|
||||
} else {
|
||||
await applyFilter(undefined, 'serviceType')
|
||||
setServiceSelections([])
|
||||
}
|
||||
} else {
|
||||
if (serviceSelections.length) {
|
||||
await applyFilter(undefined, 'serviceType')
|
||||
setServiceSelections(serviceFilterItems.map((p) => p.value))
|
||||
} else {
|
||||
await applyFilter(value, 'serviceType')
|
||||
setServiceSelections([value])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function applyClearFilter(isSearch: boolean) {
|
||||
setServiceSelections([])
|
||||
setAccessSelections([])
|
||||
|
||||
setServiceType(undefined)
|
||||
setAccessType(undefined)
|
||||
if (isSearch) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, [
|
||||
'serviceType'
|
||||
])
|
||||
urlLocation = `${urlLocation}`
|
||||
navigate(urlLocation)
|
||||
}
|
||||
}
|
||||
|
||||
const styleClasses = cx({
|
||||
filterList: true,
|
||||
[className]: className
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={styleClasses}>
|
||||
{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>
|
||||
)
|
||||
})}
|
||||
<div className={styles.separator} />
|
||||
{accessFilterItems.map((e, index) => {
|
||||
const isAccessSelected =
|
||||
e.value === accessType || accessSelections.includes(e.value)
|
||||
const selectFilter = cx({
|
||||
[styles.selected]: isAccessSelected,
|
||||
[styles.filter]: true
|
||||
})
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={selectFilter}
|
||||
onClick={async () => {
|
||||
handleSelectedFilter(isAccessSelected, e.value)
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
{clearFilters.map((e, index) => {
|
||||
const showClear =
|
||||
accessSelections.length > 0 || serviceSelections.length > 0
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={showClear ? styles.showClear : styles.hideClear}
|
||||
onClick={async () => {
|
||||
applyClearFilter(isSearch)
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function applyClearFilter() {
|
||||
let urlLocation = await addExistingParamsToUrl(location, [
|
||||
'accessType',
|
||||
'serviceType'
|
||||
])
|
||||
|
||||
urlLocation = `${urlLocation}`
|
||||
|
||||
setServiceSelections([])
|
||||
setAccessSelections([])
|
||||
|
||||
setServiceType(undefined)
|
||||
setAccessType(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>
|
||||
)
|
||||
})}
|
||||
<div className={styles.separator} />
|
||||
{accessFilterItems.map((e, index) => {
|
||||
const isAccessSelected =
|
||||
e.value === accessType || accessSelections.includes(e.value)
|
||||
const selectFilter = cx({
|
||||
[styles.selected]: isAccessSelected,
|
||||
[styles.filter]: true
|
||||
})
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={selectFilter}
|
||||
onClick={async () => {
|
||||
handleSelectedFilter(isAccessSelected, e.value)
|
||||
}}
|
||||
>
|
||||
{e.display}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
{clearFilters.map((e, index) => {
|
||||
const showClear =
|
||||
accessSelections.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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -80,7 +80,6 @@ export default function SearchPage({
|
||||
accessType={access}
|
||||
setServiceType={setServiceType}
|
||||
setAccessType={setAccessType}
|
||||
isSearch
|
||||
/>
|
||||
<Sort
|
||||
sortType={sortType}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user