Merge pull request #33 from howtographql/add-optional-chaining

add optional chaining to bookmark, current chapter and upvotes

Author: Allicolyer

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

@@ -3,6 +3,8 @@ import { Mutation } from 'react-apollo';
 import { loginUser } from '../../utils/auth';
 import { BookmarkButton } from '../shared/buttons';
 import { BookmarkTutorial } from '../../utils/queries';
+import { optionalChaining } from '../../utils/helpers';
+
 import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
 
 const BookmarkMutation = ({ tutorial }) => (
@@ -13,7 +15,9 @@ const BookmarkMutation = ({ tutorial }) => (
     }}
   >
     {bookmark => {
-      let bookmarked = tutorial.viewerUserTutorial.bookmarked;
+      let bookmarked = optionalChaining(
+        () => tutorial.viewerUserTutorial.bookmarked,
+      );
       return (
         <BookmarkButton
           active={bookmarked}

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

@@ -4,13 +4,14 @@ import { loginUser } from '../../utils/auth';
 import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
 import { VoteButton } from '../shared/buttons';
 import { Heading, Flex } from '../shared/base';
+import { optionalChaining } from '../../utils/helpers';
 import { UpvoteTutorial } from '../../utils/queries';
 
 const UpvoteMutation = ({ tutorial }) => (
   <Mutation mutation={UpvoteTutorial} variables={{ id: tutorial.id }}>
     {upvote => {
-      let active = tutorial.viewerUserTutorial.upvoted;
-      let upvotes = tutorial.upvotes;
+      let active = optionalChaining(() => tutorial.viewerUserTutorial.upvoted);
+      let upvotes = optionalChaining(() => tutorial.upvotes);
       return (
         <Flex
           flexDirection="column"

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { optionalChaining } from '../../utils/helpers';
 import { Text } from './base';
 
 const Percentage = ({ tutorial }) => {
-  let progress = tutorial.viewerUserTutorial.currentChapter;
+  let progress = optionalChaining(
+    () => tutorial.viewerUserTutorial.currentChapter,
+  );
   let percentage = progress
     ? Math.floor((progress / tutorial.numberofChapters) * 100)
     : 0;