46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { useParams } from 'react-router';
|
||
|
||
import { useExpenseList } from '@/entity/expenses/list';
|
||
import { AddExpenseItemButton } from '@/features/expenses/items/AddExpenseItemButton';
|
||
import { Spinner } from '@/shared/ui/Spinner';
|
||
import { AppLayout } from '@/widgets/AppLayout';
|
||
import { ExpenseItemsTable } from '@/widgets/expenses/ExpenseItemsTable';
|
||
|
||
import type { ExpensePageParams } from '@/shared/router';
|
||
|
||
const ExpensePage = () => {
|
||
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
|
||
const { id } = useParams() as ExpensePageParams;
|
||
|
||
const { data: expenseList, isPending } = useExpenseList(id);
|
||
|
||
const renderContent = () => {
|
||
if (isPending) {
|
||
return <Spinner />;
|
||
}
|
||
|
||
if (expenseList?.items?.length && expenseList.items.length > 0) {
|
||
return (
|
||
<ExpenseItemsTable list={expenseList} />
|
||
);
|
||
}
|
||
|
||
return <p>Списков расходов нет</p>;
|
||
};
|
||
|
||
return (
|
||
<AppLayout>
|
||
<div>
|
||
<h1>Списки расходов</h1>
|
||
|
||
<AddExpenseItemButton listId={id} />
|
||
|
||
{renderContent()}
|
||
|
||
</div>
|
||
</AppLayout>
|
||
);
|
||
};
|
||
|
||
export default ExpensePage;
|