wedding-planner-frontend/app/ui/expenses/table.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client'

import React, { useState } from "react"
import { Expense } from '@/app/lib/definitions';
import TableOfContents from "../components/table-of-contents";
import InlineTextField from "../components/form/inlineTextField";
import { getCsrfToken } from '@/app/lib/utils';

export default function ExpensesTable() {
    const [expenses, setExpenses] = useState<Array<Expense>>([]);

    const handleExpenseUpdate = (expense: Expense) => {
        fetch(`/api/expenses/${expense.id}`,
            {
                method: 'PUT',
                body: JSON.stringify({
                    expense: {
                        name: expense.name,
                        amount: expense.amount,
                        pricing_type: expense.pricingType,
                    }
                }),
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': getCsrfToken(),
                }
            })
            .catch((error) => console.error(error));
    }

    function loadExpenses() {
        fetch("/api/expenses")
            .then((response) => response.json())
            .then((data) => {
                setExpenses(data.map((record: any) => {
                    return ({
                        id: record.id,
                        name: record.name,
                        amount: record.amount,
                        pricingType: record.pricing_type
                    });
                }));
            }, (error) => {
                return [];
            });
    }

    expenses.length === 0 && loadExpenses();

    return (
        <TableOfContents
            headers={['Name', 'Amount (€)', 'Pricing Type']}
            caption='Expenses'
            elements={expenses}
            rowRender={(expense) => (
                <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
                    <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; handleExpenseUpdate(expense) }} />
                    </th>
                    <td className="px-6 py-4">
                        <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); handleExpenseUpdate(expense) }} />
                    </td>
                    <td>
                        {expense.pricingType}
                    </td>
                </tr>
            )}
        />
    );
}