Commit 7e0ff978 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: allow sorting sources

parent 3bd5e0db
......@@ -42,9 +42,9 @@ import { ensureArray } from '@/utils/ensureArray'
import { ensureScalar } from '@/utils/ensureScalar'
import usePagination from '@/utils/usePagination'
const itemSortOrders = ['label', 'modified-on'] as const
const itemSortOrders = ['name', 'date'] as const
type ItemSortOrder = typeof itemSortOrders[number]
const defaultItemSortOrder: ItemSortOrder = 'modified-on'
const defaultItemSortOrder: ItemSortOrder = 'name'
/**
* Sources screen.
......@@ -59,7 +59,6 @@ export default function SourcesScreen(): JSX.Element {
// const page = useQueryParam('page', false, Number)
// const perPage = clamp(0, useQueryParam('perPage', false, Number), 50)
// const query = { q, page }
// FIXME: mockups allow sorting, but api does not
const query = sanitizeQuery(router.query)
const auth = useAuth()
......@@ -124,8 +123,8 @@ export default function SourcesScreen(): JSX.Element {
) : (
<Fragment>
<div className="flex items-center justify-between">
<div className="space-x-8">
{/* <ItemSortOrder filter={query} /> */}
<div className="flex items-center space-x-8">
<ItemSortOrder filter={query} />
<ItemSearch filter={query} />
</div>
<ItemPagination filter={query} results={sources.data} />
......@@ -231,49 +230,49 @@ interface ItemSortOrderProps {
/**
* Sort order.
*/
// function ItemSortOrder(props: ItemSortOrderProps) {
// const { filter } = props
// const router = useRouter()
// const currentSortOrder =
// filter.order === undefined
// ? defaultItemSortOrder
// : (filter.order[0] as ItemSortOrder)
// function onSubmit(order: Key) {
// const query = { ...filter }
// if (order === defaultItemSortOrder) {
// delete query.order
// } else {
// query.order = [order as ItemSortOrder]
// }
// router.push({ query })
// }
// /** we don't get labels for sort order from the backend */
// const labels: Record<ItemSortOrder, string> = {
// label: 'name',
// 'modified-on': 'last modification',
// }
// const items = itemSortOrders.map((id) => ({ id, label: labels[id] }))
// return (
// <Select
// aria-label="Sort order"
// items={items}
// onSelectionChange={onSubmit}
// selectedKey={currentSortOrder}
// >
// {(item) => (
// <Select.Item key={item.id} textValue={item.label}>
// Sort by {item.label}
// </Select.Item>
// )}
// </Select>
// )
// }
function ItemSortOrder(props: ItemSortOrderProps) {
const { filter } = props
const router = useRouter()
const currentSortOrder =
filter.order === undefined
? defaultItemSortOrder
: (filter.order as ItemSortOrder)
function onSubmit(order: Key) {
const query = { ...filter }
if (order === defaultItemSortOrder) {
delete query.order
} else {
query.order = order as ItemSortOrder
}
router.push({ query })
}
/** we don't get labels for sort order from the backend */
const labels: Record<ItemSortOrder, string> = {
name: 'name',
date: 'last harvest date',
}
const items = itemSortOrders.map((id) => ({ id, label: labels[id] }))
return (
<Select
aria-label="Sort order"
items={items}
onSelectionChange={onSubmit}
selectedKey={currentSortOrder}
>
{(item) => (
<Select.Item key={item.id} textValue={item.label}>
Sort by {item.label}
</Select.Item>
)}
</Select>
)
}
interface ItemSearchProps {
filter: GetSources.QueryParameters
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment