From 0b35ea1a66c627421b7f0e5db55e9dd262dde894 Mon Sep 17 00:00:00 2001
From: dfireBird <aadhishrm11@gmail.com>
Date: Thu, 1 Oct 2020 00:12:40 +0530
Subject: [PATCH] feat: implement page navigation in resource pages

---
 gatsby-node.js                 |  3 +++
 src/templates/resourcePage.tsx | 44 +++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 5aa6264..8039556 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -58,6 +58,7 @@ const createResources = async ({ createPage, graphql }) => {
           edges {
             node {
               relativePath
+              relativeDirectory
               sourceInstanceName
             }
           }
@@ -73,6 +74,7 @@ const createResources = async ({ createPage, graphql }) => {
           edges {
             node {
               relativePath
+              relativeDirectory
               sourceInstanceName
             }
           }
@@ -118,6 +120,7 @@ const createResources = async ({ createPage, graphql }) => {
         component: resourcePage,
         context: {
           file: node.relativePath,
+          directory: node.relativeDirectory,
           layout: LAYOUT_RESOURCES,
         },
       })
diff --git a/src/templates/resourcePage.tsx b/src/templates/resourcePage.tsx
index 5608f82..4552f67 100644
--- a/src/templates/resourcePage.tsx
+++ b/src/templates/resourcePage.tsx
@@ -1,10 +1,13 @@
 import { graphql } from "gatsby"
 import React, { FC, Fragment } from "react"
+import descend from "ramda/es/descend"
+import sortWith from "ramda/es/sortWith"
 
 import { Footer } from "../components/Footer"
 import { Header } from "../components/Header"
 import { Markdown } from "../components/Markdown"
 import { PageContent } from "../components/PageContent"
+import { PageNavigation } from "../components/PageNavigation"
 import { SEO } from "../components/SEO"
 import useSidebar from "../hooks/useSidebar"
 import { buildToc } from "../utils"
@@ -30,6 +33,29 @@ const ResourcePage: FC<any> = ({ data }) => {
       toc.length
   )
 
+  const pages = sortWith([
+    descend((f: any) => {
+      if (f.node.relativePath.includes("intro")) {
+        return 1;
+      }
+
+      return -1;
+    })
+  ], data.allFile.edges)
+  const currentIndex = pages.findIndex(
+    (x: any) => x.node.relativePath === relativePath
+  )
+
+  const nextPage = pages[currentIndex + 1] && {
+    title: pages[currentIndex + 1].node.title.frontmatter.title,
+    relativePath: pages[currentIndex + 1].node.relativePath,
+  }
+
+  const previousPage = pages[currentIndex - 1] && {
+    title: pages[currentIndex - 1].node.title.frontmatter.title,
+    relativePath: pages[currentIndex - 1].node.relativePath,
+  }
+
   return (
     <Fragment>
       <SEO
@@ -50,6 +76,7 @@ const ResourcePage: FC<any> = ({ data }) => {
         content={
           <>
             <Markdown content={body} />
+            <PageNavigation next={nextPage} previous={previousPage} />
             <Footer />
           </>
         }
@@ -64,7 +91,7 @@ const ResourcePage: FC<any> = ({ data }) => {
 export default ResourcePage
 
 export const query = graphql`
-  query ResourcePage($file: String!) {
+  query ResourcePage($file: String!, $directory: String!) {
     file(relativePath: { eq: $file }) {
       relativePath
       post: childMdx {
@@ -93,5 +120,20 @@ export const query = graphql`
         timeToRead
       }
     }
+    allFile(
+      filter: { relativeDirectory: { eq: $directory } }
+      sort: { fields: relativePath, order: ASC }
+    ) {
+      edges {
+        node {
+          relativePath
+          title: childMdx {
+            frontmatter {
+              title
+            }
+          }
+        }
+      }
+    }
   }
 `