import { h, type FunctionComponent } from 'preact' import { useCallback, useEffect, useState } from 'preact/hooks' import { useLocation } from 'preact-iso' import { isEmpty } from 'lowline' import qs from 'mini-qs' import rek from 'rek' import Head from './head.ts' import serializeForm from '../../shared/utils/serialize_form.ts' import type { Entry, FinancialYear, Journal } from '../../../shared/types.ts' const dateYear = new Date().getFullYear() const EntriesPage: FunctionComponent = () => { const [journals, setJournals] = useState([]) const [financialYears, setFinancialYears] = useState([]) const [entries, setEntries] = useState([]) const location = useLocation() const { journal: selectedJournal = 'A', year: selectedYear = dateYear } = location.query const onSubmit = useCallback((e: SubmitEvent) => { e.preventDefault() const values = serializeForm(e.target as HTMLFormElement) as Record const search = !isEmpty(values) ? '?' + qs.stringify(values) : '' location.route(`/entries${search}`) }, []) useEffect(() => { rek('/api/journals').then(setJournals) rek('/api/financial-years').then(setFinancialYears) }, []) useEffect(() => { rek(`/api/entries?journal=${selectedJournal}&year=${selectedYear}`).then(setEntries) }, [selectedJournal, selectedYear]) return financialYears.length && journals.length ? (
: Entries

Entries

{selectedJournal} : {selectedYear}

{entries?.map((entry) => ( ))}
ID Number Entry Date Transaction Date Amount Description
{entry.id} {entry.journal} {entry.number} {entry.entryDate?.slice(0, 10)} {entry.transactionDate?.slice(0, 10)} {entry.amount} {entry.description}
) : null } export default EntriesPage