mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-17 09:53:26 +02:00
eb8c6afb62
* search by addresses * search by asset id * logs deleted * search query updated * search query updated * search terms differentiated * asset id hack * id search hack removed * restore lock file Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove SearchQuery return type Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * refine query, add relevance sort Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove old comments Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove white spaces from search term endings * fix filter by type * wip on filter with empty search text * sort by relevance fix * linting errors fix * lint fixes * comment sort by relevance Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * lint Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * search by owner and tags fix * lint err fix * fix search Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro> Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro>
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { useNavigate } from '@reach/router'
|
|
import {
|
|
addExistingParamsToUrl,
|
|
SortTermOptions,
|
|
SortValueOptions
|
|
} from './utils'
|
|
import Button from '../../atoms/Button'
|
|
import styles from './sort.module.css'
|
|
import classNames from 'classnames/bind'
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
const sortItems = [
|
|
// { display: 'Relevance', value: SortTermOptions.Relevance },
|
|
{ display: 'Published', value: SortTermOptions.Created }
|
|
]
|
|
|
|
export default function Sort({
|
|
sortType,
|
|
setSortType,
|
|
sortDirection,
|
|
setSortDirection
|
|
}: {
|
|
sortType: string
|
|
setSortType: React.Dispatch<React.SetStateAction<string>>
|
|
sortDirection: string
|
|
setSortDirection: React.Dispatch<React.SetStateAction<string>>
|
|
}): ReactElement {
|
|
const navigate = useNavigate()
|
|
const directionArrow = String.fromCharCode(
|
|
sortDirection === SortValueOptions.Ascending ? 9650 : 9660
|
|
)
|
|
async function sortResults(sortBy?: string, direction?: string) {
|
|
let urlLocation: string
|
|
if (sortBy) {
|
|
urlLocation = await addExistingParamsToUrl(location, ['sort'])
|
|
urlLocation = `${urlLocation}&sort=${sortBy}`
|
|
setSortType(sortBy)
|
|
} else if (direction) {
|
|
urlLocation = await addExistingParamsToUrl(location, ['sortOrder'])
|
|
urlLocation = `${urlLocation}&sortOrder=${direction}`
|
|
setSortDirection(direction)
|
|
}
|
|
navigate(urlLocation)
|
|
}
|
|
function handleSortButtonClick(value: string) {
|
|
if (value === sortType) {
|
|
if (sortDirection === SortValueOptions.Descending) {
|
|
sortResults(null, SortValueOptions.Ascending)
|
|
} else {
|
|
sortResults(null, SortValueOptions.Descending)
|
|
}
|
|
} else {
|
|
sortResults(value, null)
|
|
}
|
|
}
|
|
return (
|
|
<div className={styles.sortList}>
|
|
<label className={styles.sortLabel}>Sort</label>
|
|
{sortItems.map((e, index) => {
|
|
const sorted = cx({
|
|
[styles.selected]: e.value === sortType,
|
|
[styles.sorted]: true
|
|
})
|
|
return (
|
|
<Button
|
|
key={index}
|
|
className={sorted}
|
|
size="small"
|
|
onClick={() => {
|
|
handleSortButtonClick(e.value)
|
|
}}
|
|
>
|
|
{e.display}
|
|
{e.value === sortType ? (
|
|
<span className={styles.direction}>{directionArrow}</span>
|
|
) : null}
|
|
</Button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|