giscus · laymonage · May 9, 2021 · Apr 17, 2021 · Apr 17, 2021 · May 9, 2021
diff --git a/components/Comment.tsx b/components/Comment.tsx
@@ -1,12 +1,14 @@
 import { ArrowUpIcon, KebabHorizontalIcon } from '@primer/octicons-react';
-import { ReactElement, ReactNode, useCallback, useState } from 'react';
+import { ReactElement, ReactNode, useCallback, useContext, useState } from 'react';
 import { handleCommentClick, processCommentBody } from '../lib/adapter';
 import { IComment, IReply } from '../lib/types/adapter';
 import { Reactions, updateCommentReaction } from '../lib/reactions';
 import { formatDate, formatDateDistance } from '../lib/utils';
+import { toggleUpvote } from '../services/github/toggleUpvote';
 import CommentBox from './CommentBox';
 import ReactButtons from './ReactButtons';
 import Reply from './Reply';
+import { AuthContext } from '../lib/context';
 
 interface ICommentProps {
   children?: ReactNode;
@@ -25,6 +27,7 @@ export default function Comment({
 }: ICommentProps) {
   const [page, setPage] = useState(0);
   const replies = comment.replies.slice(0, page === 0 ? 3 : undefined);
+  const { token } = useContext(AuthContext);
 
   const updateReactions = useCallback(
     (reaction: Reactions, promise: Promise<unknown>) =>
@@ -34,6 +37,27 @@ export default function Comment({
 
   const incrementPage = () => page < 1 && setPage(page + 1);
 
+  const upvote = useCallback(() => {
+    const upvoteCount = comment.viewerHasUpvoted
+      ? comment.upvoteCount - 1
+      : comment.upvoteCount + 1;
+
+    const promise = toggleUpvote(
+      { upvoteInput: { subjectId: comment.id } },
+      token,
+      comment.viewerHasUpvoted,
+    );
+
+    onCommentUpdate(
+      {
+        ...comment,
+        upvoteCount,
+        viewerHasUpvoted: !comment.viewerHasUpvoted,
+      },
+      promise,
+    );
+  }, [comment, onCommentUpdate, token]);
+
   const hidden = comment.deletedAt || comment.isMinimized;
 
   return (
@@ -44,6 +68,8 @@ export default function Comment({
             <button
               type="button"
               className={`${comment.viewerHasUpvoted ? 'color-text-link' : 'color-text-secondary'}`}
+              >
+              disabled={!token || !comment.viewerCanUpvote}
             >
               <ArrowUpIcon className="transform hover:translate-y-[-10%] transition-transform ease-in-out duration-150" />
             </button>

diff --git a/lib/types/adapter.ts b/lib/types/adapter.ts
@@ -34,6 +34,7 @@ export interface IReply extends IBaseComment {
 export interface IComment extends IBaseComment {
   upvoteCount: number;
   viewerHasUpvoted: boolean;
+  viewerCanUpvote: boolean;
   replyCount: number;
   replies: IReply[];
 }

diff --git a/lib/types/github.ts b/lib/types/github.ts
@@ -49,6 +49,7 @@ export interface GReply extends GBaseComment {
 export interface GComment extends GBaseComment {
   upvoteCount: number;
   viewerHasUpvoted: boolean;
+  viewerCanUpvote: boolean;
   replies: {
     totalCount: number;
     nodes: GReply[];

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -52,6 +52,7 @@ export default function Home({ content }: { content: string }) {
     url: 'https://github.com/laymonage/giscussions',
     viewerDidAuthor: false,
     viewerHasUpvoted: false,
+    viewerCanUpvote: false,
   };
 
   return (

diff --git a/services/github/addDiscussionComment.ts b/services/github/addDiscussionComment.ts
@@ -7,6 +7,7 @@ const ADD_DISCUSSION_COMMENT_QUERY = `
         id
         upvoteCount
         viewerHasUpvoted
+        viewerCanUpvote
         author {
           avatarUrl
           login

diff --git a/services/github/getDiscussion.ts b/services/github/getDiscussion.ts
@@ -31,6 +31,7 @@ const GET_DISCUSSION_QUERY = `
               id
               upvoteCount
               viewerHasUpvoted
+              viewerCanUpvote
               author {
                 avatarUrl
                 login

diff --git a/services/github/toggleUpvote.ts b/services/github/toggleUpvote.ts
@@ -0,0 +1,40 @@
+const TOGGLE_UPVOTE_QUERY = (mode: 'Add' | 'Remove') => `
+  mutation($upvoteInput: ${mode}UpvoteInput!) {
+    toggleUpvote: ${mode.toLowerCase()}Upvote(input: $upvoteInput) {
+      subject {
+        upvoteCount
+      }
+    }
+  }`;
+
+export interface ToggleUpvoteBody {
+  upvoteInput: { subjectId: string };
+}
+
+export interface ToggleUpvoteResponse {
+  data: {
+    toggleUpvote: {
+      subject: {
+        upvoteCount: number;
+      };
+    };
+  };
+}
+
+export async function toggleUpvote(
+  params: ToggleUpvoteBody,
+  token: string,
+  viewerHasUpvoted: boolean,
+): Promise<ToggleUpvoteResponse> {
+  return fetch('/api/graphql', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query: TOGGLE_UPVOTE_QUERY(viewerHasUpvoted ? 'Remove' : 'Add'),
+      variables: params,
+    }),
+  }).then((r) => r.json());
+}