Merge pull request #36 from howtographql/progress-bar-tutorials

Progress bar tutorials

Author: rohit-ravikoti

packages/gatsby-theme/src/components/community/ProgressBanner.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Text } from '../shared/base';
+import { percent } from '../../utils/helpers';
+
+const ProgressBanner = ({ tutorial }) => {
+  let currentChapter = tutorial.viewerUserTutorial.currentChapter;
+  let numberofChapters = tutorial.numberofChapters;
+  let percentage = currentChapter
+    ? percent(numberofChapters, currentChapter)
+    : 0;
+  return (
+    <div>
+      {percentage ? <Text>{percentage}%</Text> : <Text> No Progress </Text>}
+    </div>
+  );
+};
+
+export default ProgressBanner;

packages/gatsby-theme/src/components/community/TutorialListing.tsx

@@ -5,7 +5,7 @@ import { Link } from 'gatsby';
 import { Query } from 'react-apollo';
 import UpvoteMutation from './UpvoteMutation';
 import BookmarkMutation from './BookmarkMutation';
-import Percentage from '../shared/Percentage';
+import ProgressBanner from './ProgressBanner';
 import { getTutorialbyGatsbyID } from '../../utils/queries';
 
 type TutorialListingProps = {
@@ -47,7 +47,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
                   <div>
                     <UpvoteMutation tutorial={data.getTutorialbyGatsbyID} />
                     <BookmarkMutation tutorial={data.getTutorialbyGatsbyID} />
-                    <Percentage tutorial={data.getTutorialbyGatsbyID} />
+                    <ProgressBanner tutorial={data.getTutorialbyGatsbyID} />
                   </div>
                 )}
               </Box>

packages/gatsby-theme/src/components/courses/CourseCard.tsx

@@ -1,18 +1,24 @@
 import * as React from 'react';
 import { Card, Flex, Image } from '../shared/base';
+import { Query } from 'react-apollo';
 import ProgressBar from '../shared/ProgressBar';
 import { TutorialButton } from '../shared/buttons';
+import { getTutorialbyGatsbyID } from '../../utils/queries';
 import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
+import { optionalChaining, percent } from '../../utils/helpers';
 
 type CourseCardProps = {
   tutorialTitle: string;
   fileAbsolutePath: string;
+  gatsbyID: string;
 };
 
 const CourseCard: React.FunctionComponent<CourseCardProps> = ({
+  gatsbyID,
   tutorialTitle,
   fileAbsolutePath,
 }) => {
+  let path = getTutorialOverviewSlug(fileAbsolutePath);
   return (
     <Card m={[1, 1, 1]} p={[2, 2, 2]}>
       <Flex flexDirection="column" alignItems="center" justifyContent="center">
@@ -21,10 +27,35 @@ const CourseCard: React.FunctionComponent<CourseCardProps> = ({
           src="https://i.ibb.co/TcKwmwR/Icons.png"
         />
         <h3>{tutorialTitle}</h3>
-        <ProgressBar percentage={Math.floor(Math.random() * 100)} width={80} />
-        <a href={getTutorialOverviewSlug(fileAbsolutePath)}>
-          <TutorialButton>Start Tutorial</TutorialButton>
-        </a>
+        <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>
+                {!!percentage && <ProgressBar percentage={percentage} />}
+                <a href={path}>
+                  <TutorialButton>{buttonText}</TutorialButton>
+                </a>
+              </div>
+            );
+          }}
+        </Query>
       </Flex>
     </Card>
   );

packages/gatsby-theme/src/components/courses/CourseSection.tsx

@@ -19,6 +19,7 @@ type Node = {
 };
 
 type Frontmatter = {
+  id: string;
   tutorialTitle: string;
   description: string;
 };
@@ -39,6 +40,7 @@ const CourseSection: React.FunctionComponent<CourseSectionProps> = ({
           {data.map(tutorial => (
             <Box width={[1, 0.8, 0.4]} key={tutorial.node.id}>
               <CourseCard
+                gatsbyID={tutorial.node.frontmatter.id}
                 tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
                 fileAbsolutePath={tutorial.node.fileAbsolutePath}
               />

packages/gatsby-theme/src/components/shared/Percentage.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react';
 import { styled } from '../../styles';
 import { Text } from './base';
+import {percent} from "../../utils/helpers"
 
-interface ProgressBarProps extends FillerProps, ContainerProps {}
+interface ProgressBarProps extends FillerProps {
+  numberofChapters?: number;
+  currentChapter?: number;
+}
 
 const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
   percentage,
-  width,
+  numberofChapters,
+  currentChapter,
 }) => {
+  if (!percentage && numberofChapters && currentChapter) {
+    percentage = percent(currentChapter, numberofChapters)
+  }
   return (
-    <Container width={width}>
+    <Container>
       <Outside>
         <Filler percentage={percentage} />
       </Outside>
@@ -20,12 +28,8 @@ const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
   );
 };
 
-interface ContainerProps {
-  width?: number;
-}
-
-const Container = styled.div<ContainerProps>`
-  width: ${props => props.width || '100'}%;
+const Container = styled.div`
+  width: 100%;
 `;
 
 const Outside = styled.div`
@@ -38,7 +42,7 @@ const Outside = styled.div`
 `;
 
 interface FillerProps {
-  percentage: number;
+  percentage?: number;
 }
 
 const Filler = styled.div<FillerProps>`

packages/gatsby-theme/src/components/shared/ProgressBar.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,43 @@ 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: getTutorialSlug(
+          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);
+  //get the next chapter path
+  const findNextChapterPath = () => {
+    if (currentChapterIndex + 1 === chapters.length) {
+      return null;
+    } else {
+      return chapters[currentChapterIndex + 1].chapterPath;
+    }
+  };
+  //evaluate findNextChapterPath to get the next chapter.
+  const nextChapterPath = findNextChapterPath();
 
   return (
     <Layout location={location}>
@@ -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
           }

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

@@ -2,24 +2,29 @@ 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';
+import { getTutorialSlug } from '../../utils/getTutorialSlug';
 
 interface PageTemplateProps {
   data: TutorialOverviewQuery;
 }
 
 const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
+  let gatsbyID = optionalChaining(() => data.overview.frontmatter.id);
+
+  // 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,15 +38,10 @@ 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}
+              chapterPaths={chapterPaths}
+            />
           </Box>
         </Flex>
         <div>
@@ -87,6 +87,7 @@ export const query = graphql`
     ) {
       id
       frontmatter {
+        id
         tutorialTitle
         banner
         description