fix types on bookmark and upvote mutations

Author: Allicolyer

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

@@ -3,12 +3,12 @@ import { Mutation } from 'react-apollo';
 import { loginUser } from '../../utils/auth';
 import { BookmarkButton } from '../shared/buttons';
 import { BookmarkTutorial } from '../../utils/queries';
+import { BookmarkTutorialMutation } from '../../graphqlTypes';
 import { optionalChaining } from '../../utils/helpers';
-
 import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
 
 const BookmarkMutation = ({ tutorial }) => (
-  <Mutation
+  <Mutation<BookmarkTutorialMutation>
     mutation={BookmarkTutorial}
     variables={{
       id: tutorial.id,

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

@@ -6,9 +6,13 @@ import { VoteButton } from '../shared/buttons';
 import { Heading, Flex } from '../shared/base';
 import { optionalChaining } from '../../utils/helpers';
 import { UpvoteTutorial } from '../../utils/queries';
+import { UpvoteTutorialMutation } from '../../graphqlTypes';
 
 const UpvoteMutation = ({ tutorial }) => (
-  <Mutation mutation={UpvoteTutorial} variables={{ id: tutorial.id }}>
+  <Mutation<UpvoteTutorialMutation>
+    mutation={UpvoteTutorial}
+    variables={{ id: tutorial.id }}
+  >
     {upvote => {
       let active = optionalChaining(() => tutorial.viewerUserTutorial.upvoted);
       let upvotes = optionalChaining(() => tutorial.upvotes);

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

@@ -4,7 +4,7 @@ import { Query } from 'react-apollo';
 import ProgressBar from '../shared/ProgressBar';
 import { TutorialButton } from '../shared/buttons';
 import { getTutorialbyGatsbyID } from '../../utils/queries';
-import { GetTutorialbyGatsbyIdQuery } from '../../graphqlTypes';
+import { GetTutorialbyGatsbyIdQuery, Maybe } from '../../graphqlTypes';
 import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
 import { optionalChaining, percent } from '../../utils/helpers';
 

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

@@ -13,18 +13,6 @@ type QueryData = {
   node: Mdx;
 };
 
-// type Node = {
-//   id: string;
-//   fileAbsolutePath: string;
-//   frontmatter: Frontmatter;
-// };
-
-// type Frontmatter = {
-//   id: string;
-//   tutorialTitle: string;
-//   description: string;
-// };
-
 const CourseSection: React.FunctionComponent<CourseSectionProps> = ({
   heading,
   body,

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

@@ -15,12 +15,12 @@ interface PageTemplateProps {
 }
 
 const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
-  let gatsbyID = optionalChaining(() => data.overview.frontmatter.id);
+  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 =>
+    data!.allMdx!.edges.map(a =>
       getTutorialSlug(optionalChaining(() => a.node.fileAbsolutePath)),
     ),
   );
@@ -29,11 +29,11 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
     <Layout>
       <Content>
         <Flex>
-          <Box width={3 / 4} aligncontent="center">
+          <Box width={3 / 4}>
             <TutorialHeader
               width={1 / 2}
-              title={data!.overview!.frontmatter!.tutorialTitle}
-              description={data!.overview!.frontmatter!.description}
+              title={data!.overview!.frontmatter!.tutorialTitle || 'blank'}
+              description={data!.overview!.frontmatter!.description || 'blank'}
               tags={['React', 'Apollo', 'Javascript']}
             />
           </Box>

packages/gatsby-theme/src/components/tutorial/TutorialSidebar.tsx

@@ -6,7 +6,11 @@ import { SpectrumButton } from '../shared/buttons';
 
 type SidebarProps = {
   tutorialTitle: string;
-  chapters: string[];
+  chapters: Chapter;
+};
+type Chapter = {
+  chapterTitle: string;
+  chapterPath: string;
 };
 
 export const Sidebar: React.FunctionComponent<SidebarProps> = ({
@@ -22,8 +26,8 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
       </Card>
       <ul>
         {chapters.map(chapter => (
-          <li key={chapter.chapterTitle}>
-            <a href={chapter.chapterPath}>{chapter.chapterTitle}</a>
+          <li key={chapter!.chapterTitle}>
+            <a href={chapter!.chapterPath}>{chapter!.chapterTitle}</a>
           </li>
         ))}
       </ul>