src/components/SingleJob/SingleJob.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { formatMessage } from 'src/translations'
import Ad from 'src/components/Ad'
import styles from './SingleJob.module.scss'
import Description from './Description'
import Location from './Location'
import VacancyGallery from './VacancyGallery'
import About from './About'

class SingleJob extends Component {
  render() {
    const {
      job,
      job: { aboutCompanyNode, contactEmail },
      locale,
    } = this.props

    return (
      <div className={styles.root}>
        <div className={styles.inner}>
          <div className={styles.content}>
            <Description {...job} locale={locale} />
            <Location {...job} locale={locale} />
            <VacancyGallery {...job} />
            <About {...{ aboutCompanyNode, locale }} />
          </div>
          <div className={styles.ad}>
            <div className={styles.sticky}>
              {contactEmail && (
                <a className={styles.respond} href={`mailto:${contactEmail}`}>
                  <span>{formatMessage(locale, 'respond')}</span>
                </a>
              )}

              <Ad locale={locale} isInSingleJob />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

SingleJob.propTypes = {
  title: PropTypes.string,
  url: PropTypes.string,
  html: PropTypes.string,
  locale: PropTypes.string,
}

export default SingleJob