mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
select and deselect filter button
price and service filters combined unselect filter on button
This commit is contained in:
parent
ce81777030
commit
2938a09454
@ -34,4 +34,15 @@ button.filter,
|
||||
|
||||
.filterList:first-of-type{
|
||||
margin-bottom: calc(var(--spacer) / 6);
|
||||
}
|
||||
|
||||
.escape {
|
||||
/* position: absolute; */
|
||||
/* border-radius: 50%; */
|
||||
/* background-color: var(--color-secondary); */
|
||||
/* text-align: center; */
|
||||
/* padding: 0rem .1rem; */
|
||||
margin-left: calc(var(--spacer) / 6);
|
||||
color: var(--background-body);
|
||||
|
||||
}
|
@ -11,22 +11,21 @@ import Button from '../../atoms/Button'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const filterItemsPrice = [
|
||||
const priceFilterItems = [
|
||||
{ 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 }
|
||||
const serviceFilterItems = [
|
||||
{ display: 'data sets', value: FilterByTypeOptions.Data },
|
||||
{ display: 'algorithms', value: FilterByTypeOptions.Algorithm }
|
||||
]
|
||||
|
||||
export default function FilterPrice({
|
||||
priceType,
|
||||
setPriceType,
|
||||
serviceType,
|
||||
setPriceType,
|
||||
setServiceType
|
||||
}: {
|
||||
priceType: string
|
||||
@ -36,7 +35,7 @@ export default function FilterPrice({
|
||||
}): ReactElement {
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function applyFilter(filterBy: string) {
|
||||
async function applyPriceFilter(filterBy: string) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, 'priceType')
|
||||
if (filterBy) {
|
||||
urlLocation = `${urlLocation}&priceType=${filterBy}`
|
||||
@ -45,7 +44,7 @@ export default function FilterPrice({
|
||||
navigate(urlLocation)
|
||||
}
|
||||
|
||||
async function applyTypeFilter(filterBy: string) {
|
||||
async function applyServiceFilter(filterBy: string) {
|
||||
let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
|
||||
if (filterBy) {
|
||||
urlLocation = `${urlLocation}&serviceType=${filterBy}`
|
||||
@ -57,43 +56,65 @@ export default function FilterPrice({
|
||||
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({
|
||||
{priceFilterItems.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 applyPriceFilter(undefined)
|
||||
}
|
||||
: async () => {
|
||||
await applyPriceFilter(e.value)
|
||||
}
|
||||
}
|
||||
>
|
||||
{e.display}
|
||||
{isSelected && e.display !== 'all' ? (
|
||||
<span className={styles.escape}>✕</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
{serviceFilterItems.map((e, index) => {
|
||||
const selectFilter = cx({
|
||||
[styles.selected]: e.value === serviceType,
|
||||
[styles.filter]: true
|
||||
})
|
||||
const isSelected = e.value === serviceType
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
style="text"
|
||||
key={index}
|
||||
className={selectFilter}
|
||||
onClick={
|
||||
isSelected
|
||||
? async () => {
|
||||
await applyServiceFilter(undefined)
|
||||
}
|
||||
: async () => {
|
||||
await applyServiceFilter(e.value)
|
||||
}
|
||||
}
|
||||
>
|
||||
{e.display}
|
||||
{isSelected && e.display !== 'all' ? (
|
||||
<span className={styles.escape}>✕</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
|
@ -34,7 +34,7 @@ export default function SearchPage({
|
||||
const [queryResult, setQueryResult] = useState<QueryResult>()
|
||||
const [loading, setLoading] = useState<boolean>()
|
||||
const [price, setPriceType] = useState<string>(priceType as string)
|
||||
const [type, setType] = useState<string>(serviceType as string)
|
||||
const [service, setServiceType] = useState<string>(serviceType as string)
|
||||
const [sortType, setSortType] = useState<string>(sort as string)
|
||||
const [sortDirection, setSortDirection] = useState<string>(
|
||||
sortOrder as string
|
||||
@ -82,9 +82,9 @@ export default function SearchPage({
|
||||
<div className={styles.row}>
|
||||
<PriceFilter
|
||||
priceType={price}
|
||||
serviceType={service}
|
||||
setPriceType={setPriceType}
|
||||
serviceType={type}
|
||||
setServiceType={setType}
|
||||
setServiceType={setServiceType}
|
||||
/>
|
||||
<Sort
|
||||
sortType={sortType}
|
||||
@ -92,6 +92,7 @@ export default function SearchPage({
|
||||
setSortType={setSortType}
|
||||
setSortDirection={setSortDirection}
|
||||
setPriceType={setPriceType}
|
||||
setServiceType={setServiceType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -24,13 +24,15 @@ export default function Sort({
|
||||
setSortType,
|
||||
sortDirection,
|
||||
setSortDirection,
|
||||
setPriceType
|
||||
setPriceType,
|
||||
setServiceType
|
||||
}: {
|
||||
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(
|
||||
|
Loading…
Reference in New Issue
Block a user