2021-01-21 10:42:05 +01:00
|
|
|
import React, { ReactElement } from 'react'
|
|
|
|
import { useNavigate } from '@reach/router'
|
|
|
|
import {
|
|
|
|
addExistingParamsToUrl,
|
|
|
|
SortTermOptions,
|
2021-05-17 15:14:40 +02:00
|
|
|
SortValueOptions
|
2021-01-21 10:42:05 +01:00
|
|
|
} from './utils'
|
|
|
|
import Button from '../../atoms/Button'
|
|
|
|
import styles from './sort.module.css'
|
|
|
|
import classNames from 'classnames/bind'
|
|
|
|
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
|
2021-06-15 15:46:49 +02:00
|
|
|
const sortItems = [
|
2021-09-24 11:38:32 +02:00
|
|
|
{ display: 'Relevance', value: SortTermOptions.Relevance },
|
2021-06-15 15:46:49 +02:00
|
|
|
{ display: 'Published', value: SortTermOptions.Created }
|
|
|
|
]
|
2021-01-21 10:42:05 +01:00
|
|
|
|
|
|
|
export default function Sort({
|
|
|
|
sortType,
|
|
|
|
setSortType,
|
|
|
|
sortDirection,
|
2021-05-17 15:14:40 +02:00
|
|
|
setSortDirection
|
2021-01-21 10:42:05 +01:00
|
|
|
}: {
|
|
|
|
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) {
|
2021-06-15 15:46:49 +02:00
|
|
|
urlLocation = await addExistingParamsToUrl(location, ['sort'])
|
2021-01-21 10:42:05 +01:00
|
|
|
urlLocation = `${urlLocation}&sort=${sortBy}`
|
|
|
|
setSortType(sortBy)
|
|
|
|
} else if (direction) {
|
2021-06-15 15:46:49 +02:00
|
|
|
urlLocation = await addExistingParamsToUrl(location, ['sortOrder'])
|
2021-01-21 10:42:05 +01:00
|
|
|
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>
|
|
|
|
)
|
|
|
|
}
|