add progress to fullstack courses page

Author: Allicolyer

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,38 @@ 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 = 'Continue Tutorial';
+            if (
+              optionalChaining(
+                () =>
+                  data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+              )
+            ) {
+              let percentage = percent(
+                data.getTutorialbyGatsbyID.numberofChapters,
+                data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+              );
+              if (percentage === 100) {
+                buttonText = 'Take Again';
+              }
+              return (
+                <div>
+                  <ProgressBar percentage={percentage} />
+                  <a href={path}>
+                    <TutorialButton>{buttonText}</TutorialButton>
+                  </a>
+                </div>
+              );
+            } else
+              return (
+                <a href={path}>
+                  <TutorialButton>Start Tutorial</TutorialButton>
+                </a>
+              );
+          }}
+        </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

@@ -56,6 +56,7 @@ export const query = graphql`
           id
           fileAbsolutePath
           frontmatter {
+            id
             tutorialTitle
             description
           }
@@ -73,6 +74,7 @@ export const query = graphql`
           id
           fileAbsolutePath
           frontmatter {
+            id
             tutorialTitle
             description
           }

packages/gatsby-theme/src/pages/courses.tsx

@@ -5,3 +5,6 @@ export function optionalChaining(func: Function) {
     return undefined;
   }
 }
+
+export const percent = (numberofChapters, currentChapter) =>
+  currentChapter ? Math.floor((currentChapter / numberofChapters) * 100) : 0;