inital set up for tracking tutorial progress

Author: Allicolyer

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

@@ -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/templates/Tutorial.tsx

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

packages/gatsby-theme/src/pages/profile.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/server/.yoga/nexus.ts

@@ -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!