You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

69 lines
2.3 KiB
TypeScript

import { useContext, useState } from 'preact/hooks'
import { Problem as ProblemModel } from '../../shared/model'
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
import { Header } from '../components/Header'
import { Problem } from '../components/Problem'
import { Select } from '../components/Select'
import { useResource, MetadataContext } from '../hooks'
function byTime(p: ProblemModel): string {
return p.createdAt
}
function bySolvedProblems(p: ProblemModel & { solutionsCount: number }): number {
return p.solutionsCount
}
type SortOrder = 'latest' | 'oldest' | 'top-solved' | 'least-solved'
const SORT_ORDER: Record<SortOrder, boolean> = {
'latest': false,
'oldest': true,
'top-solved': false,
'least-solved': true,
}
export const HomePage = () => {
const metadata = useContext(MetadataContext)
metadata.title = `PHC Problemi`
metadata.description = 'Bacheca di problemi di matematica creato dal PHC'
const [problems] = useResource<(ProblemModel & { solutionsCount: number })[]>('/api/problems', [])
const [sortOrder, setSortOrder] = useState<SortOrder>('oldest')
const sortedProblems =
sortOrder === 'latest' || sortOrder === 'oldest'
? sortByStringKey(problems, byTime, SORT_ORDER[sortOrder])
: sortByNumericKey(problems, bySolvedProblems, SORT_ORDER[sortOrder])
return (
<>
<Header />
<main class="page-home">
<div class="board">
<div class="fill-row board-controls">
<div class="sort-order">
<Select
value={sortOrder}
setValue={setSortOrder}
options={{
'latest': 'Prima più recenti',
'oldest': 'Prima più antichi',
'top-solved': 'Prima più risolti',
'least-solved': 'Prima meno risolti',
}}
/>
</div>
</div>
{sortedProblems.map(p => (
<Problem {...p} />
))}
</div>
</main>
</>
)
}