3- comment on post mutation added

Author: burakorkmez

frontend/src/components/common/Post.jsx

@@ -9,11 +9,18 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 
 import LoadingSpinner from "./LoadingSpinner";
+import { formatPostDate } from "../../utils/date";
 
 const Post = ({ post }) => {
 	const [comment, setComment] = useState("");
 	const { data: authUser } = useQuery({ queryKey: ["authUser"] });
 	const queryClient = useQueryClient();
+	const postOwner = post.user;
+	const isLiked = post.likes.includes(authUser._id);
+
+	const isMyPost = authUser._id === post.user._id;
+
+	const formattedDate = formatPostDate(post.createdAt);
 
 	const { mutate: deletePost, isPending: isDeleting } = useMutation({
 		mutationFn: async () => {
@@ -71,21 +78,44 @@ const Post = ({ post }) => {
 		},
 	});
 
-	const postOwner = post.user;
-	const isLiked = post.likes.includes(authUser._id);
-
-	const isMyPost = authUser._id === post.user._id;
-
-	const formattedDate = "1h";
+	const { mutate: commentPost, isPending: isCommenting } = useMutation({
+		mutationFn: async () => {
+			try {
+				const res = await fetch(`/api/posts/comment/${post._id}`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ text: comment }),
+				});
+				const data = await res.json();
 
-	const isCommenting = false;
+				if (!res.ok) {
+					throw new Error(data.error || "Something went wrong");
+				}
+				return data;
+			} catch (error) {
+				throw new Error(error);
+			}
+		},
+		onSuccess: () => {
+			toast.success("Comment posted successfully");
+			setComment("");
+			queryClient.invalidateQueries({ queryKey: ["posts"] });
+		},
+		onError: (error) => {
+			toast.error(error.message);
+		},
+	});
 
 	const handleDeletePost = () => {
 		deletePost();
 	};
 
 	const handlePostComment = (e) => {
 		e.preventDefault();
+		if (isCommenting) return;
+		commentPost();
 	};
 
 	const handleLikePost = () => {

frontend/src/utils/date/index.js

@@ -0,0 +1,42 @@
+export const formatPostDate = (createdAt) => {
+	const currentDate = new Date();
+	const createdAtDate = new Date(createdAt);
+
+	const timeDifferenceInSeconds = Math.floor((currentDate - createdAtDate) / 1000);
+	const timeDifferenceInMinutes = Math.floor(timeDifferenceInSeconds / 60);
+	const timeDifferenceInHours = Math.floor(timeDifferenceInMinutes / 60);
+	const timeDifferenceInDays = Math.floor(timeDifferenceInHours / 24);
+
+	if (timeDifferenceInDays > 1) {
+		return createdAtDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+	} else if (timeDifferenceInDays === 1) {
+		return "1d";
+	} else if (timeDifferenceInHours >= 1) {
+		return `${timeDifferenceInHours}h`;
+	} else if (timeDifferenceInMinutes >= 1) {
+		return `${timeDifferenceInMinutes}m`;
+	} else {
+		return "Just now";
+	}
+};
+
+export const formatMemberSinceDate = (createdAt) => {
+	const date = new Date(createdAt);
+	const months = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December",
+	];
+	const month = months[date.getMonth()];
+	const year = date.getFullYear();
+	return `Joined ${month} ${year}`;
+};