import React from "react";
import Link from "gatsby-link";
import get from "lodash/get";
import Helmet from "react-helmet";

import Intro from "../components/intro";

// import "../styles/main.scss";

export const pageQuery = graphql`
  fragment indexPostInfo on MarkdownRemarkConnection {
    edges {
      node {
        frontmatter {
          title
          path
          date: date(formatString: "MMM Do, YYYY")
        }
      }
    }
  }

  query IndexQuery {
    projectPosts: allMarkdownRemark(
      filter: { fileAbsolutePath: { glob: "**/src/projects/**" } }
      sort: { fields: [frontmatter___date], order: DESC }
    ) {
      ...indexPostInfo
    }
    blogPosts: allMarkdownRemark(
      filter: { fileAbsolutePath: { glob: "**/src/posts/**" } }
      sort: { fields: [frontmatter___date], order: DESC }
    ) {
      ...indexPostInfo
    }
  }
`;

function BlogPosts(props) {
  const { data } = props;

  return (
    <section>
      <h2>Blog Posts</h2>

      {data.blogPosts.edges.map(edge => {
        const post = edge.node;
        return (
          <article>
            <Link to={post.frontmatter.path}>
              <p>{post.frontmatter.title}</p>
            </Link>
            <p>{post.frontmatter.date}</p>
          </article>
        );
      })}
    </section>
  );
}

function PersonalProjects(props) {
  const { data } = props;

  return (
    <section>
      <h2>Personal Projects</h2>
      <ul>
        {data.projectPosts.edges.map(edge => {
          const post = edge.node;
          return (
            <li key={post.frontmatter.path}>
              <div>
                <Link to={post.frontmatter.path}>
                  <p>{post.frontmatter.title}</p>
                </Link>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

class Index extends React.Component {
  render() {
    const { data } = this.props;
    return (
      <div>
        <Intro />
        <BlogPosts data={data} />
        <PersonalProjects data={data} />
      </div>
    );
  }
}

export default Index;

@@ -1304,527 +1304,8 @@
 %0A%7D%0A%0A
-function PersonalProjects(props) %7B%0A  const %7B data %7D = props;%0A%0A  return (%0A    %3Csection%3E%0A      %3Ch2%3EPersonal Projects%3C/h2%3E%0A      %3Cul%3E%0A        %7Bdata.projectPosts.edges.map(edge =%3E %7B%0A          const post = edge.node;%0A          return (%0A            %3Cli key=%7Bpost.frontmatter.path%7D%3E%0A              %3Cdiv%3E%0A                %3CLink to=%7Bpost.frontmatter.path%7D%3E%0A                  %3Cp%3E%7Bpost.frontmatter.title%7D%3C/p%3E%0A                %3C/Link%3E%0A              %3C/div%3E%0A            %3C/li%3E%0A          );%0A        %7D)%7D%0A      %3C/ul%3E%0A    %3C/section%3E%0A  );%0A%7D%0A%0A
 clas
@@ -1465,49 +1465,8 @@
  /%3E%0A
-        %3CPersonalProjects data=%7Bdata%7D /%3E%0A
     

Remove personal projects section