fickle basin
Kind of puzzled here. So, TLDR, I am creating a contact form for a site I am developing. I need to update the UI when the form is submitted. So, naturally, I use useSubmission() as shown in the slimmed down snippet below (only showing the relevant parts as it’s kinda big). However, the UI doesn't update when the form is submitted. The form is being submitted, as I can confirm from my logs and the CRM its integrated with is getting the data). But, the UI isn't updating. Is useSubmission() not reactive? Or is there something I am doing wrong here?
const ContactPage: Component = () => {
const [messageSent, setMessageSent] = createSignal(false);
const submission = useSubmission(submitMessageAction);
const [serverError, setServerError] = createSignal("");
createEffect(() => {
logger.debug("Responding to Action");
const { error, result } = submission;
if (error) {
setServerError(error.message);
}
if (result) {
logger.debug("Form submitted successfully.");
if (result.statusCode === 200) {
setMessageSent(true);
}
}
});
return (
<MainLayout>
<Title>Contact - {siteName}</Title>
<main class="px-6 py-8 lg:px-8">
<PageHeader heading="Questions? Concerns? Or Just Want to Reach Out?" />
<section class=" mt-16 mx-auto max-w-2xl text-center">
<Show
when={!messageSent()}
fallback={
...
}
>
<Form action={submitMessageAction}>
<Show when={submission.error}>
<span>{(submission.error as Error).message}</span>
</Show>
<TextField
autocomplete="first_name"
id="first-name"
name="first-name"
placeholder="First Name"
edited={message.nameEdited.first}
onChange={(newValue) =>
updateFirstName(newValue.currentTarget.value)
}
validator={() => message.nameError.first}
/>
<TextField
autocomplete="last_name"
id="last-name"
name="last-name"
placeholder="Last Name"
edited={message.nameEdited.last}
onChange={(event) => updateLastName(event.currentTarget.value)}
validator={() => message.nameError.last}
/>
<TextField
autocomplete="email"
id="email"
name="email"
placeholder="Email Address"
type="email"
edited={message.emailEdited}
onChange={(event) => updateEmail(event.currentTarget.value)}
validator={() => message.emailError}
/>
<TextField
id="subject"
name="subject"
placeholder="Subject"
edited={message.subjectEdited}
onChange={(event) => updateSubject(event.currentTarget.value)}
validator={() => message.subjectError}
/>
<TextArea
name="message"
id="message"
rows={8}
placeholder="Your Message"
edited={message.messageEdited}
onChange={(event) => updateMessage(event.currentTarget.value)}
validator={() => message.messageError}
/>
<PrimaryActionButton
text={
submission.pending ? "Sending message..." : "Send Message"
}
type="submit"
disabled={!canSendMessage() && !submission.pending}
/>
</Form>
</Show>
</section>
</main>
</MainLayout>
);
limpid umbra