Auto-generated

Now let's have Remix Forms do it all for us. We'll still have to customize the layout, but the UX is there. Like magic! ๐Ÿช„

34
lines of code
import { ActionFunction } from '@remix-run/node'
import { z } from 'zod'
import { InputError, makeDomainFunction } from 'domain-functions'
// Learn how to create these files on "Get Started" ๐Ÿ‘‡๐Ÿฝ
import { formAction } from '~/form-action'
import { Form } from '~/form'

const reservationSchema = z.object({
  city: z.enum(['saltLakeCity', 'lasVegas', 'losAngeles']),
  checkIn: z.date(),
  checkOut: z.date(),
  adults: z.number().int().positive(),
  children: z.number().int(),
  bedrooms: z.number().int().positive(),
  specialRequests: z.string().optional(),
})

const makeReservation = makeDomainFunction(reservationSchema)(
  async (values) => {
    if (values.specialRequests?.match(/towels/i)) {
      throw new InputError("Don't be such a diva!", 'specialRequests')
    }

    // Here you would store data instead
    console.log(values)
  },
)

export const action: ActionFunction = async ({ request }) =>
  formAction({
    request,
    schema: reservationSchema,
    mutation: makeReservation,
    successPath: 'conf/success/08',
  })

export default function Component() {
  return <Form schema={reservationSchema} />
}