export default function ContentProgressStepper()

in hasher-matcher-actioner/webapp/src/components/ContentProgressStepper.tsx [165:276]
111 lines of code
6 McCabe index (conditional complexity)

export default function ContentProgressStepper({
  submittedAt,
  hashedAt,
  matchedAt,
  actionEvaluatedAt,
  actionPerformedAt,
}: ContentProgressStepperProps): JSX.Element {
  const currentStage = getStageFromTimestamps(
    hashedAt,
    matchedAt,
    actionEvaluatedAt,
    actionPerformedAt,
  );

  return (
    <Container className="progress-stepper">
      <Row className="stage">
        <StepperChannelSegment
          position="first"
          status={getStepperStatus(currentStage, StepperStages.Submitted)}
        />{' '}
        <Col xs={11}>
          <StageTitle>Submitted</StageTitle>
          <div className="stage-description">
            All content objects submitted are recorded in our database.
          </div>
          {submittedAt && (
            <StageTimeView
              stage={StepperStages.Submitted}
              completedAt={submittedAt}
            />
          )}
        </Col>
      </Row>
      <Row className="stage">
        <StepperChannelSegment
          position="in-between"
          status={getStepperStatus(currentStage, StepperStages.Hashed)}
        />{' '}
        <Col xs={11}>
          <StageTitle>Hashed</StageTitle>
          <div className="stage-description">
            These objects are then hashed into a variety of formats based on
            your configuration and the content&lsquo;s type.
          </div>
          {hashedAt && (
            <StageTimeView
              stage={StepperStages.Hashed}
              completedAt={hashedAt}
            />
          )}
        </Col>
      </Row>
      <Row className="stage">
        <StepperChannelSegment
          position="in-between"
          status={getStepperStatus(currentStage, StepperStages.Matched)}
        />{' '}
        <Col xs={11}>
          <StageTitle>Matched</StageTitle>
          <div className="stage-description">
            The hashes are then matched against the datasets available from
            threatexchange.
          </div>
          {matchedAt && (
            <StageTimeView
              stage={StepperStages.Matched}
              completedAt={matchedAt}
            />
          )}
        </Col>
      </Row>
      <Row className="stage">
        <StepperChannelSegment
          position="in-between"
          status={getStepperStatus(currentStage, StepperStages.ActionEvaluated)}
        />{' '}
        <Col xs={11}>
          <StageTitle>Needs Actioning</StageTitle>
          <div className="stage-description">
            Your Action Rules then determine whether to perform actions on these
            matches.
          </div>
          {actionEvaluatedAt && (
            <StageTimeView
              stage={StepperStages.ActionEvaluated}
              completedAt={actionEvaluatedAt}
            />
          )}
        </Col>
      </Row>
      <Row className="stage">
        <StepperChannelSegment
          position="last"
          status={getStepperStatus(currentStage, StepperStages.ActionPerformed)}
        />{' '}
        <Col xs={11}>
          <StageTitle>Actioned</StageTitle>
          <div className="stage-description">
            The actions determined in the previous stage are then performed.
          </div>
          {actionPerformedAt && (
            <StageTimeView
              stage={StepperStages.ActionPerformed}
              completedAt={actionPerformedAt}
            />
          )}
        </Col>
      </Row>
    </Container>
  );
}