diff --git a/app/ui/expenses/table.tsx b/app/ui/expenses/table.tsx index 55a0bbe..5161cfe 100644 --- a/app/ui/expenses/table.tsx +++ b/app/ui/expenses/table.tsx @@ -5,10 +5,31 @@ 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>([]); + 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()) @@ -30,16 +51,16 @@ export default function ExpensesTable() { return ( ( - {expense.name} + { expense.name = value; handleExpenseUpdate(expense) }} /> - {expense.amount}€ + { expense.amount = parseFloat(value); handleExpenseUpdate(expense) }} /> {expense.pricingType}