Складні форми

const cityOptions = {
  ua: [
    { value: "kyiv", label: "Київ" },
    { value: "lviv", label: "Львів" }
  ],
  pl: [
    { value: "warsaw", label: "Варшава" },
    { value: "krakow", label: "Краків" }
  ]
};

const cities = cityOptions[state.delivery.country] ?? [];

return {
  ...state,
  customer: {
    ...state.customer,
    firstName: action.value
  }
};

{
  country: "pl",
  city: "kyiv"
}

import { useReducer, useState } from "react";

const cityOptions = {
  ua: [
    { value: "kyiv", label: "Київ" },
    { value: "lviv", label: "Львів" },
    { value: "odesa", label: "Одеса" }
  ],
  pl: [
    { value: "warsaw", label: "Варшава" },
    { value: "krakow", label: "Краків" },
    { value: "gdansk", label: "Гданськ" }
  ]
};

const initialState = {
  customer: {
    firstName: "",
    lastName: "",
    email: ""
  },
  delivery: {
    country: "ua",
    city: "kyiv",
    address: {
      street: "",
      house: "",
      apartment: ""
    }
  },
  preferences: {
    newsletter: false,
    contactMethod: "email"
  },
  contacts: []
};

function formReducer(state, action) {
  switch (action.type) {
    case "customer/update":
      return {
        ...state,
        customer: {
          ...state.customer,
          [action.field]: action.value
        }
      };

    case "delivery/countryChanged": {
      const cities = cityOptions[action.value] ?? [];

      return {
        ...state,
        delivery: {
          ...state.delivery,
          country: action.value,
          city: cities[0]?.value ?? ""
        }
      };
    }

    case "delivery/cityChanged":
      return {
        ...state,
        delivery: {
          ...state.delivery,
          city: action.value
        }
      };

    case "delivery/addressUpdated":
      return {
        ...state,
        delivery: {
          ...state.delivery,
          address: {
            ...state.delivery.address,
            [action.field]: action.value
          }
        }
      };

    case "preferences/updated":
      return {
        ...state,
        preferences: {
          ...state.preferences,
          [action.field]: action.value
        }
      };

    case "contact/added":
      return {
        ...state,
        contacts: [
          ...state.contacts,
          {
            id: Date.now(),
            type: "phone",
            value: ""
          }
        ]
      };

    case "contact/updated":
      return {
        ...state,
        contacts: state.contacts.map((contact) =>
          contact.id === action.id
            ? {
                ...contact,
                [action.field]: action.value
              }
            : contact
        )
      };

    case "contact/removed":
      return {
        ...state,
        contacts: state.contacts.filter(
          (contact) => contact.id !== action.id
        )
      };

    case "form/reset":
      return initialState;

    default:
      return state;
  }
}

function validateForm(state) {
  const errors = {};

  if (!state.customer.firstName.trim()) {
    errors["customer.firstName"] = "Вкажіть ім’я";
  }

  if (!state.customer.lastName.trim()) {
    errors["customer.lastName"] = "Вкажіть прізвище";
  }

  if (!state.customer.email.trim()) {
    errors["customer.email"] = "Вкажіть електронну пошту";
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.customer.email)) {
    errors["customer.email"] = "Некоректний формат електронної пошти";
  }

  if (!state.delivery.country) {
    errors["delivery.country"] = "Оберіть країну";
  }

  if (!state.delivery.city) {
    errors["delivery.city"] = "Оберіть місто";
  }

  if (!state.delivery.address.street.trim()) {
    errors["delivery.address.street"] = "Вкажіть вулицю";
  }

  if (!state.delivery.address.house.trim()) {
    errors["delivery.address.house"] = "Вкажіть номер будинку";
  }

  state.contacts.forEach((contact) => {
    if (!contact.value.trim()) {
      errors[`contacts.${contact.id}`] = "Вкажіть значення контакту";
    }
  });

  return errors;
}

function FieldError({ children }) {
  if (!children) {
    return null;
  }

  return (
    <small role="alert" style={{ color: "crimson", display: "block" }}>
      {children}
    </small>
  );
}

