feat(archive-pagination): wired up initial pagination

gatsby/create-pages.js

@@ -2,8 +2,6 @@ const path = require('path');
 
 function createMeetingPages(meetings, createPage) {
   meetings.forEach(({node}) => {
-    if (!node.fields || !node.fields.slug) return;
-
     createPage({
       path: node.fields.slug,
       component: path.resolve('./src/templates/meeting.js'),
@@ -47,7 +45,7 @@ module.exports = async ({graphql, actions}) => {
     }
   `);
 
-  const meetings = result.data.allMarkdownRemark.edges;
+  const meetings = result.data.allMarkdownRemark.edges.filter(edge => edge.node.fields.slug);
 
   createMeetingPages(meetings, createPage);
   createArchiveListPage(meetings, createPage);

package.json

@@ -47,7 +47,7 @@
     "remark-frontmatter": "2.0.0"
   },
   "dependencies": {
-    "@dsmjs/components": "4.0.2",
+    "@dsmjs/components": "5.0.0-beta.1",
     "gatsby": "2.19.12",
     "gatsby-link": "2.4.2",
     "gatsby-plugin-glamor": "2.3.4",

src/templates/archive.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import {arrayOf, shape, string} from 'prop-types';
+import {arrayOf, number, shape, string} from 'prop-types';
 import {graphql} from 'gatsby';
 import {Archive as ArchivePage} from '@dsmjs/components';
 import Layout from '../components/layout';
 
-export default function Archive({data}) {
+export default function Archive({data, pageContext: {totalPages, currentPage}}) {
   const meetings = data.allMarkdownRemark.edges;
 
   return (
     <Layout>
-      <ArchivePage meetings={meetings} />
+      <ArchivePage meetings={meetings} totalPages={totalPages} currentPage={currentPage} />
     </Layout>
   );
 }
@@ -26,7 +26,11 @@ Archive.propTypes = {
         })
       }))
     })
-  }
+  },
+  pageContext: shape({
+    totalPages: number.isRequired,
+    currentPage: number.isRequired
+  }).isRequired
 };
 
 export const meetingsQuery = graphql`