fix feed revalidation on upvote, change upvoted color

Author: JM-Flores

apps/codebility/app/home/feeds/_components/PostUpvote.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useUserStore } from "@/store/codev-store";
+import { useFeedsStore } from "@/store/feeds-store";
 import { ArrowBigUp } from "lucide-react";
 
 import {
@@ -21,6 +22,10 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
 
   const [isUpvoted, setIsUpvoted] = useState(false);
   const [upvotes, setUpvotes] = useState(0);
+  const { posts, fetchPosts } = useFeedsStore((state) => ({
+    posts: state.posts,
+    fetchPosts: state.fetchPosts,
+  }));
 
   useEffect(() => {
     const checkUpvote = async () => {
@@ -46,30 +51,32 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
       }
     };
     checkUpvote();
-  }, [user?.id, post?.id]);
+  }, [user?.id, post?.id, posts]);
 
   const handleUpvote = async (e: React.MouseEvent) => {
     if (user) {
       e.stopPropagation();
       e.preventDefault();
 
+      setIsUpvoted((prev) => !prev);
+      setUpvotes((prev) => prev + (isUpvoted ? -1 : 1));
+
       if (!isUpvoted) {
         const postUpvote = await AddPostUpvote(post.id, user.id);
       } else {
         removePostUpvote(post.id, user.id);
       }
 
-      setIsUpvoted((prev) => !prev);
-      setUpvotes((prev) => prev + (isUpvoted ? -1 : 1));
+      await fetchPosts();
     }
   };
 
   return (
     <button
       className={`flex items-center space-x-1 ${
         isUpvoted
-          ? "text-customBlue-500 dark:text-customBlue-400"
-          : "hover:text-customBlue-500 dark:hover:text-customBlue-400"
+          ? "text-customBlue-300 dark:text-customBlue-200"
+          : "hover:text-customBlue-300 dark:hover:text-customBlue-200"
       }`}
       onClick={handleUpvote}
     >