export default function App() {
  const [state, dispatch] = useReducer(formReducer, initialState);
  const [submitted, setSubmitted] = useState(false);
  const [savedData, setSavedData] = useState(null);

  const errors = validateForm(state);
  const cities = cityOptions[state.delivery.country] ?? [];

  function handleSubmit(event) {
    event.preventDefault();
    setSubmitted(true);

    if (Object.keys(errors).length > 0) {
      setSavedData(null);
      return;
    }

    setSavedData(state);
  }

  function handleReset() {
    dispatch({ type: "form/reset" });
    setSubmitted(false);
    setSavedData(null);
  }

  return (
    <main>
      <h1>Дані клієнта</h1>

      <form onSubmit={handleSubmit} noValidate>
        <fieldset>
          <legend>Особисті дані</legend>

          <label>
            Ім’я
            <input
              value={state.customer.firstName}
              onChange={(event) =>
                dispatch({
                  type: "customer/update",
                  field: "firstName",
                  value: event.target.value
                })
              }
              aria-invalid={
                submitted && Boolean(errors["customer.firstName"])
              }
            />
          </label>
          <FieldError>
            {submitted && errors["customer.firstName"]}
          </FieldError>

          <label>
            Прізвище
            <input
              value={state.customer.lastName}
              onChange={(event) =>
                dispatch({
                  type: "customer/update",
                  field: "lastName",
                  value: event.target.value
                })
              }
              aria-invalid={
                submitted && Boolean(errors["customer.lastName"])
              }
            />
          </label>
          <FieldError>
            {submitted && errors["customer.lastName"]}
          </FieldError>

          <label>
            Електронна пошта
            <input
              type="email"
              value={state.customer.email}
              onChange={(event) =>
                dispatch({
                  type: "customer/update",
                  field: "email",
                  value: event.target.value
                })
              }
              aria-invalid={submitted && Boolean(errors["customer.email"])}
            />
          </label>
          <FieldError>
            {submitted && errors["customer.email"]}
          </FieldError>
        </fieldset>

        <fieldset>
          <legend>Адреса доставки</legend>

          <label>
            Країна
            <select
              value={state.delivery.country}
              onChange={(event) =>
                dispatch({
                  type: "delivery/countryChanged",
                  value: event.target.value
                })
              }
              aria-invalid={
                submitted && Boolean(errors["delivery.country"])
              }
            >
              <option value="ua">Україна</option>
              <option value="pl">Польща</option>
            </select>
          </label>
          <FieldError>
            {submitted && errors["delivery.country"]}
          </FieldError>

          <label>
            Місто
            <select
              value={state.delivery.city}
              onChange={(event) =>
                dispatch({
                  type: "delivery/cityChanged",
                  value: event.target.value
                })
              }
              aria-invalid={submitted && Boolean(errors["delivery.city"])}
            >
              {cities.map((city) => (
                <option key={city.value} value={city.value}>
                  {city.label}
                </option>
              ))}
            </select>
          </label>
          <FieldError>
            {submitted && errors["delivery.city"]}
          </FieldError>

          <label>
            Вулиця
            <input
              value={state.delivery.address.street}
              onChange={(event) =>
                dispatch({
                  type: "delivery/addressUpdated",
                  field: "street",
                  value: event.target.value
                })
              }
              aria-invalid={
                submitted && Boolean(errors["delivery.address.street"])
              }
            />
          </label>
          <FieldError>
            {submitted && errors["delivery.address.street"]}
          </FieldError>

          <label>
            Номер будинку
            <input
              value={state.delivery.address.house}
              onChange={(event) =>
                dispatch({
                  type: "delivery/addressUpdated",
                  field: "house",
                  value: event.target.value
                })
              }
              aria-invalid={
                submitted && Boolean(errors["delivery.address.house"])
              }
            />
          </label>
          <FieldError>
            {submitted && errors["delivery.address.house"]}
          </FieldError>

          <label>
            Квартира
            <input
              value={state.delivery.address.apartment}
              onChange={(event) =>
                dispatch({
                  type: "delivery/addressUpdated",
                  field: "apartment",
                  value: event.target.value
                })
              }
            />
          </label>
        </fieldset>

        <fieldset>
          <legend>Налаштування зв’язку</legend>

          <label>
            Бажаний спосіб зв’язку
            <select
              value={state.preferences.contactMethod}
              onChange={(event) =>
                dispatch({
                  type: "preferences/updated",
                  field: "contactMethod",
                  value: event.target.value
                })
              }
            >
              <option value="email">Електронна пошта</option>
              <option value="phone">Телефон</option>
            </select>
          </label>

          <label>
            <input
              type="checkbox"
              checked={state.preferences.newsletter}
              onChange={(event) =>
                dispatch({
                  type: "preferences/updated",
                  field: "newsletter",
                  value: event.target.checked
                })
              }
            />
            Отримувати новини електронною поштою
          </label>
        </fieldset>

        <fieldset>
          <legend>Додаткові контакти</legend>

          {state.contacts.length === 0 && (
            <p>Додаткові контакти ще не додані.</p>
          )}

          {state.contacts.map((contact) => (
            <div key={contact.id}>
              <label>
                Тип
                <select
                  value={contact.type}
                  onChange={(event) =>
                    dispatch({
                      type: "contact/updated",
                      id: contact.id,
                      field: "type",
                      value: event.target.value
                    })
                  }
                >
                  <option value="phone">Телефон</option>
                  <option value="telegram">Telegram</option>
                  <option value="viber">Viber</option>
                </select>
              </label>

              <label>
                Значення
                <input
                  value={contact.value}
                  onChange={(event) =>
                    dispatch({
                      type: "contact/updated",
                      id: contact.id,
                      field: "value",
                      value: event.target.value
                    })
                  }
                  aria-invalid={
                    submitted && Boolean(errors[`contacts.${contact.id}`])
                  }
                />
              </label>

              <FieldError>
                {submitted && errors[`contacts.${contact.id}`]}
              </FieldError>

              <button
                type="button"
                onClick={() =>
                  dispatch({
                    type: "contact/removed",
                    id: contact.id
                  })
                }
              >
                Видалити контакт
              </button>
            </div>
          ))}

          <button
            type="button"
            onClick={() => dispatch({ type: "contact/added" })}
          >
            Додати контакт
          </button>
        </fieldset>

        <div>
          <button type="submit">Зберегти</button>
          <button type="button" onClick={handleReset}>
            Очистити
          </button>
        </div>
      </form>

      {submitted && Object.keys(errors).length > 0 && (
        <p role="alert">Перевірте поля з помилками.</p>
      )}

      {savedData && (
        <section>
          <h2>Дані для відправлення</h2>
          <pre>{JSON.stringify(savedData, null, 2)}</pre>
        </section>
      )}
    </main>
  );
}

