src/templates/Home.js

import React from 'react'
import { graphql } from 'gatsby'
import Layout from 'src/components/Layout'
import LayoutHelmet from 'src/components/LayoutHelmet'
import Hot from 'src/components/Hot'
import NewsFeed from 'src/components/NewsFeed'
import SubscribeMain from 'src/components/Subscribe'
import Footer from 'src/components/Footer'
import Home from 'src/components/Home'
import Jobs from 'src/components/Jobs'

// const prepareArticles = (interviews) => {
//   if (!interviews) return []
//   const { edges } = interviews
//   return edges.map(
//     ({
//       node: {
//         fields: { slug },
//         frontmatter: {
//           description,
//           publishDate,
//           title,
//           image,
//           templateKey,
//           podcast,
//           podcastTitle,
//           podcastCover,
//           podcastGuest,
//         },
//       },
//     }) => {
//       const preparedParticipant = {
//         slug,
//         description,
//         publishDate,
//         title,
//         templateKey,
//         podcast,
//         podcastTitle,
//         podcastCover,
//         podcastGuest,
//       }
//       if (image) {
//         preparedParticipant.image = image
//       }
//       return preparedParticipant
//     },
//   )
// }

const HomeTemplate = (props) => {
  const {
    data: {
      news,
      page,
      interviews: { edges },
    },
    pageContext: { locale },
  } = props
  return (
    <Layout locale={locale}>
      <LayoutHelmet locale={locale} />
      <main>
        <Hot article={edges[0]} locale={locale} translations={page.fields.translations} />
        <NewsFeed news={news} locale={locale} />
        <Home onChangeData={props.onChangeData} locale={locale} />
        <Jobs />
        <SubscribeMain locale={locale} />
      </main>
      <Footer locale={locale} />
    </Layout>
  )
}

export const query = graphql`
  query HomePage($locale: String!) {
    page: markdownRemark(frontmatter: { templateKey: { eq: "Home" } }) {
      fields {
        translations {
          lang
          url
        }
      }
    }
    interviews: allDatoCmsInterview(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          description
          publishDate
          title
          image {
            id
            fluid(maxWidth: 1240, imgixParams: { fm: "jpg", auto: "compress" }) {
              ...GatsbyDatoCmsFluid
            }
          }
          podcast {
            podcastTitle
            podcastCover {
              url
            }
            podcast {
              url
            }
            podcastGuest
          }
          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" }) {
              ...GatsbyDatoCmsFluid
            }
          }
          author
        }
      }
    }
  }
`

export default HomeTemplate