render()

in src/pr/CircleCICard.js [165:222]
52 lines of code
6 McCabe index (conditional complexity)

  render() {
    const status = this.props.status;

    let stepsElement = null;
    let artifactsElement = null;

    if (this.state.data) {
      let steps = [];
      for (const [i, step] of this.state.data.steps.entries()) {
        const name = step.name;

        let statusIcon = this.renderStatusIcon(step.actions[0].status);
        const iconStyle = { cursor: "pointer" };
        // Show the log viewer + toggle chevron
        const toggle = () => {
          step.log.shown = !step.log.shown;
          this.setState(this.state);
        };
        let icon = <BsFillCaretRightFill style={iconStyle} onClick={toggle} />;
        if (step.log.shown) {
          icon = <BsFillCaretDownFill style={iconStyle} onClick={toggle} />;
        }

        steps.push(
          <div
            style={{ marginBottom: "2px" }}
            key={`status-${status.context}-${name}-${i}`}
          >
            {statusIcon} <span>{name}</span> {icon} {this.renderLogViewer(step)}
            {/* TODO: These are unimplemented for now since CircleCI provides
             a good view into them already */}
            {/* {renderResultsButton} */}
            {/* {artifactDetails} */}
          </div>
        );
      }
      stepsElement = <div style={{ padding: "6px" }}>{steps}</div>;
    }

    return (
      <Card key={"card-" + status.context}>
        <Card.Body
          style={{
            backgroundColor:
              status.state === "FAILURE" ? "rgb(255 243 243)" : null,
          }}
        >
          <Card.Title>
            <a href={status.targetUrl}>{status.context}</a>
          </Card.Title>
          <div>
            {stepsElement}
            {artifactsElement}
          </div>
        </Card.Body>
      </Card>
    );
  }