problemi/client/pages/HomePage.tsx

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>
        </>
    )
}