Form State Machine

type FormState =
  | { status: "editing"; values: Record<string, string> }
  | { status: "submitting"; values: Record<string, string> }
  | { status: "success"; message: string }
  | { status: "error"; values: Record<string, string>; message: string };

type FormAction =
  | { type: "change"; field: string; value: string }
  | { type: "submit" }
  | { type: "success"; message: string }
  | { type: "failure"; message: string };

function updateForm(state: FormState, event: FormAction): FormState {
  if (event.type === "change" && state.status !== "success") {
    return {
      status: "editing",
      values: { ...state.values, [event.field]: event.value },
    };
  }

  if (event.type === "submit" && (state.status === "editing" || state.status === "error")) {
    return { status: "submitting", values: state.values };
  }

  if (event.type === "success" && state.status === "submitting") {
    return { status: "success", message: event.message };
  }

  if (event.type === "failure" && state.status === "submitting") {
    return { status: "error", values: state.values, message: event.message };
  }

  return state;
}

let state: FormState = { status: "editing", values: {} };
state = updateForm(state, { type: "change", field: "email", value: "[email protected]" });
state = updateForm(state, { type: "submit" });
state = updateForm(state, { type: "success", message: "Saved" });

console.log(state);