SolidJSS
SolidJS•9mo ago•
3 replies
Je Suis Un Ami

Is useSubmission() not reactive?

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>
  );
Was this page helpful?