Merge pull request #31 from howtographql/tutorial-progress-mutation

Tutorial progress mutation

Author: TrevHeath

oss

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import gql from 'graphql-tag';
+import { Mutation } from 'react-apollo';
+import { loginUser } from '../utils/auth';
+import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
+import { Button } from './shared/base';
+
+type ChapterMutationProps = {
+  gatsbyID: any;
+  currentChapter: any;
+};
+
+const ChapterMutation: React.FunctionComponent<ChapterMutationProps> = ({
+  gatsbyID,
+  currentChapter,
+}) => (
+  <Mutation
+    mutation={gql`
+      mutation upsertCurrentChapter($gatsbyID: String!, $chapter: Int!) {
+        upsertCurrentChapter(gatsbyID: $gatsbyID, chapter: $chapter) {
+          code
+          success
+          userTutorial {
+            id
+            currentChapter
+          }
+        }
+      }
+    `}
+    variables={{
+      gatsbyID: gatsbyID,
+      chapter: currentChapter,
+    }}
+  >
+    {currentChapter => {
+      return (
+        <Button
+          onClick={async () => {
+            const mutationRes = await handleMutationResponse(currentChapter());
+            if (mutationRes.error) {
+              if (mutationRes.error === ApiErrors.AUTHORIZATION) {
+                loginUser();
+              } else {
+                console.log(mutationRes.error);
+              }
+            }
+          }}
+        >
+          Next Chapter
+        </Button>
+      );
+    }}
+  </Mutation>
+);
+
+export default ChapterMutation;

packages/gatsby-theme/src/components/ChapterMutation.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Text } from './shared/base';
+
+const Percentage = ({ tutorial }) => {
+  let progress = tutorial.viewerUserTutorial.currentChapter;
+  let percentage = progress
+    ? Math.floor((progress / tutorial.numberofChapters) * 100)
+    : 0;
+  return (
+    <div>
+      {percentage ? <Text>{percentage}%</Text> : <Text> No Progress </Text>}
+    </div>
+  );
+};
+
+export default Percentage;

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

@@ -41,7 +41,7 @@ interface FillerProps {
   percentage: number;
 }
 
-const Filler = styled('div')<FillerProps>`
+const Filler = styled.div<FillerProps>`
   background: ${props => props.theme.colors.primary};
   height: 100%;
   border-radius: inherit;

packages/gatsby-theme/src/components/ProgressBar.tsx

@@ -6,6 +6,7 @@ import { Query } from 'react-apollo';
 import gql from 'graphql-tag';
 import UpvoteMutation from './UpvoteMutation';
 import BookmarkMutation from './BookmarkMutation';
