revalidate social points on add/delete post/comment

Author: JM-Flores

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import DefaultPagination from "@/components/ui/pagination";
-import { useFeedsStore } from "@/store/feeds-store"; // Adjust path as needed
+import { useFeedsStore } from "@/store/feeds-store";
 
 import Post from "./PostCard";
 
@@ -24,7 +24,7 @@ export default function Feed({ isAdmin }: FeedProp) {
 
   useEffect(() => {
     fetchPosts();
-  }, [fetchPosts]);
+  }, []);
 
   const handleDeletePost = (deletedPostId: string | number) => {
     useFeedsStore.setState((state) => ({

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

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Image from "next/image";
+import { useFeedsStore } from "@/store/feeds-store";
 import { X } from "lucide-react";
 
 import { deletePostComment } from "../_services/action";
@@ -21,15 +22,16 @@ export default function PostViewCommentItem({
   content,
   userCanDelete,
 }: PostViewCommentItemProps) {
+  const fetchPosts = useFeedsStore((state) => state.fetchPosts);
   const [isVisible, setIsVisible] = useState(true);
 
   const handleDelete = async () => {
     setIsVisible(false);
     try {
       await deletePostComment(commenntId);
+      fetchPosts();
     } catch (error) {
       setIsVisible(true);
-      // Optionally, you could log the error or show a message to the user
     }
   };
 

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import Image from "next/image";
 import { defaultAvatar } from "@/public/assets/images";
 import { useUserStore } from "@/store/codev-store";
+import { useFeedsStore } from "@/store/feeds-store";
 
 import { createComment } from "../_services/action";
 
@@ -18,6 +19,7 @@ export default function PostViewCreateComment({
 }: CreateCommentProps) {
   const [comment, setComment] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const fetchPosts = useFeedsStore((state) => state.fetchPosts);
   const { user } = useUserStore();
 
   const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -28,6 +30,7 @@ export default function PostViewCreateComment({
         await createComment(postId, user.id, comment);
         setComment("");
         onCommentCreated?.();
+        fetchPosts();
       } finally {
         setIsSubmitting(false);
       }

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useUserStore } from "@/store/codev-store";
+import { useFeedsStore } from "@/store/feeds-store";
+import { MessageSquareText } from "lucide-react";
+import { shallow } from "zustand/shallow";
+
+import { getSocialPoints } from "../_services/action";
+
+export default function SocialPointsCard() {
+  const posts = useFeedsStore((state) => state.posts, shallow);
+  const { user } = useUserStore();
+  const [points, setPoints] = useState(0);
+
+  useEffect(() => {
+    const fetchSocialPoints = async () => {
+      if (!user) return;
+      const fetchedPoints = await getSocialPoints(user.id);
+      setPoints(fetchedPoints || 0);
+    };
+
+    if (user) fetchSocialPoints();
+  }, [user, posts]);
+
+  return (
+    <div className="dark:bg-white/3 relative mt-4 w-full rounded-xl border border-white/10 bg-gray-800 p-4 text-white shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:bg-white/10 hover:shadow-lg dark:border-white/5 xl:fixed xl:right-6 xl:top-20 xl:z-50 xl:mt-0 xl:w-64">
+      <div className="relative">
+        <div className="mb-3 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 p-2 text-white">
+              <MessageSquareText className="h-6 w-6" />
+            </div>
+            <div>
+              <p className="text-sm font-medium text-gray-300">Social Points</p>
+              <p className="text-xs text-gray-500">Feed Engagement</p>
+            </div>
+          </div>
+          <div className="text-right">
+            <p className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-2xl font-bold text-transparent">
+              {points}
+            </p>
+            <p className="text-xs text-gray-500">points</p>
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Earn more points by posting and getting likes and comments!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/codebility/app/home/feeds/page.tsx

@@ -4,15 +4,14 @@ import { useEffect, useState } from "react";
 import CreatePostModal from "@/components/modals/CreatePostModal";
 import { Button } from "@/components/ui/button";
 import { useUserStore } from "@/store/codev-store";
-import { MessageSquareText } from "lucide-react";
 
 import Feed from "./_components/Feed";
-import { getSocialPoints, getUserRole } from "./_services/action";
+import SocialPointsCard from "./_components/SocialPointsCard";
+import { getUserRole } from "./_services/action";
 
 export default function FeedsPage() {
   const [isAdmin, setIsAdmin] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [socialPoints, setSocialPoints] = useState(0);
   const { user } = useUserStore();
 
   useEffect(() => {
@@ -22,16 +21,7 @@ export default function FeedsPage() {
       setIsAdmin(role === "Admin");
     };
 
-    const fetchSocialPoints = async () => {
-      if (!user) return;
-      const socialPoints = await getSocialPoints(user.id);
-      setSocialPoints(socialPoints || 0);
-    };
-
-    if (user) {
-      fetchRole();
-      fetchSocialPoints();
-    }
+    if (user) fetchRole();
   }, [user]);
 
   const openModal = () => setIsModalOpen(true);
@@ -47,35 +37,9 @@ export default function FeedsPage() {
             Codebility community.
           </p>
         </div>
-        {/* Social Points Card*/}
-        <div className="dark:bg-white/3 relative mt-4 w-full rounded-xl border border-white/10 bg-gray-800 p-4 text-white shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:bg-white/10 hover:shadow-lg dark:border-white/5 xl:fixed xl:right-6 xl:top-20 xl:z-50 xl:mt-0 xl:w-64">
-          <div className="relative">
-            <div className="mb-3 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 p-2 text-white">
-                  <MessageSquareText className="h-6 w-6" />
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-gray-300">
-                    Social Points
-                  </p>
-                  <p className="text-xs text-gray-500">Feed Engagement</p>
-                </div>
-              </div>
-              <div className="text-right">
-                <p className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-2xl font-bold text-transparent">
-                  {socialPoints}
-                </p>
-                <p className="text-xs text-gray-500">points</p>
-              </div>
-            </div>
-            <div className="space-y-1">
-              <p className="text-xs text-gray-500 dark:text-gray-400">
-                Earn more points by posting and getting likes and comments!
-              </p>
-            </div>
-          </div>
-        </div>
+
+        {/* Social Points Card */}
+        <SocialPointsCard />
 
         <Button className="mb-4 mt-4 w-auto" onClick={openModal}>
           Create Post