You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.5 KiB
92 lines
2.5 KiB
import React, { useState } from 'react' |
|
import { Account } from '../../types' |
|
|
|
import '../../scss/form.scss' |
|
import { useAppContext } from '../../contexts/AppContext' |
|
import { message } from 'antd' |
|
import { usePromise } from '@dank-inc/use-get' |
|
|
|
type Props = { |
|
account?: Account |
|
} |
|
|
|
export const AccountForm = ({ account }: Props) => { |
|
const { api } = useAppContext() |
|
|
|
const stacks = usePromise(api.getStacks()) |
|
|
|
const [name, setName] = useState<string>(account?.name || '') |
|
const [details, setDetails] = useState<string>(account?.details || '') |
|
const [income, setIncome] = useState<number>(account?.income || 0) |
|
const [expenses, setExpenses] = useState<number>(account?.expenses || 0) |
|
|
|
const handleSubmit = async (e: React.FormEvent) => { |
|
e.preventDefault() |
|
if (!name || !income || !expenses) message.error(`fill out all the fields!`) |
|
|
|
const body = { |
|
name, |
|
income, |
|
expenses, |
|
details, |
|
} |
|
|
|
account?.id |
|
? await api.updateAccount(account.id, body) |
|
: await api.createAccount(body) |
|
|
|
message.success('Yaaa') |
|
} |
|
|
|
return ( |
|
<> |
|
<h1>{account?.id ? 'Budget Details' : 'Create Budget'}</h1> |
|
<form className="dank-form" onSubmit={handleSubmit}> |
|
<h3>General</h3> |
|
<label> |
|
Name: |
|
<input onChange={(e) => setName(e.target.value)} value={name}></input> |
|
</label> |
|
<label> |
|
Description (optional): |
|
<input |
|
type="text" |
|
onChange={(e) => setDetails(e.target.value)} |
|
value={details} |
|
></input> |
|
</label> |
|
<h3>Income & Expenses</h3> |
|
<label> |
|
Monthly Income: |
|
<input |
|
onChange={(e) => setIncome(parseInt(e.target.value) || 0)} |
|
value={income} |
|
></input> |
|
</label> |
|
<label> |
|
Monthly Expenses: |
|
<input |
|
onChange={(e) => setExpenses(parseInt(e.target.value) || 0)} |
|
value={expenses} |
|
></input> |
|
</label> |
|
<h3>Budgets</h3> |
|
{stacks.data?.map((stack) => ( |
|
<div key={stack.details} className="form-item"> |
|
<label>{stack.name}</label> |
|
<input |
|
type="number" |
|
value={stack.amount} |
|
onChange={(e) => |
|
api.updateStack(stack.id, { |
|
amount: parseInt(e.target.value), |
|
}) |
|
} |
|
></input> |
|
</div> |
|
))} |
|
<button type="submit">{account?.id ? 'Save' : 'Create'}</button> |
|
</form> |
|
</> |
|
) |
|
}
|
|
|