import React from 'react';
import Navbar from '../components/navbar';
import PaginationNav from '../components/pagination';
import Item from '../components/item';
import { graphql } from 'gatsby';

export default ({ data, pageContext }): JSX.Element => {
  const posts = data.allMdx.edges;
  const { currentPage, numPages, rootPath } = pageContext;

  return (
    <>
      <Navbar />
      {posts.map(({ node: { id, frontmatter } }) => {
        return (
          <Item
            key={id}
            title={frontmatter.title}
            subtitle={frontmatter.subtitle}
            to={rootPath + '/' + frontmatter.path}
          />
        );
      })}
      <PaginationNav
        currentPage={currentPage}
        numPages={numPages}
        rootPath={rootPath}
      />
    </>
  );
};

export const query = graphql`
  query ProjectsIndexQuery($skip: Int!, $limit: Int!) {
    allMdx(
      sort: { order: DESC, fields: [frontmatter___date] }
      filter: {
        fileAbsolutePath: { glob: "**/src/projects/*" }
        frontmatter: { hidden: { ne: true } }
      }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt(pruneLength: 250)
          frontmatter {
            title
            date(formatString: "YYYY-MM-DD")
            path
            subtitle
          }
          id
        }
      }
    }
  }
`;