displayBySubject.js

/*IMPORTS GO HERE*/

// The functional component of our index page
const IndexPage = (props) => {
  // Getting the data
  const notes = props.data.allMarkdownRemark;
  // Grouping based on the slug - the first part being the subject
  const subjects = _.chain(notes.edges)
    .groupBy(node => node.node.fields.slug.split('/')[1])
    .map(node => node) 
    .value();

  // Mapping over the 'subjects' and each node within and generating links to the pages
  return (
    <Layout>
        <h2 style={{textAlign: 'center', fontFamily: 'courier, monospace'}}>Subjects</h2>
        <Accordion>
        {subjects.map((arr, i) => (
          <AccordionItem key={arr[0].node.fields.slug.split('/')[1]}>
            <AccordionItemTitle>{arr[0].node.fields.slug.split('/')[1].toUpperCase()}</AccordionItemTitle>
            {arr.map(({ node }, j) => (
              <AccordionItemBody key={node.frontmatter.title}>
                <Link to={node.fields.slug} className="link" >
                  <div className="post-list">
                    {node.frontmatter.title}
                  </div>
                </Link>
              </AccordionItemBody>
          ))}
          </AccordionItem>
        ))}
        </Accordion>
    </Layout>
  )
}

export default IndexPage

// The graphql query that generates the data we need
export const query = graphql`
  query ListQuery {
    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  }
`;