Merge pull request #444 from CodebilityDev/miguel/feeds-improvement

Miguel/feeds improvement

Author: yyyort

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

@@ -0,0 +1,58 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@codevs/ui/alert-dialog";
+
+interface DeleteDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function DeleteDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  isLoading,
+}: DeleteDialogProps) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent className="bg-light-300 dark:bg-dark-100">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="dark:text-light-900 text-black">
+            Delete Post
+          </AlertDialogTitle>
+          <AlertDialogDescription className="text-gray dark:text-light-500">
+            Are you sure you want to delete this post? This action cannot be
+            undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AlertDialogFooter className="mt-6">
+          <AlertDialogCancel
+            disabled={isLoading}
+            className="border-light-700 dark:border-dark-200 
+                       bg-light-800 dark:bg-dark-200 dark:text-light-900 text-black"
+          >
+            Cancel
+          </AlertDialogCancel>
+
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="bg-red-500 hover:bg-red-600 focus:ring-red-500"
+          >
+            {isLoading ? "Deleting..." : "Delete"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -1,30 +1,57 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, 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";
 
 interface FeedProp {
   isAdmin: boolean;
-  onCreatePost?: () => void;
+  searchQuery?: string;
 }
 
-export default function Feed({ isAdmin }: FeedProp) {
+export default function Feed({ isAdmin, searchQuery }: FeedProp) {
   const posts = useFeedsStore((state) => state.posts);
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
 
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    fetchPosts();
+  }, [fetchPosts]);
+
+  // Filter posts by title or author's first/last name (case-insensitive)
+  const filteredPosts = useMemo(() => {
+    if (!searchQuery || searchQuery.trim() === "") return posts;
+
+    const query = searchQuery.toLowerCase();
+
+    return posts.filter((post) => {
+      const titleMatch = post.title?.toLowerCase().includes(query);
+      const firstNameMatch = post.author_id?.first_name
+        ?.toLowerCase()
+        .includes(query);
+      const lastNameMatch = post.author_id?.last_name
+        ?.toLowerCase()
+        .includes(query);
+
+      return titleMatch || firstNameMatch || lastNameMatch;
+    });
+  }, [posts, searchQuery]);
+
   const postsPerPage = 6;
-  const totalPages = Math.ceil(posts.length / postsPerPage);
+  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
   const startIndex = (currentPage - 1) * postsPerPage;
-  const currentPosts = posts.slice(startIndex, startIndex + postsPerPage);
+  const currentPosts = filteredPosts.slice(
+    startIndex,
+    startIndex + postsPerPage,
+  );
 
+  // Reset to first page when search changes
   useEffect(() => {
-    fetchPosts();
-  }, [fetchPosts]);
+    setCurrentPage(1);
+  }, [searchQuery]);
 
   const handleDeletePost = (deletedPostId: string | number) => {
     useFeedsStore.setState((state) => ({
@@ -52,13 +79,16 @@ export default function Feed({ isAdmin }: FeedProp) {
           />
         ))}
       </div>
-      <DefaultPagination
-        totalPages={totalPages}
-        currentPage={currentPage}
-        handleNextPage={handleNextPage}
-        handlePreviousPage={handlePreviousPage}
-        setCurrentPage={setCurrentPage}
-      />
+
+      {filteredPosts.length > 0 && (
+        <DefaultPagination
+          totalPages={totalPages}
+          currentPage={currentPage}
+          handleNextPage={handleNextPage}
+          handlePreviousPage={handlePreviousPage}
+          setCurrentPage={setCurrentPage}
+        />
+      )}
     </>
   );
 }

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

@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
 
 import { deletePost } from "../_services/action";
 import { PostType } from "../_services/query";
+import { DeleteDialog } from "./DeleteDialog";
 import PostUpvote from "./PostUpvote";
 
 interface PostProps {
@@ -22,6 +23,8 @@ interface PostProps {
 export default function Post({ post, isAdmin, onDelete }: PostProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isAuthor, setIsAuthor] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const { user } = useUserStore();
 
   useEffect(() => {
@@ -38,20 +41,26 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
       checkIfAuthor();
     }
   }, [user]);
-
-  const handleDelete = async (e: React.MouseEvent) => {
+  const openDeleteDialog = async (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
+    setShowDeleteDialog(true);
+  };
+
+  const handleDelete = async () => {
     try {
+      setIsDeleting(true);
       await deletePost(post.id);
-      toast.success("Post deleted successfully!");
-
       if (onDelete) {
         onDelete(post.id);
       }
+      toast.success("Post deleted successfully!");
     } catch (error) {
       toast.error("Failed to delete post.");
       console.error("Failed to delete post:", error);
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteDialog(false);
     }
   };
 
@@ -67,7 +76,7 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
         {(isAdmin || isAuthor) && (
           <button
             className="invisible absolute right-2 top-2 rounded bg-red-500 px-2 py-1 text-white hover:bg-red-600 group-hover:visible"
-            onClick={handleDelete}
+            onClick={openDeleteDialog}
             aria-label="Delete post"
           >
             ✕
@@ -122,6 +131,12 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
         onClose={closeModal}
         postId={post.id}
       />
+      <DeleteDialog
+        isOpen={showDeleteDialog}
+        onClose={() => setShowDeleteDialog(false)}
+        onConfirm={handleDelete}
+        isLoading={isDeleting}
+      />
     </div>
   );
 }

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,73 @@
+"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<number | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchSocialPoints = async () => {
+      if (!user) {
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const fetchedPoints = await getSocialPoints(user.id);
+        setPoints(fetchedPoints || 0);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    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">
+            {loading ? (
+              <div className="flex justify-end">
+                <div className="h-5 w-5 animate-spin rounded-full border-2 border-cyan-500 border-t-transparent" />
+              </div>
+            ) : (
+              <>
+                <p className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-2xl font-bold text-transparent">
+                  {points ?? 0}
+                </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>
+  );
+}