Créer un composant de formulaire amélioré

1
type UserActionResponse = {
2
  success: boolean
3
  slug: string           // redirection facultative
4
  errors: {
5
    firstName?: string[]
6
    lastName?: string[]
7
  }
8
}

1
export async function addUser({ firstName, lastName }: {
2
  firstName: string
3
  lastName: string
4
}): Promise<UserActionResponse> {
5

6
  const res: UserActionResponse = {
7
    success: true,
8
    slug: '',
9
    errors: { firstName: [], lastName: [] }
10
  }
11

12
  // validation manuelle – côté serveur
13
  if (!firstName) {
14
    res.errors.firstName!.push('Le prénom est requis')
15
    res.success = false
16
  }
17
  if (!lastName) {
18
    res.errors.lastName!.push('Le nom est requis')
19
    res.success = false
20
  }
21

22
  if (!res.success) return res       // on stoppe net
23

24
  /* …vérif unicité, insertion DB… */
25
  res.slug = firstName.toLowerCase()
26
  return res
27
}

1
import { data, redirect } from "react-router"
2

3
/* … */
4

5
export async function action({ request, params }) {
6
  const fd = await request.formData()
7
  const firstName = fd.get('firstName') as string
8
  const lastName  = fd.get('lastName')  as string
9
  const isNew = params.userSlug === 'new'
10

11
  if (isNew) {
12
    const created = await addUser({ firstName, lastName })
13

14
    if (!created.success) {
15
      // ↩︎  Renvoi JSON + statut 400
16
      return data(created, { status: 400 })
17
    }
18

19
    // ↪︎  Tout est ok → redirection
20
    return redirect(
21
      href('/users/:userSlug', { userSlug: created.slug })
22
    )
23
  }
24

25
  /* …mise à jour existant… */
26
}

1
import { useActionData } from "react-router"
2

3
export default function UserForm() {
4
  const actionData = useActionData<typeof action>() // tipé gratis
5
  /* … */
6
}

1
import { useNavigation } from "react-router"
2

3
const navigation = useNavigation()
4
const isSubmitting = navigation.state === 'submitting'

1
export type ListOfErrors = Array<string | null | undefined> | null | undefined
2

3
export function Field({
4
  labelProps,
5
  inputProps,
6
  errors
7
}: {
8
  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
9
  inputProps: React.InputHTMLAttributes<HTMLInputElement>
10
  errors?: ListOfErrors
11
}) {
12
  return (
13
    <div className="flex flex-col gap-1">
14
      <label {...labelProps} />
15
      <input
16
        {...inputProps}
17
        aria-invalid={Boolean(errors?.length)}
18
        aria-describedby={errors?.length ? `${inputProps.id}-error` : undefined}
19
        className="px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500"
20
      />
21
      {errors?.length ? (
22
        <ul id={`${inputProps.id}-error`} className="text-red-600 text-sm">
23
          {errors.map(e => <li key={e}>{e}</li>)}
24
        </ul>
25
      ) : null}
26
    </div>
27
  )
28
}

1
<Form method="POST" className="space-y-3">
2
  <Field
3
    labelProps={{ children: "Prénom", htmlFor: "firstName" }}
4
    inputProps={{
5
      id: "firstName",
6
      name: "firstName",
7
      type: "text",
8
      defaultValue: user?.firstName ?? ""
9
    }}
10
    errors={actionData?.errors.firstName}
11
  />
12

13
  <Field
14
    labelProps={{ children: "Nom", htmlFor: "lastName" }}
15
    inputProps={{
16
      id: "lastName",
17
      name: "lastName",
18
      type: "text",
19
      defaultValue: user?.lastName ?? ""
20
    }}
21
    errors={actionData?.errors.lastName}
22
  />
23

24
  <button
25
    type="submit"
26
    disabled={isSubmitting}
27
    className="px-4 py-2 rounded-md bg-blue-600 text-white
28
               disabled:opacity-50 transition-colors"
29
  >
30
    {isSubmitting ? "En cours…" : isNew ? "Ajouter" : "Modifier"}
31
  </button>
32
</Form>