src/components/News/News.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import SocialShare from 'src/components/SocialShare'
import { getBaseUrl } from 'src/utils'
import Ad from '../Ad'
import { formatMessage } from 'src/translations'
import styles from './News.module.scss'
import { isOnline, removeListeners } from 'src/utils'

class News extends Component {
  state = { isModalOpen: false, isOnline: true }

  componentDidMount() {
    if (typeof window !== 'undefined') {
      window.document.body.classList.add('white-bg')
    }
    isOnline(this)
  }

  componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.document.body.classList.remove('white-bg')
    }
    removeListeners()
  }

  toggleModal = () => {
    this.setState({ isModalOpen: !this.state.isModalOpen })
  }

  render() {
    const {
      className,
      news: {
        bodyNode: {
          childMarkdownRemark: { html },
        },
        photographer,
        author,
        publishdate,
        title,
        slug,
      },
      locale,
    } = this.props

    const buttonContainer = (
      <button className={styles.button} onClick={this.toggleModal}>
        <span className={styles.buttonText}>{formatMessage(locale, 'share')}</span>
        <SocialShare
          className={styles.share}
          isWhite={true}
          title={title}
          url={`${getBaseUrl(locale)}news/${slug}`}
          isModalOpen={this.state.isModalOpen}
          toggleModal={this.toggleModal}
        />
      </button>
    )
    return (
      <div className={classNames(className, styles.root)}>
        <div className={styles.inner}>
          <article className={styles.article} dangerouslySetInnerHTML={{ __html: html }} />
          <div className={classNames(styles.ad, { [styles.sticky]: html.length <= 600 })}>
            <Ad locale={locale} isLong />
          </div>
        </div>
        <div className={styles.meta}>
          <div className={styles.publishDate}>{publishdate}</div>
          {author && (
            <div className={styles.author}>
              <strong>{formatMessage(locale, 'author')}</strong>
              <span>{author}</span>
            </div>
          )}
          {photographer && (
            <div className={styles.photographer}>
              <strong>{formatMessage(locale, 'photo')}</strong>
              <span>{photographer}</span>
            </div>
          )}
        </div>
        <div className={styles.buttonContainer}>
          {this.state.isOnline ? buttonContainer : <div className={styles.offlineMode}>{buttonContainer}</div>}
        </div>
      </div>
    )
  }
}

News.propTypes = {
  className: PropTypes.string,
  news: PropTypes.shape({
    html: PropTypes.string,
    photographer: PropTypes.string,
    author: PropTypes.string,
    publishdate: PropTypes.string,
    title: PropTypes.string,
  }),
  locale: PropTypes.string.isRequired,
}

export default News