oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

select and deselect filter button

Browse Source
This commit is contained in:
claudia.holhos 2021-02-23 16:52:59 +02:00
parent ce81777030
commit 2eb560b000
1 changed files with 19 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/templates/Search/filterPrice.tsx
View File

@ -11,28 +11,20 @@ import Button from '../../atoms/Button'
const cx = classNames.bind(styles)
const filterItemsPrice = [
const filterItems = [
{ display: 'all', value: undefined },
{ display: 'fixed price', value: FilterByPriceOptions.Fixed },
{ display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
]
const filterItemsType = [
{ display: 'all', value: undefined },
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm },
{ display: 'data sets', value: FilterByTypeOptions.Data }
{ display: 'dynamic price', value: FilterByPriceOptions.Dynamic },
{ display: 'data sets', value: FilterByTypeOptions.Data },
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm }
]
export default function FilterPrice({
priceType,
setPriceType,
serviceType,
setServiceType
setPriceType
}: {
priceType: string
setPriceType: React.Dispatch<React.SetStateAction<string>>
serviceType: string
setServiceType: React.Dispatch<React.SetStateAction<string>>
}): ReactElement {
const navigate = useNavigate()
@ -41,57 +33,35 @@ export default function FilterPrice({
if (filterBy) {
urlLocation = `${urlLocation}&priceType=${filterBy}`
}
console.log('FILTER BY: ', filterBy)
setPriceType(filterBy)
navigate(urlLocation)
}
async function applyTypeFilter(filterBy: string) {
let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
if (filterBy) {
urlLocation = `${urlLocation}&serviceType=${filterBy}`
}
setServiceType(filterBy)
navigate(urlLocation)
}
return (
<div>
<div className={styles.filterList}>
{filterItemsType.map((e, index) => {
const filter = cx({
[styles.selected]: e.value === serviceType,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={filter}
onClick={async () => {
await applyTypeFilter(e.value)
}}
>
{e.display}
</Button>
)
})}
</div>
<div className={styles.filterList}>
{filterItemsPrice.map((e, index) => {
const filter = cx({
{filterItems.map((e, index) => {
const selectFilter = cx({
[styles.selected]: e.value === priceType,
[styles.filter]: true
})
const isSelected = e.value === priceType
return (
<Button
size="small"
style="text"
key={index}
className={filter}
onClick={async () => {
await applyFilter(e.value)
}}
className={selectFilter}
onClick={
isSelected
? async () => {
await applyFilter(undefined)
}
: async () => {
await applyFilter(e.value)
}
}
>
{e.display}
</Button>