render()

in website/src/pages/videos.js [51:118]

• 66 lines of code
• 3 McCabe index (conditional complexity)

  render() {
    const showcase = VideosJSON.videos.map(
      ({title, description, type, url}, index) => {
        const textMarkup = (
          <div className="blockContent padding-horiz--lg">
            <h2>
              <a href={url}>{title}</a>
            </h2>
            <div>
              <MarkdownBlock>{description}</MarkdownBlock>
            </div>
          </div>
        );
        const videoMarkup = (
          <div className="video">
            <Video url={url} type={type} />
          </div>
        );

        return (
          <Container key={url} padding={['bottom', 'top']}>
            <a className="hash-link" href={`#${title}`} />
            {index % 2 === 0 ? (
              <div className="blockElement imageAlignSide threeByGridBlock">
                {videoMarkup}
                {textMarkup}
              </div>
            ) : (
              <div className="blockElement imageAlignSide threeByGridBlock">
                {textMarkup}
                {videoMarkup}
              </div>
            )}
          </Container>
        );
      }
    );

    return (
      <div className="mainContainerV1">
        <Container padding={['bottom', 'top']}>
          <div className={styles.showcaseSection}>
            <div className={styles.prose}>
              <h1>
                <Translate>Talks & Videos</Translate>
              </h1>
              <p>
                <Translate>
                  We understand that reading through docs can be boring
                  sometimes. Here is a community curated list of talks & videos
                  around Jest.
                </Translate>
              </p>
            </div>
          </div>
          {showcase}
          <div style={{textAlign: 'center'}}>
            <a
              href={VideosJSON.editUrl}
              className="button button--primary button--outline"
            >
              <Translate>Add your favorite talk</Translate>
            </a>
          </div>
        </Container>
      </div>
    );
  }