cash-stacks/frontend/src/forms/TransactionForm.tsx

import { useForm } from 'antd/lib/form/Form'
import { Button } from '../elements/Button'
import { Form } from '../elements/Form'
import { FormItem } from '../elements/FormItem'
import { Input } from '../elements/Input'
import { InputNumber } from '../elements/InputNumber'
import {
  useCreateTransaction,
  NewTransaction,
} from '../hooks/create/useCreateTransaction'
import { DankFormProps } from '../layout/Modal'
import { Row } from '../layout/Row'

type Props = DankFormProps & {
  stackId: string
}

export const TransactionForm = ({ stackId, onSave, onCancel }: Props) => {
  const [form] = useForm<NewTransaction>()
  const create = useCreateTransaction()

  const handleFinish = async (tx: NewTransaction) => {
    console.log('transaction', tx)
    const res = await create(tx)

    if (!res) {
      console.log("couldn't create transaction")
      return
    }

    onSave?.()
  }

  return (
    <Form
      form={form}
      onFinish={handleFinish}
      initialValues={{ stack: stackId }}
    >
      <h1>New Transaction</h1>
      <FormItem label="Amount" name="amount">
        <InputNumber />
      </FormItem>
      <FormItem label="Details" name="amount">
        <Input />
      </FormItem>
      <Row>
        <Button onClick={onCancel}>Cancel</Button>
        <Button htmlType="submit">Save</Button>
      </Row>
    </Form>
  )
}