src/templates/Videos.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Header from '../components/Header'
import VideosList from '../components/VideosList'
import Subscribe from '../components/Subscribe'
import Footer from '../components/Footer'
import PageHelmet from 'src/components/PageHelmet'
import withLocale from 'src/components/withLocale'
import { subDays } from 'date-fns'

class Videos extends Component {
  render() {
    const {
      data: { channels, subscribe },
      locale,
      changeLocale,
    } = this.props

    return (
      <div>
        <PageHelmet title="Videos" locale={locale} />
        <Header full={true} {...this.props} locale={locale} changeLocale={changeLocale} />
        <VideosList videos={channels} locale={locale} />
        <Subscribe style={{ marginTop: '15px' }} locale={locale} subscribe={subscribe} />
        <Footer locale={locale} />
      </div>
    )
  }
}

export const query = graphql`
  query {
    channels: allDatoCmsVideo {
      edges {
        node {
          videos {
            title
            videoId
            description
            duration
            publishDate
            slug
          }
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(Videos)