import React from "react";
import { graphql } from 'gatsby'
import Helmet from 'react-helmet'
import ArticleHeader from '../components/ArticleHeader';

import Layout from '../components/Layout/Layout.js';

export default class BlogPost extends React.Component {

  render() {
    const { tag } = this.props.pageContext
    const { edges, totalCount } = this.props.data.allMarkdownRemark

    return (
      <Layout>
        <Helmet title={`#${tag}`}>
          <meta name="description" content={`Posts tagged with ${tag}`} />
        </Helmet>
        <h2>Articles in the #{tag} series ({totalCount})</h2>

        {edges.map(({ node }) => <ArticleHeader post={node} />)}
      </Layout>
    );
  }
};

export const pageQuery = graphql`
  query($tag: String) {
    allMarkdownRemark(
      limit: 2000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          excerpt
          frontmatter {
            title
            date
            tags
            description
          }
        }
      }
    }
  }
`;