import { h } 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' const dateYear = new Date().getFullYear() const EntriesPage = () => { 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) const search = !isEmpty(values) ? '?' + qs.stringify(values) : '' location.route(`/entries${search}`) }, []) useEffect(() => { rek('/api/journals').then((journals) => { setJournals(journals) }) rek('/api/financial-years').then((financialYears) => { setFinancialYears(financialYears) }) }, []) useEffect(() => { rek(`/api/entries?journal=${selectedJournal}&year=${selectedYear}`).then((entries) => setEntries(entries)) }, [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