state.delivery.address.street

case "delivery/addressUpdated":
  return {
    ...state,
    delivery: {
      ...state.delivery,
      address: {
        ...state.delivery.address,
        [action.field]: action.value
      }
    }
  };

// Неправильно: властивості delivery.address буде втрачено
return {
  ...state,
  delivery: {
    address: {
      [action.field]: action.value
    }
  }
};

// Неправильно
contact.value = newValue;

contacts: state.contacts.map((contact) =>
  contact.id === action.id
    ? { ...contact, value: action.value }
    : contact
)

contacts: state.contacts.filter(
  (contact) => contact.id !== action.id
)

{state.contacts.map((contact) => (
  <div key={contact.id}>
    ...
  </div>
))}

<input
  value={state.customer.firstName}
  onChange={handleChange}
/>

<input
  type="checkbox"
  checked={state.preferences.newsletter}
  onChange={(event) =>
    dispatch({
      type: "preferences/updated",
      field: "newsletter",
      value: event.target.checked
    })
  }
/>

{
  "customer.email": "Некоректний формат електронної пошти",
  "delivery.address.street": "Вкажіть вулицю"
}

// Неправильно
state.delivery.address.street = value;

const cities = cityOptions[state.delivery.country] ?? [];

<input type="checkbox" checked={value} />

{
  firstName: "",
  email: "",
  newsletter: false
}