render()

in aws-kendra-transcribe-media-search/src/search/resultsPanel/TopResults.tsx [156:216]

• 55 lines of code
• 7 McCabe index (conditional complexity)

  render() {
    const { results } = this.props;
    const resultsToShow = results.map(this.renderResults);

    if (isNullOrUndefined(results) || results.length === 0) {
      return null;
    }

    return (
      <div className="result-container card">
        <div className="card-title">{KENDRA_SUGGESTED_ANSWERS}</div>
        <div className="container-divider" />
        <div className="carousel-relative-wrapper inside-card-result-container">
          <div className="carousel-wrapper">
            <div className="carousel-container">
              <div className="result-item">
                {resultsToShow[this.state.currentResultIndex]}
              </div>

              {resultsToShow.map((res, idx) => (
                <div className="offscreen result-item" key={idx}>
                  {res}
                </div>
              ))}
            </div>
          </div>

          {this.state.currentResultIndex > 0 && (
            <div className="arrow-left">
              <div className="arrow" onClick={this.updatePreviousResultIndex}>
                <SingleLeftArrow />
              </div>
            </div>
          )}

          {this.state.currentResultIndex < this.state.totalResults - 1 && (
            <div className="arrow-right">
              <div className="arrow" onClick={this.updateNextResultIndex}>
                <SingleRightArrow />
              </div>
            </div>
          )}
        </div>

        {this.state.totalResults > 1 && (
          <ul className="kendra-carousel-indicators">
            {[...Array(this.state.totalResults)].map((x, index) => (
              <li
                key={index}
                className={
                  index === this.state.currentResultIndex
                    ? "kendra-carousel-indicator kendra-carousel-indicator--active"
                    : "kendra-carousel-indicator"
                }
              />
            ))}
          </ul>
        )}
      </div>
    );
  }