src/components/Footer/Footer.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import moment from 'moment'
import { Link } from 'gatsby'
import { OutboundLink } from 'gatsby-plugin-google-analytics'
import AnchorLink from 'react-anchor-link-smooth-scroll'
import logo from '../../img/theheroes_logo.svg'
import FacebookIcon from '../svg/FacebookIcon'
import YoutubeIcon from '../svg/YoutubeIcon'
import InstagramIcon from '../svg/InstagramIcon'
import TwitterIcon from '../svg/TwitterIcon'
import { formatMessage } from 'src/translations'
import styles from './Footer.module.scss'
import { isOnline, removeListeners } from 'src/utils'
import { getLink } from 'src/utils'

class Footer extends Component {
  state = { isOnline: true }

  componentDidMount() {
    isOnline(this)
  }

  componentWillUnmount() {
    removeListeners()
  }

  render() {
    const { className, locale } = this.props

    return (
      <footer className={classNames(className, styles.root)}>
        <div className={styles.row}>
          <Link to={getLink(locale)} className={styles.logo}>
            <img src={logo} alt="logo" />
            <figure>BETA</figure>
          </Link>
          <nav className={styles.nav}>
            <ul>
              <li>
                <Link to={getLink(locale, 'news')}>{formatMessage(locale, 'news')}</Link>
              </li>
              <li>
                <Link to={getLink(locale, 'interviews')}>{formatMessage(locale, 'interview')}</Link>
              </li>

              {this.state.isOnline && locale !== 'en' ? (
                <li>
                  <Link to={getLink(locale, 'videos')}>{formatMessage(locale, 'video')}</Link>
                </li>
              ) : (
                <li className={styles.offlineMode}>
                  <Link to={getLink(locale, 'videos')}>{formatMessage(locale, 'video')}</Link>
                </li>
              )}
            </ul>

            <ul>
              {this.state.isOnline && locale !== 'en' ? (
                <li>
                  <Link to={getLink(locale, 'podcasts')}>{formatMessage(locale, 'podcasts')}</Link>
                </li>
              ) : (
                <li className={styles.offlineMode}>
                  <Link to={getLink(locale, 'podcasts')}>{formatMessage(locale, 'podcasts')}</Link>
                </li>
              )}

              <li>
                <Link to={getLink(locale, 'about')} locale={locale}>
                  {formatMessage(locale, 'about')}
                </Link>
              </li>
              <li>
                <Link to={getLink(locale, 'contacts')}>{formatMessage(locale, 'contacts')}</Link>
              </li>
            </ul>
          </nav>

          <ul className={styles.social}>
            <li>
              <OutboundLink href="/" target="_blank" rel="noreferrer noopener" aria-label="facebook">
                <FacebookIcon width="48px" height="48px" />
              </OutboundLink>
            </li>
            <li>
              <OutboundLink href="/" target="_blank" rel="noreferrer noopener" aria-label="youtube">
                <YoutubeIcon width="48px" height="48px" />
              </OutboundLink>
            </li>
            <li>
              <OutboundLink href="/" target="_blank" rel="noreferrer noopener" aria-label="instagram">
                <InstagramIcon width="48px" height="48px" />
              </OutboundLink>
            </li>
            <li>
              <OutboundLink href="/" target="_blank" rel="noreferrer noopener" aria-label="twitter">
                <TwitterIcon width="48px" height="48px" />
              </OutboundLink>
            </li>
          </ul>
        </div>

        <div className={styles.extra}>
          <OutboundLink href="https://humanseelabs.com/" className={styles.copyright}>
            {moment().year()}, <span>humanseelabs</span>
          </OutboundLink>
          <AnchorLink href="#header" className={styles.toTop}>
            {formatMessage(locale, 'top')}
            ↑
          </AnchorLink>
        </div>
      </footer>
    )
  }
}

Footer.propTypes = {
  className: PropTypes.string,
  locale: PropTypes.string.isRequired,
}

export default Footer