site will ask user to login if they upvote

Author: Allicolyer

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

@@ -6,6 +6,8 @@ import { Link } from 'gatsby';
 import { Query, Mutation } from 'react-apollo';
 import gql from 'graphql-tag';
 import { optionalChaining } from '../utils/helpers';
+import { loginUser } from '../utils/auth';
+import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
 
 type TutorialListingProps = {
   tutorial: Tutorial;
@@ -25,7 +27,7 @@ type FrontMatter = {
 const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
   tutorial,
 }) => {
-  const tutorialId = "cjwb6f2hy7e4f0b14bxh1mar2";
+  const tutorialId = 'cjwb6f2hy7e4f0b14bxh1mar2';
   return (
     <Query
       query={gql`
@@ -67,17 +69,30 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
                     }
                   `}
                   variables={{
-                    id: tutorialId
+                    id: tutorialId,
                   }}
                 >
-                  {(upvote) => {
+                  {upvote => {
                     return (
                       <Upvote
-                        onClick={() => upvote()}
-                        active={optionalChaining(() => data.tutorial.viewerUserTutorial.upvoted)}
+                        onClick={async () => {
+                          const mutationRes = await handleMutationResponse(
+                            upvote(),
+                          );
+                          if (mutationRes.error) {
+                            if (mutationRes.error === ApiErrors.AUTHORIZATION) {
+                              loginUser();
+                            } else {
+                              console.log(mutationRes.error);
+                            }
+                          }
+                        }}
+                        active={optionalChaining(
+                          () => data.tutorial.viewerUserTutorial.upvoted,
+                        )}
                         count={optionalChaining(() => data.tutorial.upvotes)}
                       />
-                    )
+                    );
                   }}
                 </Mutation>
               </Box>
@@ -89,7 +104,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
               </Box>
             </Flex>
           </Card>
-        )
+        );
       }}
     </Query>
   );

packages/gatsby-theme/src/utils/errorHandling.ts

@@ -0,0 +1,21 @@
+export enum ApiErrors {
+  AUTHORIZATION = 'AUTHORIZATION',
+  INVALID = 'INVALID',
+}
+
+export async function handleMutationResponse(
+  mutationReq: Promise<any>,
+): Promise<any> {
+  try {
+    return await mutationReq;
+  } catch (err) {
+    if (err.message === 'GraphQL error: Not authorized') {
+      return {
+        error: ApiErrors.AUTHORIZATION,
+      };
+    }
+    return {
+      error: ApiErrors.INVALID,
+    };
+  }
+}

packages/server/src/graphql/UserTutorial.ts

@@ -1,8 +1,11 @@
 import { prismaObjectType, objectType, mutationField, idArg } from 'yoga'
-import { PayloadInterface } from './PayloadInterface';
-import { authorizeUser } from './auth';
-import { Context } from '../context';
-import { UserTutorial as UserTutorialType, UserTutorialCreateInput } from '../../.yoga/prisma-client';
+import { PayloadInterface } from './PayloadInterface'
+import { authorizeUser } from './auth'
+import { Context } from '../context'
+import {
+  UserTutorial as UserTutorialType,
+  UserTutorialCreateInput,
+} from '../../.yoga/prisma-client'
 
 export const UserTutorial = prismaObjectType({
   name: 'UserTutorial',
@@ -14,93 +17,108 @@ export const UserTutorial = prismaObjectType({
 })
 
 export const UserTutorialPayload = objectType({
-  name: "UserTutorialPayload",
-  definition: (type) => {
-    type.implements(PayloadInterface);
-    type.field("userTutorial", {
+  name: 'UserTutorialPayload',
+  definition: type => {
+    type.implements(PayloadInterface)
+    type.field('userTutorial', {
       type: UserTutorial,
-      nullable: true
-    });
-  }
+      nullable: true,
+    })
+  },
 })
 
-export const upvoteTutorial = mutationField("upvoteTutorial", {
+export const upvoteTutorial = mutationField('upvoteTutorial', {
   type: UserTutorialPayload,
-  description: "An authenticated user can upvote a tutorial.",
+  description: 'An authenticated user can upvote a tutorial.',
   args: {
     tutorialId: idArg({
-      required: true
-    })
+      required: true,
+    }),
   },
   authorize: authorizeUser(),
   resolve: async (_, { tutorialId }, ctx) => {
-    const userId = ctx.currentUserId;
-    const existingUserTutorial = await getUserTutorial({
-      userId,
-      tutorialId
-    }, ctx);
-    let upsertedUserTutorial = await upsertUserTutorial({
-      userId,
-      tutorialId,
-      userTutorialId: existingUserTutorial && existingUserTutorial.id,
-      updates: {
-        upvoted: !existingUserTutorial.upvoted,
+    const userId = ctx.currentUserId
+    const existingUserTutorial = await getUserTutorial(
+      {
+        userId,
+        tutorialId,
+      },
+      ctx,
+    )
+    let upsertedUserTutorial = await upsertUserTutorial(
+      {
+        userId,
+        tutorialId,
+        userTutorialId: existingUserTutorial && existingUserTutorial.id,
+        updates: {
+          upvoted: existingUserTutorial ? !existingUserTutorial.upvoted : true,
+        },
       },
-    }, ctx);
-    return ({
-      code: "200",
+      ctx,
+    )
+    return {
+      code: '200',
       success: true,
       message: null,
-      userTutorial: upsertedUserTutorial
-    })
-  }
+      userTutorial: upsertedUserTutorial,
+    }
+  },
 })
 
-async function upsertUserTutorial(args: { userTutorialId?: string, updates: UserTutorialCreateInput, userId: string, tutorialId: any }, ctx: Context): Promise<UserTutorialType> {
-  const { userTutorialId, updates, userId, tutorialId } = args;
-  let upsertedUserTutorial;
+async function upsertUserTutorial(
+  args: {
+    userTutorialId?: string
+    updates: UserTutorialCreateInput
+    userId: string
+    tutorialId: any
+  },
+  ctx: Context,
+): Promise<UserTutorialType> {
+  const { userTutorialId, updates, userId, tutorialId } = args
+  let upsertedUserTutorial
   if (userTutorialId) {
     upsertedUserTutorial = await ctx.prisma.updateUserTutorial({
       where: {
-        id: userTutorialId
+        id: userTutorialId,
       },
-      data: updates
-    });
-  }
-  else {
+      data: updates,
+    })
+  } else {
     upsertedUserTutorial = await ctx.prisma.createUserTutorial({
       ...updates,
       user: {
         connect: {
-          id: userId
-        }
+          id: userId,
+        },
       },
       tutorial: {
         connect: {
-          id: tutorialId
-        }
-      }
-    });
+          id: tutorialId,
+        },
+      },
+    })
   }
-  return upsertedUserTutorial;
+  return upsertedUserTutorial
 }
 
-export async function getUserTutorial(args: { userId: string, tutorialId: any }, ctx: Context): Promise<null | UserTutorialType> {
-  const { userId, tutorialId } = args;
+export async function getUserTutorial(
+  args: { userId: string; tutorialId: any },
+  ctx: Context,
+): Promise<null | UserTutorialType> {
+  const { userId, tutorialId } = args
   const existingUserTutorials = await ctx.prisma.userTutorials({
     first: 1,
     where: {
       user: {
-        id: userId
+        id: userId,
       },
       tutorial: {
-        id: tutorialId
-      }
-    }
-  });
+        id: tutorialId,
+      },
+    },
+  })
   if (existingUserTutorials.length > 0) {
-    return existingUserTutorials[0];
+    return existingUserTutorials[0]
   }
-  return null;
+  return null
 }
-