Merge pull request #428 from CodebilityDev/miguel/fix-upvote-implementation

Miguel/fix upvote implementation

Author: yyyort

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

@@ -2,10 +2,12 @@
 
 import { useEffect, useState } from "react";
 import { useUserStore } from "@/store/codev-store";
+import { useFeedsStore } from "@/store/feeds-store";
 import { ArrowBigUp } from "lucide-react";
 
 import {
   AddPostUpvote,
+  countUpvotes,
   hasUserUpvoted,
   removePostUpvote,
 } from "../_services/action";
@@ -19,7 +21,11 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
   const { user } = useUserStore();
 
   const [isUpvoted, setIsUpvoted] = useState(false);
-  const [upvotes, setUpvotes] = useState(post.upvoters_id?.length || 0);
+  const [upvotes, setUpvotes] = useState(0);
+  const { posts, fetchPosts } = useFeedsStore((state) => ({
+    posts: state.posts,
+    fetchPosts: state.fetchPosts,
+  }));
 
   useEffect(() => {
     const checkUpvote = async () => {
@@ -34,33 +40,43 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
       } else {
         setIsUpvoted(false);
       }
-    };
 
+      if (post?.id) {
+        try {
+          const upvotesCount = await countUpvotes(post.id);
+          setUpvotes(upvotesCount);
+        } catch (error) {
+          console.error("Error counting upvotes:", error);
+        }
+      }
+    };
     checkUpvote();
-  }, [user?.id, post?.id]);
+  }, [user?.id, post?.id, posts]);
 
-  const handleUpvote = (e: React.MouseEvent) => {
+  const handleUpvote = async (e: React.MouseEvent) => {
     if (user) {
       e.stopPropagation();
       e.preventDefault();
 
+      setIsUpvoted((prev) => !prev);
+      setUpvotes((prev) => prev + (isUpvoted ? -1 : 1));
+
       if (!isUpvoted) {
-        AddPostUpvote(post.id, user.id);
+        const postUpvote = await AddPostUpvote(post.id, user.id);
       } else {
-        removePostUpvote(post.id, user.id);
+        await 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}
     >

apps/codebility/app/home/feeds/_services/action.ts

@@ -207,93 +207,92 @@ export const AddPostUpvote = async (postId: string, userId: string) => {
   try {
     const supabase = await createClientServerComponent();
 
-    // Fetch current upvoters_id array
-    const { data: post, error: fetchError } = await supabase
-      .from("posts")
-      .select("upvoters_id")
-      .eq("id", postId)
-      .single();
+    const { data: postUpvote, error: fetchError } = await supabase
+      .from("post_upvotes")
+      .select("*")
+      .eq("post_id", postId)
+      .eq("upvoter_id", userId)
+      .maybeSingle();
 
     if (fetchError) throw fetchError;
 
-    const currentUpvoters = post.upvoters_id || [];
-
     // Avoid duplicate upvotes
-    if (currentUpvoters.includes(userId)) {
+    if (postUpvote) {
       return { message: "User has already upvoted this post." };
     }
 
-    const updatedUpvoters = [...currentUpvoters, userId];
-
-    // Update the post with new upvoter
-    const { data: updatedPost, error: updateError } = await supabase
-      .from("posts")
-      .update({ upvoters_id: updatedUpvoters })
-      .eq("id", postId)
-      .select();
+    // Add post upvote
+    const { data: newUpvote, error: insertError } = await supabase
+    .from("post_upvotes")
+    .insert([{ post_id: postId, upvoter_id: userId }])
+    .select()
+    .single();
 
-    if (updateError) throw updateError;
+    if (insertError) throw insertError;
 
-    return updatedPost;
+    return newUpvote;
   } catch (error) {
-    console.error(error);
+    console.error("Failed to add upvote:", error);
     throw error;
   }
 };
 
 export const removePostUpvote = async (postId: string, userId: string) => {
-  try {
+   try {
     const supabase = await createClientServerComponent();
 
-    // Fetch current upvoters_id array
-    const { data: post, error: fetchError } = await supabase
-      .from("posts")
-      .select("upvoters_id")
-      .eq("id", postId)
-      .single();
+  const { error } = await supabase
+    .from("post_upvotes")
+    .delete()
+    .eq("post_id", postId)
+    .eq("upvoter_id", userId);
 
-    if (fetchError) throw fetchError;
+  if (error) throw error;
 
-    const currentUpvoters = post.upvoters_id || [];
 
-    // If user hasn't upvoted, nothing to remove
-    if (!currentUpvoters.includes(userId)) {
-      return { message: "User hasn't upvoted this post." };
-    }
+  } catch (error) {
+    console.error("Failed to remove upvote:", error);
+    throw error;
+  }
+};
 
-    const updatedUpvoters = currentUpvoters.filter(id => id !== userId);
+export const hasUserUpvoted = async (postId: string, userId: string): Promise<boolean> => {
+    try {
+    const supabase = await createClientServerComponent();
 
-    // Update the post with new upvoter array
-    const { data: updatedPost, error: updateError } = await supabase
-      .from("posts")
-      .update({ upvoters_id: updatedUpvoters })
-      .eq("id", postId)
-      .select();
+    const { data: postUpvote, error } = await supabase
+      .from("post_upvotes")
+      .select("*")
+      .eq("post_id", postId)
+      .eq("upvoter_id", userId)
+      .maybeSingle();
 
-    if (updateError) throw updateError;
+    if (error) throw error;
 
-    return updatedPost;
+    if (postUpvote) {
+      return true;
+    } else {
+      return false;
+    }
   } catch (error) {
     console.error(error);
     throw error;
   }
 };
 
-export const hasUserUpvoted = async (postId: string, userId: string): Promise<boolean> => {
-  try {
+export const countUpvotes = async (postId: string): Promise<number> => {
+    try {
     const supabase = await createClientServerComponent();
 
-    const { data: post, error } = await supabase
-      .from("posts")
-      .select("upvoters_id")
-      .eq("id", postId)
-      .single();
+    const { count, error } = await supabase
+      .from("post_upvotes")
+      .select("*", { count: "exact", head: true })
+      .eq("post_id", postId);
 
     if (error) throw error;
 
-    const upvoters: string[] = post.upvoters_id || [];
-
-    return upvoters.includes(userId);
+    if (count) return count
+    else return 0;
   } catch (error) {
     console.error(error);
     throw error;