add progress to tutorial pages and link each tutorial page to the next chapter

Allicolyer · Allicolyer · commit 21cdbceb426b · 2019-06-24T16:05:56.000-07:00
diff --git a/packages/gatsby-theme/src/components/courses/CourseCard.tsx b/packages/gatsby-theme/src/components/courses/CourseCard.tsx
@@ -29,34 +29,31 @@ const CourseCard: React.FunctionComponent<CourseCardProps> = ({
         <h3>{tutorialTitle}</h3>
         <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
           {({ data }) => {
-            let buttonText = 'Continue Tutorial';
+            let buttonText = 'Start Tutorial';
+            let percentage = 0;
             if (
               optionalChaining(
                 () =>
                   data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
               )
             ) {
-              let percentage = percent(
+              percentage = percent(
                 data.getTutorialbyGatsbyID.numberofChapters,
                 data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
               );
+              buttonText = 'Continue Tutorial';
               if (percentage === 100) {
                 buttonText = 'Take Again';
               }
-              return (
-                <div>
-                  <ProgressBar percentage={percentage} />
-                  <a href={path}>
-                    <TutorialButton>{buttonText}</TutorialButton>
-                  </a>
-                </div>
-              );
-            } else
-              return (
+            }
+            return (
+              <div>
+                {!!percentage && <ProgressBar percentage={percentage} />}
                 <a href={path}>
-                  <TutorialButton>Start Tutorial</TutorialButton>
+                  <TutorialButton>{buttonText}</TutorialButton>
                 </a>
-              );
+              </div>
+            );
           }}
         </Query>
       </Flex>
diff --git a/packages/gatsby-theme/src/components/templates/Tutorial.tsx b/packages/gatsby-theme/src/components/templates/Tutorial.tsx
@@ -9,6 +9,7 @@ import { HideOnTablet, ShowOnTablet } from '../../utils/responsive';
 import { Flex, Box } from '../shared/base';
 import { optionalChaining } from '../../utils/helpers';
 import ChapterMutation from '../tutorial/ChapterMutation';
+import { getTutorialSlug } from '../../utils/getTutorialSlug';
 
 type TutorialLayoutProps = { data: TutorialMdxQuery } & RouterProps;
 
@@ -19,20 +20,40 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
   if (!data) {
     return null;
   }
-  const { pageTitle } = data!.mdx!.frontmatter!;
-  const gatsbyID = optionalChaining(
-    () => data!.tutorialTitle!.frontmatter!.id!,
-  );
 
+  //title of the chapter
+  const { pageTitle } = optionalChaining(() => data.mdx.frontmatter);
+  //title of the tutorial
   const tutorialTitle = optionalChaining(
-    () => data!.tutorialTitle!.frontmatter!.tutorialTitle!,
+    () => data.tutorialTitle.frontmatter.tutorialTitle,
+  );
+  //gatsbyID to fetch user information about tutorial
+  const gatsbyID = optionalChaining(() => data.tutorialTitle.frontmatter.id);
+  //all chapters in this tutorial
+  const chapters = optionalChaining(() =>
+    data.pageTitles.edges.map(a => {
+      return {
+        chapterTitle: optionalChaining(() => a.node.frontmatter.pageTitle),
+        chapterPath: optionalChaining(() => a.node.fileAbsolutePath),
+      };
+    }),
   );
-  const chapters =
-    optionalChaining(() =>
-      data!.pageTitles!.edges!.map(a => a.node!.frontmatter!.pageTitle!),
-    ) || [];
+
   const { location } = props;
-  const currentChapter = chapters.indexOf(pageTitle) + 1;
+
+  //all titles of chapters in this tutorial
+  const chapterTitles = chapters.map(chapter => chapter.chapterTitle);
+  //the number of this current chapter
+  const currentChapterIndex = chapterTitles.indexOf(pageTitle);
+  const findNextChapterPath = () => {
+    if (currentChapterIndex + 1 === chapters.length) {
+      return null;
+    } else {
+      return getTutorialSlug(chapters[currentChapterIndex + 1].chapterPath);
+    }
+  };
+
+  const nextChapterPath = findNextChapterPath();
 
   return (
     <Layout location={location}>
@@ -42,14 +63,17 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
             <h1>{pageTitle}</h1>
           </Box>
           <Box width={1 / 8} m={2}>
-            <TabletSidebar chapters={chapters} tutorialTitle={tutorialTitle} />
+            <TabletSidebar
+              chapters={chapterTitles}
+              tutorialTitle={tutorialTitle}
+            />
           </Box>
         </Flex>
       </ShowOnTablet>
       <HideOnTablet>
         <Flex>
           <Box width={1 / 4} m={2}>
-            <Sidebar chapters={chapters} tutorialTitle={tutorialTitle} />
+            <Sidebar chapters={chapterTitles} tutorialTitle={tutorialTitle} />
           </Box>
           <Box width={3 / 4} m={2}>
             <h1>{pageTitle}</h1>
@@ -60,7 +84,12 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
       <ShowOnTablet>
         <MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
       </ShowOnTablet>
-      <ChapterMutation gatsbyID={gatsbyID} currentChapter={currentChapter} />
+      <a href={nextChapterPath}>
+        <ChapterMutation
+          gatsbyID={gatsbyID}
+          currentChapter={currentChapterIndex + 1}
+        />
+      </a>
     </Layout>
   );
 };
@@ -89,6 +118,7 @@ export const pageQuery = graphql`
       edges {
         node {
           id
+          fileAbsolutePath
           frontmatter {
             pageTitle
           }
diff --git a/packages/gatsby-theme/src/components/templates/TutorialOverview.tsx b/packages/gatsby-theme/src/components/templates/TutorialOverview.tsx
@@ -2,24 +2,19 @@ import React from 'react';
 import Layout from '../shared/layout';
 import Chapter from '../tutorial/Chapter';
 import { TutorialOverviewQuery } from 'src/graphqlTypes';
-import AuthorList from '../tutorial/AuthorList';
 import TutorialHeader from '../tutorial/TutorialHeader';
 import { Heading, Flex, Box } from '../shared/base';
-import ProgressBar from '../shared/ProgressBar';
-import {
-  GithubButton,
-  SpectrumButton,
-  TutorialButton,
-} from '../shared/buttons';
+import AuthorsProgressBox from '../tutorial/AuthorsProgressBox';
 import { Content } from '../shared/styledHelpers';
-import { authors } from '../../utils/sampleData';
 import { graphql } from 'gatsby';
+import { optionalChaining } from '../../utils/helpers';
 
 interface PageTemplateProps {
   data: TutorialOverviewQuery;
 }
 
 const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
+  let gatsbyID = optionalChaining(() => data.overview.frontmatter.id);
   return (
     <Layout>
       <Content>
@@ -33,15 +28,7 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
             />
           </Box>
           <Box width={1 / 4} m={3}>
-            <TutorialButton>Continue Tutorial</TutorialButton>
-            <Box m={3}>
-              <ProgressBar percentage={33} width={100} />
-            </Box>
-            <Flex>
-              <GithubButton>Github</GithubButton>
-              <SpectrumButton>Spectrum</SpectrumButton>
-            </Flex>
-            <AuthorList authors={authors} />
+            <AuthorsProgressBox gatsbyID={gatsbyID} />
           </Box>
         </Flex>
         <div>
@@ -87,6 +74,7 @@ export const query = graphql`
     ) {
       id
       frontmatter {
+        id
         tutorialTitle
         banner
         description
diff --git a/packages/gatsby-theme/src/components/tutorial/AuthorsProgressBox.tsx b/packages/gatsby-theme/src/components/tutorial/AuthorsProgressBox.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import AuthorList from './AuthorList';
+import { authors } from '../../utils/sampleData';
+import ProgressBar from '../shared/ProgressBar';
+import { getTutorialbyGatsbyID } from '../../utils/queries';
+import { Query } from 'react-apollo';
+import {
+  GithubButton,
+  SpectrumButton,
+  TutorialButton,
+} from '../shared/buttons';
+import { Flex, Box } from '../shared/base';
+import { optionalChaining, percent } from '../../utils/helpers';
+
+const AuthorsProgressBox = ({ gatsbyID }) => (
+  <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
+    {({ data }) => {
+      let buttonText = 'Start Tutorial';
+      let percentage = 0;
+
+      if (
+        optionalChaining(
+          () => data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+        )
+      ) {
+        percentage = percent(
+          data.getTutorialbyGatsbyID.numberofChapters,
+          data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+        );
+        buttonText = 'Continue Tutorial';
+        if (percentage === 100) {
+          buttonText = 'Take Again';
+        }
+      }
+      return (
+        <div>
+          <TutorialButton>{buttonText}</TutorialButton>
+          {!!percentage && (
+            <Box m={3}>
+              <ProgressBar percentage={percentage} />
+            </Box>
+          )}
+          <Flex>
+            <GithubButton>Github</GithubButton>
+            <SpectrumButton>Spectrum</SpectrumButton>
+          </Flex>
+          <AuthorList authors={authors} />
+        </div>
+      );
+    }}
+  </Query>
+);
+
+export default AuthorsProgressBox;
diff --git a/packages/gatsby-theme/src/utils/helpers.ts b/packages/gatsby-theme/src/utils/helpers.ts
@@ -7,4 +7,4 @@ export function optionalChaining(func: Function) {
 }
 
 export const percent = (numberofChapters, currentChapter) =>
-  currentChapter ? Math.floor((currentChapter / numberofChapters) * 100) : 0;
+  currentChapter ? Math.round((currentChapter / numberofChapters) * 100) : 0;
diff --git a/packages/server/src/schema.graphql b/packages/server/src/schema.graphql
@@ -1,6 +1,7 @@
 ### This file was autogenerated by Nexus 0.11.6
 ### Do not make changes to this file directly
 
+
 type AuthenticateUserPayload implements PayloadInterface {
   code: String
   message: String
@@ -13,40 +14,24 @@ scalar DateTime
 
 type Mutation {
   authenticate(
-    """
-    GitHub OAuth Token from the client.
-    """
+    """GitHub OAuth Token from the client."""
     githubCode: String!
   ): AuthenticateUserPayload
 
-  """
-  An authenticated user can bookmark a tutorial.
-  """
+  """An authenticated user can bookmark a tutorial."""
   bookmarkTutorial(tutorialId: ID!): UserTutorialPayload!
 
-  """
-  An authenticated user can update their current chapter in a tutorial.
-  """
+  """An authenticated user can update their current chapter in a tutorial."""
   upsertCurrentChapter(chapter: Int!, gatsbyID: String!): UserTutorialPayload!
 
-  """
-  Create tutorials from the MDX files
-  """
-  upsertTutorial(
-    gatsbyID: String!
-    name: String!
-    numberofChapters: Int!
-  ): Tutorial!
+  """Create tutorials from the MDX files"""
+  upsertTutorial(gatsbyID: String!, name: String!, numberofChapters: Int!): Tutorial!
 
-  """
-  An authenticated user can upvote a tutorial.
-  """
+  """An authenticated user can upvote a tutorial."""
   upvoteTutorial(tutorialId: ID!): UserTutorialPayload!
 }
 
-"""
-The standard interface for all mutation responses
-"""
+"""The standard interface for all mutation responses"""
 interface PayloadInterface {
   code: String
   message: String
@@ -70,19 +55,9 @@ type Tutorial {
   numberOfStudents: Int!
   updatedAt: DateTime!
   upvotes: Int!
-  userTutorials(
-    after: String
-    before: String
-    first: Int
-    last: Int
-    orderBy: UserTutorialOrderByInput
-    skip: Int
-    where: UserTutorialWhereInput
-  ): [UserTutorial!]
+  userTutorials(after: String, before: String, first: Int, last: Int, orderBy: UserTutorialOrderByInput, skip: Int, where: UserTutorialWhereInput): [UserTutorial!]
 
-  """
-  The UserTutorial for the current user associated with this Tutorial.
-  """
+  """The UserTutorial for the current user associated with this Tutorial."""
   viewerUserTutorial: UserTutorial
 }
 
@@ -189,15 +164,7 @@ type User {
   id: ID!
   name: String!
   updatedAt: DateTime!
-  userTutorials(
-    after: String
-    before: String
-    first: Int
-    last: Int
-    orderBy: UserTutorialOrderByInput
-    skip: Int
-    where: UserTutorialWhereInput
-  ): [UserTutorial!]
+  userTutorials(after: String, before: String, first: Int, last: Int, orderBy: UserTutorialOrderByInput, skip: Int, where: UserTutorialWhereInput): [UserTutorial!]
 }
 
 type UserTutorial {

Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,4 @@ export function optionalChaining(func: Function) {`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export const percent = (numberofChapters, currentChapter) =>`
`10`		`- currentChapter ? Math.floor((currentChapter / numberofChapters) * 100) : 0;`
	`10`	`+ currentChapter ? Math.round((currentChapter / numberofChapters) * 100) : 0;`