Part of the quiet-user-feedback change; docs and specs land in their own repositories.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import type { ChangeEvent } from "react";
|
|
|
|
import { useState } from "react";
|
|
import { useSearchParams } from "react-router";
|
|
|
|
import {
|
|
bankPeriod,
|
|
useBankCards,
|
|
useBankCategories,
|
|
useBankSummary,
|
|
} from "@/entities/bank-card";
|
|
|
|
type CardsPageVm = ReturnType<typeof useCardsPageVm>;
|
|
|
|
function useCardsPageVm() {
|
|
const [parameters, setParameters] = useSearchParams();
|
|
const period = bankPeriod(parameters);
|
|
const [archive, setArchive] = useState(false);
|
|
const categories = useBankCategories();
|
|
const [managingCategories, setManagingCategories] = useState(false);
|
|
const [adding, setAdding] = useState(false);
|
|
const cards = useBankCards(archive);
|
|
const summary = useBankSummary(period);
|
|
|
|
return {
|
|
adding,
|
|
archive,
|
|
cards,
|
|
categories,
|
|
closeAdding: () => setAdding(false),
|
|
closeCategories: () => setManagingCategories(false),
|
|
items: cards.data?.map(card => ({
|
|
...card,
|
|
to: `/cards/${card.id}?${new URLSearchParams(period)}`,
|
|
})),
|
|
managingCategories,
|
|
onAddCard: () => setAdding(true),
|
|
onArchiveChange: (event: ChangeEvent<HTMLInputElement>) =>
|
|
setArchive(event.currentTarget.checked),
|
|
onCategories: () => setManagingCategories(true),
|
|
period,
|
|
setPeriod: (value: [null | string, null | string]) => {
|
|
if (value[0] && value[1]) setParameters({ from: value[0], to: value[1] });
|
|
},
|
|
summary,
|
|
};
|
|
}
|
|
|
|
export { type CardsPageVm, useCardsPageVm };
|