link to the user's current chapter on the tutorial page

Author: Allicolyer

packages/gatsby-theme/src/components/templates/TutorialOverview.tsx

@@ -16,10 +16,15 @@ interface PageTemplateProps {
 
 const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
   let gatsbyID = optionalChaining(() => data.overview.frontmatter.id);
-  // TO DO change this component so it links to the chapter the user is currently on
-  let firstChapterPath = getTutorialSlug(
-    optionalChaining(() => data.allMdx.edges[0].node.fileAbsolutePath),
+
+  // This is so that the start button can link to the user's current path
+  // TO DO find a better way to pass in the which chapter the user is currently on
+  const chapterPaths = optionalChaining(() =>
+    data.allMdx.edges.map(a =>
+      getTutorialSlug(optionalChaining(() => a.node.fileAbsolutePath)),
+    ),
   );
+
   return (
     <Layout>
       <Content>
@@ -33,7 +38,10 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
             />
           </Box>
           <Box width={1 / 4} m={3}>
-            <AuthorsProgressBox gatsbyID={gatsbyID} path={firstChapterPath} />
+            <AuthorsProgressBox
+              gatsbyID={gatsbyID}
+              chapterPaths={chapterPaths}
+            />
           </Box>
         </Flex>
         <div>

packages/gatsby-theme/src/components/tutorial/AuthorsProgressBox.tsx

@@ -12,29 +12,37 @@ import {
 import { Flex, Box } from '../shared/base';
 import { optionalChaining, percent } from '../../utils/helpers';
 
-const AuthorsProgressBox = ({ gatsbyID, path }) => (
+const AuthorsProgressBox = ({ gatsbyID, chapterPaths }) => (
   <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
     {({ data }) => {
       let buttonText = 'Start Tutorial';
       let percentage = 0;
-
-      if (
+      let currentChapter =
         optionalChaining(
           () => data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
-        )
-      ) {
+        ) || 0;
+      //This link you to the next chapter you have not done
+      let currentChapterPath = chapterPaths[0];
+      if (currentChapter) {
         percentage = percent(
           data.getTutorialbyGatsbyID.numberofChapters,
           data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
         );
         buttonText = 'Continue Tutorial';
+
         if (percentage === 100) {
           buttonText = 'Take Again';
+        } else {
+          //This link you to the next chapter you have not done. Since this is
+          //an array you don't need to add 1
+          // if you have already completed the tutorial you are still sent
+          //to the first chapter
+          currentChapterPath = chapterPaths[currentChapter];
         }
       }
       return (
         <div>
-          <a href={path}>
+          <a href={currentChapterPath}>
             <TutorialButton>{buttonText}</TutorialButton>
           </a>
           {!!percentage && (