export type CreateApplication = {
title: string;
company: string;
};
export const addApplication = action(
async ({ title, company }: CreateApplication) => {
"use server";
const userId = await getAuthUser();
if (!userId) throw redirect("/");
const [result] = await db
.insert(application)
.values({ title: title, company: company, userId })
.returning();
return result;
},
"add-application",
);
export function CreateForm() {
const [_, { Form, Field }] = createForm<CreateApplication>();
const create = useAction(addApplication);
const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
console.log("submission");
create(values);
};
const submission = useSubmission(addApplication);
return (
<>
<Form onSubmit={handleSubmit} method="post">
<Field name="company">
{(field, props) => (
<>
<input {...props} type="text" placeholder="Company" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<Field name="title">
{(field, props) => (
<>
<input {...props} type="text" placeholder="title" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<button type="submit">Create</button>
</Form>
<Show when={submission.error}>
<p>{submission.error.message}</p>
</Show>
</>
);
}
export type CreateApplication = {
title: string;
company: string;
};
export const addApplication = action(
async ({ title, company }: CreateApplication) => {
"use server";
const userId = await getAuthUser();
if (!userId) throw redirect("/");
const [result] = await db
.insert(application)
.values({ title: title, company: company, userId })
.returning();
return result;
},
"add-application",
);
export function CreateForm() {
const [_, { Form, Field }] = createForm<CreateApplication>();
const create = useAction(addApplication);
const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
console.log("submission");
create(values);
};
const submission = useSubmission(addApplication);
return (
<>
<Form onSubmit={handleSubmit} method="post">
<Field name="company">
{(field, props) => (
<>
<input {...props} type="text" placeholder="Company" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<Field name="title">
{(field, props) => (
<>
<input {...props} type="text" placeholder="title" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<button type="submit">Create</button>
</Form>
<Show when={submission.error}>
<p>{submission.error.message}</p>
</Show>
</>
);
}