feat: add likes

+ add ability for user to like a posts
+ add ability for user ot remove a like
+ add display of reply and like count

src/components/PostActionButtons.tsx

@@ -1,6 +1,8 @@
+import { useMutation, useQuery } from 'convex/react';
 import Link from 'next/link';
 import { BiSolidLike } from 'react-icons/bi';
 import { BsFillReplyFill } from 'react-icons/bs';
+import { api } from '../../convex/_generated/api';
 import { Id } from '../../convex/_generated/dataModel';
 
 export default function PostActionButton({
@@ -10,22 +12,49 @@ export default function PostActionButton({
   postId: Id<'posts'>;
   showReply: boolean;
 }) {
+  const like = useQuery(api.likes.getLike, { postId });
+  const likeCount = useQuery(api.likes.getPostLikeCount, { postId });
+  const replyCount = useQuery(api.posts.getPostReplyCount, { postId });
+  const removeLike = useMutation(api.likes.removeLike);
+  const addLike = useMutation(api.likes.addLike);
+  const isLiked = like !== null;
+
+  async function handleLikeClick() {
+    if (isLiked) {
+      await removeLike({ postId });
+      return;
+    }
+
+    await addLike({ postId });
+  }
+
   return (
     <div className='flex items-center gap-4'>
-      {showReply ? (
+      {showReply && replyCount !== undefined ? (
         <Link
-          className='px-3 py-2 border border-gray-600 rounded-md hover:bg-primary-accent hover:text-white'
+          className='flex items-center justify-center gap-2 px-3 py-1 border border-gray-600 rounded-md hover:bg-primary-accent hover:text-white'
           href={{ pathname: `/posts/${postId}`, query: { reply: true } }}
         >
           <BsFillReplyFill />
+          <div className='flex items-center justify-center h-6 w-6 rounded-full text-xs bg-secondary-gray text-white'>
+            {replyCount}
+          </div>
         </Link>
       ) : null}
-      <button
-        type='button'
-        className='px-3 py-2 border border-gray-600 rounded-md'
-      >
-        <BiSolidLike />
-      </button>
+      {like !== undefined && likeCount !== undefined ? (
+        <button
+          onClick={handleLikeClick}
+          type='button'
+          className={`flex items-center justify-center gap-2 px-3 py-1 border border-gray-600 rounded-md ${
+            isLiked ? 'text-primary-accent' : ''
+          }`}
+        >
+          <BiSolidLike />{' '}
+          <div className='flex items-center justify-center h-6 w-6 rounded-full text-xs bg-secondary-gray text-white'>
+            {likeCount}
+          </div>
+        </button>
+      ) : null}
     </div>
   );
 }

src/components/Reply.tsx

@@ -27,7 +27,7 @@ export default function Reply({ post }: { post: PostWithUserDto }) {
       </div>
       <div className='flex flex-col flex-1 w-full border border-gray-600 rounded-md'>
         <div className='flex flex-col w-full p-1'>
-          <div className='flex justify-between bg-primary-gray p-2'>
+          <div className='flex justify-between dark:bg-primary-gray p-2'>
             <div className='text-sm'>
               {`${username} `}
               <span className='text-[#7a838f]'>{`replied on ${month} ${day}, ${year}`}</span>
@@ -37,7 +37,7 @@ export default function Reply({ post }: { post: PostWithUserDto }) {
             ) : null}
           </div>
           <div className='p-1'>
-            <div className='p-2 rounded-md bg-secondary-gray'>
+            <div className='p-2 rounded-md dark:bg-secondary-gray'>
               <PostContent content={Text.of(post.content).toString()} />
             </div>
           </div>