This is the interactive counterpart to our talk at Remix Conf 2022. Get the full slides.
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} />
}
This is the interactive counterpart to our talk at Remix Conf 2022. Get the full slides.
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} />
}