src/components/Home/Home.js

import React, { Component } from 'react'
import { StaticQuery, graphql } from 'gatsby'
import classNames from 'classnames'
import { compareDesc } from 'date-fns'
import Video from 'src/components/Video'
import Audio from 'src/components/Audio'
import Item from './Item'
import ItemWithoutPreview from './ItemWithoutPreview'
import styles from './Home.module.scss'
import Ad from '../Ad'
import OfflineContainer from 'src/components/OfflineContainer'
import { isOnline, removeListeners } from 'src/utils'

class Home extends Component {
  state = {
    isOnline: true,
  }

  componentDidMount() {
    isOnline(this)
  }

  componentWillUnmount() {
    removeListeners()
  }

  render() {
    const { className, interviews, channels, podcasts, news, articlesNumber, locale } = this.props
    const articles = [...interviews, ...news].sort((articlePrev, articleNext) =>
      compareDesc(articlePrev.publishDate, articleNext.publishDate),
    )
    const slicedArticles = articles.slice(0, articlesNumber)
    return (
      <div>
        <section className={classNames(className, styles.root)}>
          <div id="interviews" className={styles.interviews}>
            <div className={styles.interviewsWrapper}>
              {slicedArticles
                .slice(0, 2)
                .map((item) => (
                  <ItemWithoutPreview layoutFlag={true} key={item.node.slug} {...item} locale={locale} isFullWidth />
                ))}
            </div>
            <div className={styles.calculator}>
              <Ad locale={locale} />
            </div>
          </div>

          {channels &&
            locale !== 'en' && (
              <div id="video" className={styles.videoWrapper}>
                {!this.state.isOnline && <OfflineContainer locale={locale} />}
                <Video channels={channels} locale={locale} />
              </div>
            )}

          {podcasts &&
            locale !== 'en' && (
              <div id="podcasts" className={styles.podcastsWrapper}>
                {!this.state.isOnline && <OfflineContainer locale={locale} />}

                <Audio podcasts={podcasts} onChangeData={this.props.onChangeData} locale={locale} />
              </div>
            )}

          <div className={styles.articles}>
            {slicedArticles.slice(2, 7).map((item, index) => {
              const lastItem = slicedArticles.slice(9).length
              return index === lastItem ? (
                <Item locale={locale} key={item.node.slug} {...item} />
              ) : (
                <ItemWithoutPreview key={item.node.slug} {...item} locale={locale} />
              )
            })}
          </div>
        </section>
      </div>
    )
  }
}

Home.defaultProps = {
  articlesNumber: 6,
}

export default (props) => (
  <StaticQuery
    query={graphql`
      query {
        configuration: markdownRemark(frontmatter: { templateKey: { eq: "Configuration" } }) {
          frontmatter {
            articlesNumber
          }
        }
        channels: allDatoCmsVideo {
          edges {
            node {
              videos {
                title
                videoId
                description
                duration
                publishDate
              }
            }
          }
        }
        podcasts: allDatoCmsPodcast {
          edges {
            node {
              title
              duration
              publishDate
              guest
              cover {
                url
              }
              podcast {
                url
              }
              slug
            }
          }
        }
        interviews: allDatoCmsInterview {
          edges {
            node {
              title
              description
              author
              photographer
              publishDate
              podcast {
                podcastTitle
                podcastGuest
                podcastCover {
                  url
                }
                duration
                podcast {
                  url
                }
              }
              image {
                url
                fluid(maxWidth: 1240, imgixParams: { fm: "jpg", auto: "compress" }) {
                  ...GatsbyDatoCmsFluid
                }
              }
              summary {
                title
                description
              }
              bodyNode {
                childMarkdownRemark {
                  html
                }
              }
              slug
            }
          }
        }
      }
    `}
    render={({ interviews: { edges }, channels, podcasts, configuration: { articlesNumber } }) => {
      return (
        <Home interviews={edges} channels={channels} articlesNumber={articlesNumber} podcasts={podcasts} {...props} />
      )
    }}
  />
)