src/templates/Podcast.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Layout from 'src/components/Layout'
import LayoutHelmet from 'src/components/LayoutHelmet'
import SubscribeMain from 'src/components/Subscribe'
import Footer from 'src/components/Footer'
import Home from 'src/components/Home'
import Header from 'src/components/Header'
import NewsFeed from 'src/components/NewsFeed'
import SinglePodcast from 'src/components/SinglePodcast'
import withLocale from 'src/components/withLocale'

class PodcastTemplate extends Component {
  render() {
    const {
      data: {
        subscribe,
        podcast: {
          title,
          duration,
          guest,
          cover,
          podcast: { url: podcastFile },
        },
        news: { edges: newsEdges },
      },
      locale,
    } = this.props

    const news = newsEdges.filter(({ node }) => node.slug !== '_')

    return (
      <Layout locale={locale}>
        <LayoutHelmet locale={locale} />
        <main>
          <Header {...this.props} locale={locale} />
          <SinglePodcast
            title={title}
            podcast={podcastFile}
            duration={duration}
            podcastTitle={title}
            podcastGuest={guest}
            podcastCover={cover}
            locale={locale}
          />
          <NewsFeed news={news} locale={locale} />
          <Home onChangeData={this.props.onChangeData} locale={locale} />
          <SubscribeMain locale={locale} subscribe={subscribe} />
        </main>
        <Footer isInHome locale={locale} />
      </Layout>
    )
  }
}

export const query = graphql`
  query Podcast($id: String!, $locale: String!) {
    podcast: datoCmsPodcast(id: { eq: $id }) {
      title
      duration
      publishDate
      cover {
        url
        id
        fluid(maxWidth: 400, imgixParams: { fm: "jpg", auto: "compress, format" }) {
          ...GatsbyDatoCmsFluid
        }
      }
      guest
      podcast {
        url
      }
      slug
    }
    news: allDatoCmsNews(
      filter: { ismain: { eq: true }, locale: { eq: $locale } }
      sort: { fields: [publishdate], order: DESC }
      limit: 3
    ) {
      edges {
        node {
          publishdate
          slug
          title
          description
          ismain
          image {
            id
            fluid(maxWidth: 1240, imgixParams: { fm: "jpg", auto: "compress, format" }) {
              ...GatsbyDatoCmsFluid
            }
          }
          author
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(PodcastTemplate)