Managing Multi-State UI Transitions with Discriminated State Machine Objects

import { useState } from 'react';
 
const UI_STATUS = Object.freeze({
  IDLE: 'idle',
  SUBMITTING: 'submitting',
  SUCCESS: 'success',
  FAILURE: 'failure'
});
 
export function AsyncActionView() {
  const [state, setState] = useState({ status: UI_STATUS.IDLE, error: null });
 
  const executeAction = async () => {
    setState({ status: UI_STATUS.SUBMITTING, error: null });
    try {
      await new Promise((res) => setTimeout(res, 1000));
      setState({ status: UI_STATUS.SUCCESS, error: null });
    } catch (err) {
      setState({ status: UI_STATUS.FAILURE, error: err.message });
    }
  };
 
  switch (state.status) {
    case UI_STATUS.SUBMITTING:
      return <button disabled>Processing...</button>;
    case UI_STATUS.SUCCESS:
      return <p className="success-msg">Operation completed successfully!</p>;
    case UI_STATUS.FAILURE:
      return <div className="err-banner">Error: {state.error}</div>;
    case UI_STATUS.IDLE:
    default:
      return <button onClick={executeAction}>Start Action</button>;
  }
}