feat(@kampus/kampus): add post upvote mutations

apps/gql/schema/schema.graphql

@@ -15,6 +15,8 @@ interface UserError {
 }
 
 interface Upvotable {
+  id: ID!
+  upvoteCount: Int
   isUpvotedByViewer: Boolean!
 }
 

apps/gql/schema/types.generated.ts

@@ -357,7 +357,9 @@ export type UpdatePanoPostPayload = {
 };
 
 export type Upvotable = {
+  id: Scalars["ID"]["output"];
   isUpvotedByViewer: Scalars["Boolean"]["output"];
+  upvoteCount: Maybe<Scalars["Int"]["output"]>;
 };
 
 export type User = Actor &

apps/kampus/app/pano/features/post-list/PostItem.tsx

@@ -37,8 +37,10 @@ const usePanoPostFragment = (key: PostItem_post$key | null) =>
         id
         site
 
-        owner {
-          username
+        ...PostUpvoteButton_post
+
+        owner @required(action: LOG) {
+          displayName @required(action: LOG)
         }
       }
     `,
@@ -59,7 +61,7 @@ export const PostItem = (props: PostItemProps) => {
 
   return (
     <section className="flex h-full items-center gap-2 rounded">
-      <UpvoteButton upvoteCount={5} isUpvoted={false} disabled={false} isVoting={false} />
+      <UpvoteButton postRef={post} />
 
       <div className="flex w-full flex-col justify-center">
         <div className="flex items-center gap-1 align-baseline">
@@ -71,7 +73,7 @@ export const PostItem = (props: PostItemProps) => {
           </Link>
         </div>
         <div className="flex items-center gap-1 text-sm">
-          <div>@{post.owner?.username} |</div>
+          <div>@{post.owner.displayName} |</div>
           <div>
             <Link href={`/pano/post/${post.id}`}>0 yorum</Link> |
           </div>

apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx

@@ -1,24 +1,86 @@
 import { Triangle } from "lucide-react";
+import { graphql, useFragment, useMutation } from "react-relay";
 
 import { Button } from "@kampus/ui-next";
 import { cn } from "@kampus/ui-next/utils";
 
+import { type PostUpvoteButton_post$key } from "./__generated__/PostUpvoteButton_post.graphql";
+
+const fragment = graphql`
+  fragment PostUpvoteButton_post on PanoPost {
+    id
+    isUpvotedByViewer
+    upvoteCount @required(action: LOG)
+  }
+`;
+
+const createUpvoteMutation = graphql`
+  mutation PostUpvoteButtonCreateMutation($postID: ID!) {
+    createPanoUpvote(input: { id: $postID }) {
+      node {
+        node {
+          ...PostUpvoteButton_post
+        }
+      }
+    }
+  }
+`;
+
+const removeUpvoteMutation = graphql`
+  mutation PostUpvoteButtonRemoveMutation($postID: ID!) {
+    removePanoUpvote(input: { id: $postID }) {
+      node {
+        node {
+          ...PostUpvoteButton_post
+        }
+      }
+    }
+  }
+`;
+
 interface UpvoteProps {
-  isUpvoted: boolean;
-  upvoteCount: number;
-  isVoting: boolean;
-  disabled?: boolean;
+  postRef: PostUpvoteButton_post$key;
 }
 
 export const UpvoteButton = (props: UpvoteProps) => {
-  const upvoteStyle = props.isUpvoted ? "fill-primary" : "fill-none";
-  const opacity = props.isVoting ? "opacity-50" : "opacity-100";
-  const combinedStyle = cn(upvoteStyle, opacity);
+  const post = useFragment(fragment, props.postRef);
+  const [createUpvote, isCreating] = useMutation(createUpvoteMutation);
+  const [removeUpvote, isRemoving] = useMutation(removeUpvoteMutation);
+
+  if (!post) {
+    return null;
+  }
+
+  const disabled = isCreating || isRemoving;
+
+  const upvoteStyle = post?.isUpvotedByViewer ? "fill-primary" : "fill-none";
+  const combinedStyle = cn(upvoteStyle);
+
+  const onClick = () => {
+    if (!post) {
+      return;
+    }
+
+    if (isCreating || isRemoving) {
+      return;
+    }
+
+    if (post.isUpvotedByViewer) {
+      removeUpvote({ variables: { postID: post.id } });
+    } else {
+      createUpvote({ variables: { postID: post.id } });
+    }
+  };
 
   return (
-    <Button className="flex h-full flex-col" variant="outline">
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      className="flex h-full flex-col"
+      variant="outline"
+    >
       <Triangle className={combinedStyle} size={12} />
-      {props.upvoteCount}
+      {post?.upvoteCount ?? 0}
     </Button>
   );
 };