State machine cho UI: loại bỏ những trạng thái không thể xảy ra

const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [error, setError] = useState<string | null>(null);
const [data, setData] = useState<Order[] | null>(null);

async function load() {
  setIsLoading(true);
  try {
    setData(await fetchOrders());
  } catch (e) {
    setIsError(true);
    setError(String(e));
  } finally {
    setIsLoading(false);
  }
}

type FetchState<T> =
  | { status: "idle" }
  | { status: "loading"; previous: T | null }
  | { status: "success"; data: T }
  | { status: "failure"; error: string; previous: T | null };

import { useReducer } from "react";

type FormValues = { name: string; email: string; slot: string };

type State =
  | { status: "editing"; values: FormValues; fieldErrors: Partial<Record<keyof FormValues, string>> }
  | { status: "submitting"; values: FormValues; requestId: number }
  | { status: "failed"; values: FormValues; message: string }
  | { status: "confirmed"; bookingId: string };

type Event =
  | { type: "CHANGE"; field: keyof FormValues; value: string }
  | { type: "SUBMIT"; requestId: number }
  | { type: "SUBMIT_OK"; requestId: number; bookingId: string }
  | { type: "SUBMIT_ERROR"; requestId: number; message: string }
  | { type: "CANCEL" }
  | { type: "RETRY"; requestId: number }
  | { type: "RESET" };

const emptyValues: FormValues = { name: "", email: "", slot: "" };
export const initialState: State = { status: "editing", values: emptyValues, fieldErrors: {} };

// Guard: điều kiện để một chuyển đổi được phép xảy ra
function validate(values: FormValues): Partial<Record<keyof FormValues, string>> {
  const errors: Partial<Record<keyof FormValues, string>> = {};
  if (!values.name.trim()) errors.name = "Vui lòng nhập tên";
  if (!values.email.includes("@")) errors.email = "Email không hợp lệ";
  if (!values.slot) errors.slot = "Hãy chọn khung giờ";
  return errors;
}

export function reducer(state: State, event: Event): State {
  switch (state.status) {
    case "editing":
      switch (event.type) {
        case "CHANGE":
          return { ...state, values: { ...state.values, [event.field]: event.value } };
        case "SUBMIT": {
          const fieldErrors = validate(state.values);
          if (Object.keys(fieldErrors).length > 0) return { ...state, fieldErrors };
          return { status: "submitting", values: state.values, requestId: event.requestId };
        }
        default:
          return state;
      }
    case "submitting":
      switch (event.type) {
        case "SUBMIT_OK":
          // Bỏ qua response của request cũ (đã huỷ hoặc đã bị thay thế)
          if (event.requestId !== state.requestId) return state;
          return { status: "confirmed", bookingId: event.bookingId };
        case "SUBMIT_ERROR":
          if (event.requestId !== state.requestId) return state;
          return { status: "failed", values: state.values, message: event.message };
        case "CANCEL":
          return { status: "editing", values: state.values, fieldErrors: {} };
        default:
          return state; // SUBMIT lần hai bị bỏ qua — không cần disable thủ công ở nhiều nơi
      }
    case "failed":
      switch (event.type) {
        case "RETRY":
          return { status: "submitting", values: state.values, requestId: event.requestId };
        case "CHANGE":
          return {
            status: "editing",
            values: { ...state.values, [event.field]: event.value },
            fieldErrors: {},
          };
        default:
          return state;
      }
    case "confirmed":
      return event.type === "RESET" ? initialState : state;
  }
}

import { useEffect, useReducer, useRef } from "react";

declare function createBooking(values: FormValues, signal: AbortSignal): Promise<{ id: string }>;

export function useBookingForm() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const nextId = useRef(0);

  const submitting = state.status === "submitting" ? state : null;

  useEffect(() => {
    if (!submitting) return;
    const controller = new AbortController();
    const { requestId, values } = submitting;
    createBooking(values, controller.signal)
      .then((res) => dispatch({ type: "SUBMIT_OK", requestId, bookingId: res.id }))
      .catch((err: unknown) => {
        if (controller.signal.aborted) return;
        dispatch({ type: "SUBMIT_ERROR", requestId, message: err instanceof Error ? err.message : "Lỗi không xác định" });
      });
    return () => controller.abort(); // rời trạng thái submitting → huỷ request
  }, [submitting]);

  return {
    state,
    change: (field: keyof FormValues, value: string) => dispatch({ type: "CHANGE", field, value }),
    submit: () => dispatch({ type: "SUBMIT", requestId: ++nextId.current }),
    retry: () => dispatch({ type: "RETRY", requestId: ++nextId.current }),
    cancel: () => dispatch({ type: "CANCEL" }),
    reset: () => dispatch({ type: "RESET" }),
  };
}

// Success, Pending, Fields là các component trình bày đơn giản, chỉ nhận props
function BookingForm() {
  const { state, change, submit, retry, cancel, reset } = useBookingForm();

  switch (state.status) {
    case "confirmed":
      return <Success bookingId={state.bookingId} onNew={reset} />;
    case "submitting":
      return <Pending values={state.values} onCancel={cancel} />;
    case "failed":
      return <Fields values={state.values} onChange={change} banner={state.message} onRetry={retry} />;
    case "editing":
      return <Fields values={state.values} errors={state.fieldErrors} onChange={change} onSubmit={submit} />;
  }
}