link to the chapers in the sidebar of a tutorial

Author: Allicolyer

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

@@ -34,7 +34,9 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
     data.pageTitles.edges.map(a => {
       return {
         chapterTitle: optionalChaining(() => a.node.frontmatter.pageTitle),
-        chapterPath: optionalChaining(() => a.node.fileAbsolutePath),
+        chapterPath: getTutorialSlug(
+          optionalChaining(() => a.node.fileAbsolutePath),
+        ),
       };
     }),
   );
@@ -45,14 +47,15 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
   const chapterTitles = chapters.map(chapter => chapter.chapterTitle);
   //the number of this current chapter
   const currentChapterIndex = chapterTitles.indexOf(pageTitle);
+  //get the next chapter path
   const findNextChapterPath = () => {
     if (currentChapterIndex + 1 === chapters.length) {
       return null;
     } else {
-      return getTutorialSlug(chapters[currentChapterIndex + 1].chapterPath);
+      return chapters[currentChapterIndex + 1].chapterPath;
     }
   };
-
+  //evaluate findNextChapterPath to get the next chapter.
   const nextChapterPath = findNextChapterPath();
 
   return (
@@ -63,17 +66,14 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
             <h1>{pageTitle}</h1>
           </Box>
           <Box width={1 / 8} m={2}>
-            <TabletSidebar
-              chapters={chapterTitles}
-              tutorialTitle={tutorialTitle}
-            />
+            <TabletSidebar chapters={chapters} tutorialTitle={tutorialTitle} />
           </Box>
         </Flex>
       </ShowOnTablet>
       <HideOnTablet>
         <Flex>
           <Box width={1 / 4} m={2}>
-            <Sidebar chapters={chapterTitles} tutorialTitle={tutorialTitle} />
+            <Sidebar chapters={chapters} tutorialTitle={tutorialTitle} />
           </Box>
           <Box width={3 / 4} m={2}>
             <h1>{pageTitle}</h1>

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

@@ -8,13 +8,18 @@ import AuthorsProgressBox from '../tutorial/AuthorsProgressBox';
 import { Content } from '../shared/styledHelpers';
 import { graphql } from 'gatsby';
 import { optionalChaining } from '../../utils/helpers';
+import { getTutorialSlug } from '../../utils/getTutorialSlug';
 
 interface PageTemplateProps {
   data: TutorialOverviewQuery;
 }
 
 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),
+  );
   return (
     <Layout>
       <Content>
@@ -28,7 +33,7 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
             />
           </Box>
           <Box width={1 / 4} m={3}>
-            <AuthorsProgressBox gatsbyID={gatsbyID} />
+            <AuthorsProgressBox gatsbyID={gatsbyID} path={firstChapterPath} />
           </Box>
         </Flex>
         <div>

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

@@ -12,7 +12,7 @@ import {
 import { Flex, Box } from '../shared/base';
 import { optionalChaining, percent } from '../../utils/helpers';
 
-const AuthorsProgressBox = ({ gatsbyID }) => (
+const AuthorsProgressBox = ({ gatsbyID, path }) => (
   <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
     {({ data }) => {
       let buttonText = 'Start Tutorial';
@@ -34,7 +34,9 @@ const AuthorsProgressBox = ({ gatsbyID }) => (
       }
       return (
         <div>
-          <TutorialButton>{buttonText}</TutorialButton>
+          <a href={path}>
+            <TutorialButton>{buttonText}</TutorialButton>
+          </a>
           {!!percentage && (
             <Box m={3}>
               <ProgressBar percentage={percentage} />

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

@@ -22,7 +22,9 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
       </Card>
       <ul>
         {chapters.map(chapter => (
-          <li key={chapter}>{chapter}</li>
+          <li key={chapter.chapterTitle}>
+            <a href={chapter.chapterPath}>{chapter.chapterTitle}</a>
+          </li>
         ))}
       </ul>
       <AuthorList authors={authors} />