From 0b5b2c72f4a9dcf498ac0e81202157e7d6eee490 Mon Sep 17 00:00:00 2001
From: Rauno <freiberggg@gmail.com>
Date: Thu, 15 Mar 2018 01:31:41 +0200
Subject: [PATCH] fix: NavigationFooter links pull paginated title from nav
 metadata

---
 src/components/MarkdownPage/MarkdownPage.js   | 27 ++++++++++++++-----
 .../NavigationFooter/NavigationFooter.js      | 21 ++++++++-------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index b727f825..498eb453 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -31,6 +31,21 @@ type Props = {
   titlePostfix: string,
 };
 
+const getPaginatedTitle = (
+  sectionList: Array<Object>,
+  templateFile: ?string,
+) => {
+  if (!templateFile) {
+    return null;
+  }
+
+  const sectionItems = sectionList.map(section => section.items);
+  const flattenedSectionItems = [].concat.apply([], sectionItems);
+  const linkId = templateFile.replace('.html', '');
+
+  return flattenedSectionItems.find(item => item.id === linkId);
+};
+
 const MarkdownPage = ({
   authors = [],
   createLink,
@@ -45,6 +60,9 @@ const MarkdownPage = ({
   const hasAuthors = authors.length > 0;
   const titlePrefix = markdownRemark.frontmatter.title || '';
 
+  const prev = getPaginatedTitle(sectionList, markdownRemark.frontmatter.prev);
+  const next = getPaginatedTitle(sectionList, markdownRemark.frontmatter.next);
+
   return (
     <Flex
       direction="column"
@@ -123,13 +141,8 @@ const MarkdownPage = ({
         </Container>
       </div>
 
-      {/* TODO Read prev/next from index map, not this way */}
-      {(markdownRemark.frontmatter.next || markdownRemark.frontmatter.prev) && (
-        <NavigationFooter
-          location={location}
-          next={markdownRemark.frontmatter.next}
-          prev={markdownRemark.frontmatter.prev}
-        />
+      {(next || prev) && (
+        <NavigationFooter location={location} next={next} prev={prev} />
       )}
     </Flex>
   );
diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js
index d29c16c6..fa7eb906 100644
--- a/src/templates/components/NavigationFooter/NavigationFooter.js
+++ b/src/templates/components/NavigationFooter/NavigationFooter.js
@@ -45,8 +45,8 @@ const NavigationFooter = ({next, prev, location}) => {
                   css={{
                     paddingTop: 10,
                   }}>
-                  <PrimaryLink location={location} to={prev}>
-                    {linkToTitle(prev)}
+                  <PrimaryLink location={location} to={prev.id}>
+                    {prev.title}
                   </PrimaryLink>
                 </div>
               </div>
@@ -66,8 +66,8 @@ const NavigationFooter = ({next, prev, location}) => {
                   css={{
                     paddingTop: 10,
                   }}>
-                  <PrimaryLink location={location} to={next}>
-                    {linkToTitle(next)}
+                  <PrimaryLink location={location} to={next.id}>
+                    {next.title}
                   </PrimaryLink>
                 </div>
               </div>
@@ -80,14 +80,18 @@ const NavigationFooter = ({next, prev, location}) => {
 };
 
 NavigationFooter.propTypes = {
-  next: PropTypes.string,
-  prev: PropTypes.string,
+  next: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
+  prev: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }),
 };
 
 export default NavigationFooter;
 
-const linkToTitle = link => link.replace(/-/g, ' ').replace('.html', '');
-
 const PrimaryLink = ({children, to, location}) => {
   // quick fix
   // TODO: replace this with better method of getting correct full url
@@ -97,7 +101,6 @@ const PrimaryLink = ({children, to, location}) => {
     <Link
       css={{
         display: 'inline',
-        textTransform: 'capitalize',
         borderColor: colors.subtle,
         transition: 'border-color 0.2s ease',
         fontSize: 30,