StepContainer.tsx

import * as React from 'react';
import { Box } from 'ink';
import { Message } from '../components/Message';
import { StepRunner, StepRunnerStep, OnSuccessOptions } from './StepRunner';
import { Config } from '../config';
import { ErrorMessage } from '../components/ErrorMessage';
import { SuccessMessage } from '../components/SuccessMessage';
import { ValidationError } from '../errors';
import { useConfig } from '../config/configContext';
import { useExitOnError } from '../utils/useExitOnError';

export type StepContainerProps = {
  steps: StepRunnerStep[];
  validator?: (config: Config) => void;
};

export function StepContainer({ steps, validator }: StepContainerProps) {
  const config = useConfig();
  const [validationError, setValidationError] = React.useState<ValidationError>();
  const [validationDone, setValidationDone] = React.useState(false);
  const [runtime, setRuntime] = React.useState(0);

  useExitOnError(validationError);

  React.useEffect(() => {
    if (validator) {
      try {
        validator(config);
      } catch (err) {
        setValidationError(err);
        process.exitCode = 1;
      }
    }
    setValidationDone(true);
  }, [validator, config]);

  const handleSuccess = React.useCallback(({ runtimeInSeconds }: OnSuccessOptions) => {
    setRuntime(runtimeInSeconds);
  }, []);

  if (!validationDone) {
    return null;
  }

  if (validationError) {
    return (
      <Box flexDirection="column" marginTop={1}>
        <ErrorMessage error={validationError} />
      </Box>
    );
  }

  return (
    <>
      <Box flexDirection="column" marginTop={1}>
        <Message emoji="wave">Welcome back!</Message>
        <StepRunner steps={steps} onSuccess={handleSuccess} />
      </Box>
      {runtime > 0 && <SuccessMessage runtime={runtime} />}
    </>
  );
}