#Type wizards needed

13 messages · Page 1 of 1 (latest)

robust zephyr
# 
import { Suspense, createSignal, createResource, Show } from "solid-js";
import { loginSchema } from "../lib/schemas";

async function postFormData(formData: FormData) {
  const response = await fetch("/api/login", {
    method: "POST",
    body: formData,
  });
  const data = await response.json();
  return data;
}

export default function LoginForm() {
  const [formData, setFormData] = createSignal<FormData>();
  const [errors, setErrors] = createSignal();
  const [response] = createResource(formData, postFormData);

  function submit(e: SubmitEvent) {
    e.preventDefault();
    setErrors(null);
    const data = new FormData(e.currentTarget as HTMLFormElement);
    const result = loginSchema.safeParse(data);
    if (!result.success) {
      const errors = result.error.flatten();
      setErrors(errors);
    }
    setFormData(data);
  }

  return (
    <form class="grid grid-cols-1 gap-1 max-w-lg" onSubmit={submit}>
      <label for="username">Username</label>
      <input
        type="text"
        id="username"
        name="username"
        class="rounded-md"
        required
      />
      <Show when={errors()}>
        {errors().fieldErrors.username && (
          <pre>{errors().fieldErrors.username}</pre>
        )}
      </Show>
      <label for="password">Password</label>
      <input
        type="password"
        id="password"
        name="password"
        class="rounded-md"
        required
      />
      <Show when={errors()}>
        {errors().fieldErrors.password && (
          <pre>{errors().fieldErrors.password}</pre>
        )}
      </Show>
      <button class="bg-gray-900 p-2 rounded-md mt-4 text-white">Send</button>
      <Suspense>{response() && <p>{response().message}</p>}</Suspense>
    </form>
  );
}
#

Nothing its set in stone I am open for any suggestions. My issue is that the tsx complains when I try to access errors().fieldErrors.password since I didn't pass a type in createSignal. I have no idea what type this should be
@random smelt

random smelt
#

Def cc @somber berry who's more likely to know the createSignal side of things

#

What's the return type of error.flatten() Kevin?

somber berry
#

Oh I would be using a resource, not two signals

#

Oh hang on you are using one

#

I’m on my phone, will look later

robust zephyr
robust zephyr
random smelt
robust zephyr
#

This looks promising I will give it a go 💜

#

this type gave me the flatten autocomplete type Errors = z.typeToFlattenedError<z.inferFormattedError<typeof loginSchema>> 🎉

robust zephyr
#

thanks Chris! 💜