import React, { Component } from 'react'
import Link from 'gatsby-link'

class Blog extends Component {
  render() {
    const data = this.props.data
    return (
      <div>
        <h1>Blog Posts</h1>
        {data.allWordpressPost.edges.map(({ node }) => (
          <article key={node.slug}>
            <Link to={`post/${node.slug}`}>
              <h3>{node.title}</h3>
            </Link>
            {node.date}
            <p dangerouslySetInnerHTML={{ __html: node.excerpt }} />
          </article>
        ))}
      </div>
    )
  }
}

export const query = graphql`
  query blogQuery {
    allWordpressPost {
      edges {
        node {
          id
          title
          excerpt
          slug
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  }
`

export default Blog