+import Percentage from './Percentage';
 
 type TutorialListingProps = {
   tutorial: Tutorial;
@@ -27,6 +28,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
   tutorial,
 }) => {
   const gatsbyID = tutorial.frontmatter.id;
+  let tutorialPath = getTutorialOverviewSlug(tutorial.fileAbsolutePath);
   return (
     <Query
       query={gql`
@@ -35,11 +37,13 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
             id
             name
             upvotes
+            numberofChapters
             numberOfStudents
             viewerUserTutorial {
               id
               upvoted
               bookmarked
+              currentChapter
             }
           }
         }
@@ -52,15 +56,16 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
             <Flex alignItems="center" justifyContent="center">
               <Box width={1 / 12}>
                 {data.getTutorialbyGatsbyID && (
-                  <UpvoteMutation tutorial={data.getTutorialbyGatsbyID} />
-                )}
-                {data.getTutorialbyGatsbyID && (
-                  <BookmarkMutation tutorial={data.getTutorialbyGatsbyID} />
+                  <div>
+                    <UpvoteMutation tutorial={data.getTutorialbyGatsbyID} />
+                    <BookmarkMutation tutorial={data.getTutorialbyGatsbyID} />
+                    <Percentage tutorial={data.getTutorialbyGatsbyID} />
+                  </div>
                 )}
               </Box>
 
               <Box width={11 / 12}>
-                <Link to={getTutorialOverviewSlug(tutorial.fileAbsolutePath)}>
+                <Link to={tutorialPath}>
                   <Heading>{tutorial.frontmatter.tutorialTitle}</Heading>
                 </Link>
                 <Text>{tutorial.frontmatter.description}</Text>

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

@@ -8,6 +8,7 @@ import { TutorialMdxQuery } from '../../graphqlTypes';
 import { HideOnTablet, ShowOnTablet } from '../../utils/responsive';
 import { Flex, Box } from '../shared/base';
 import { optionalChaining } from '../../utils/helpers';
+import ChapterMutation from '../ChapterMutation';
 
 type TutorialLayoutProps = { data: TutorialMdxQuery } & RouterProps;
 
@@ -19,6 +20,10 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
     return null;
   }
   const { pageTitle } = data!.mdx!.frontmatter!;
+  const gatsbyID = optionalChaining(
+    () => data!.tutorialTitle!.frontmatter!.id!,
+  );
+
   const tutorialTitle = optionalChaining(
     () => data!.tutorialTitle!.frontmatter!.tutorialTitle!,
   );
@@ -27,6 +32,7 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
       data!.pageTitles!.edges!.map(a => a.node!.frontmatter!.pageTitle!),
     ) || [];
   const { location } = props;
+  const currentChapter = chapters.indexOf(pageTitle) + 1;
 
   return (
     <Layout location={location}>
@@ -54,6 +60,7 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
       <ShowOnTablet>
         <MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
       </ShowOnTablet>
+      <ChapterMutation gatsbyID={gatsbyID} currentChapter={currentChapter} />
     </Layout>
   );
 };
@@ -93,6 +100,7 @@ export const pageQuery = graphql`
       fileAbsolutePath: { regex: $folderRegex }
     ) {
       frontmatter {
+        id
         tutorialTitle
       }
     }

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

@@ -49,7 +49,6 @@ type Tutorial = {
 };
 
 const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
-  console.log(user);
   return (
     <Layout>
       <Flex flexDirection="column">
@@ -89,6 +88,17 @@ const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
             ),
         )}
       </ul>
+      <Heading> In Progress Tutorials </Heading>
+      <ul>
+        {user.progress.map(
+          a =>
+            a.tutorial && (
+              <li key={a.tutorial.id}>
+                <span>{a.tutorial.name}</span>
+              </li>
+            ),
+        )}
+      </ul>
     </Layout>
   );
 };
@@ -115,6 +125,12 @@ const PROFILE_QUERY = gql`
             name
           }
         }
+        progress: userTutorials(where: { currentChapter_not: 0 }) {
+          tutorial {
+            id
+            name
+          }
+        }
       }
     }
   }

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

@@ -344,6 +344,7 @@ export interface NexusGenFieldTypes {
   Mutation: { // field return type
     authenticate: NexusGenRootTypes['AuthenticateUserPayload'] | null; // AuthenticateUserPayload
     bookmarkTutorial: NexusGenRootTypes['UserTutorialPayload']; // UserTutorialPayload!
+    upsertCurrentChapter: NexusGenRootTypes['UserTutorialPayload']; // UserTutorialPayload!
     upsertTutorial: NexusGenRootTypes['Tutorial']; // Tutorial!
     upvoteTutorial: NexusGenRootTypes['UserTutorialPayload']; // UserTutorialPayload!
   }
@@ -415,6 +416,10 @@ export interface NexusGenArgTypes {
     bookmarkTutorial: { // args
       tutorialId: string; // ID!
     }
+    upsertCurrentChapter: { // args
+      chapter: number; // Int!
+      gatsbyID: string; // String!
+    }
     upsertTutorial: { // args
       gatsbyID: string; // String!
       name: string; // String!