import React from 'react';
import { Link } from 'gatsby';
import './styles.scss';

class PostList extends React.Component {
  getPostList() {
    const postList = [];
    this.props.postEdges.filter(x => !x.node.frontmatter.archive)
      .forEach((postEdge) => {
        postList.push({
          path: postEdge.node.frontmatter.slug,
          title: postEdge.node.frontmatter.title,
          date: postEdge.node.frontmatter.date,
        });
      });
    return postList;
  }

  render() {
    const postLists = this.getPostList();

    return (
      <figure className="listing-figure">
        <ul className="list">
          {postLists.map((post) => (
            <li
              className="item"
              key={post.path}
            >
              <Link
                className="link"
                to={post.path}
              >
                <p className="title">
                  {post.title}
                </p>
              </Link>
              <small className="sub">
                {post.date}
              </small>
            </li>
          ))}
        </ul>
      </figure>
    );
  }
}

export default PostList;