src/templates/Job.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Header from 'src/components/Header'
import PageHelmet from 'src/components/PageHelmet'
import Subscribe from 'src/components/Subscribe'
import SingleJob from 'src/components/SingleJob'
import Footer from 'src/components/Footer'
import Jobs from 'src/components/Jobs'
import withLocale from 'src/components/withLocale'

class SingleJobPage extends Component {
  render() {
    const {
      data: {
        job,
        jobTags: { edges: jobTags },
        offers: { edges: offers },
        subscribe,
      },
      locale,
      changeLocale,
    } = this.props

    return (
      <>
        {/* TODO Add real meta-date */}
        <PageHelmet title="Job" locale={locale} />
        <Header full={true} locale={locale} changeLocale={changeLocale} />
        <SingleJob job={job} locale={locale} />
        <Jobs jobTags={jobTags} offers={offers} locale={locale} />
        <Subscribe subscribe={subscribe} />
        <Footer locale={locale} />
      </>
    )
  }
}

export const query = graphql`
  query SingleJob($id: String!, $locale: String!) {
    job: datoCmsJob(locale: { eq: $locale }, id: { eq: $id }) {
      title
      descriptionNode {
        childMarkdownRemark {
          html
        }
      }
      geolocation {
        latitude
        longitude
      }
      locationDescription
      photo {
        url
        fluid {
          ...GatsbyDatoCmsFluid
        }
      }
      companyName
      contactEmail
      aboutCompanyNode {
        childMarkdownRemark {
          html
        }
      }
    }
    jobTags: allDatoCmsJobTag(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          title
          locale
          id
        }
      }
    }
    offers: allDatoCmsJob(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          locale
          id
          description
          companyName
          companyLogo {
            url
          }
          tag {
            id
            title
          }
          slug
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(SingleJobPage)