text: /* eslint-disable react/prefer-stateless-function */
  import React, { Component } from 'react';
  import get from 'lodash/get';
  import Helmet from 'react-helmet';
  import { graphql } from 'gatsby';
  import ArticlePreview from '../components/article-preview';
  
  export class BlogIndex extends Component {
    render() {
      const siteTitle = get(this, 'props.data.site.siteMetadata.title');
      const posts = get(this, 'props.data.allContentfulBlogPost.edges');
  
      return (
        <div style={{ background: '#fff' }}>
          <Helmet title={siteTitle} />
          <div className="wrapper">
            <h2 className="section-headline">Recent articles</h2>
            <ul className="article-list">
              {posts.map(({ node }) => {
                return (
                  <li key={node.slug}>
                    <ArticlePreview article={node} />
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      );
    }
  }
  
  export default BlogIndex;
  
  export const pageQuery = graphql`
    query BlogIndexQuery {
      allContentfulBlogPost(sort: { fields: [publishDate], order: DESC }) {
        edges {
          node {
            title
            slug
            author {
              name
            }
            publishDate(formatString: "MMMM Do, YYYY")
            heroImage {
              file {
                url
              }
            }
            body {
              childMarkdownRemark {
                html
              }
            }
          }
        }
      }
    }
  `;
  