feat: add comment replies and liking functionality
- Introduced support for nested comment replies in both frontend and backend. - Added comment liking and unliking features, including like count and "isLiked" state tracking. - Updated database schema with `parentId` and new `comment_likes` table. - Enhanced UI for threaded comments and implemented display of like counts and reply actions. - Refactored APIs and repositories to support replies, likes, and enriched comment data.
This commit is contained in:
Mathis HERRIOT
@@ -2,7 +2,7 @@
|
||||
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
import { MoreHorizontal, Send, Trash2 } from "lucide-react";
|
||||
import { Heart, MoreHorizontal, Send, Trash2 } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useAuth } from "@/providers/auth-provider";
|
||||
import { type Comment, CommentService } from "@/services/comment.service";
|
||||
|
||||
@@ -25,6 +26,7 @@ export function CommentSection({ contentId }: CommentSectionProps) {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
const [comments, setComments] = React.useState<Comment[]>([]);
|
||||
const [newComment, setNewComment] = React.useState("");
|
||||
const [replyingTo, setReplyingTo] = React.useState<Comment | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
@@ -49,9 +51,14 @@ export function CommentSection({ contentId }: CommentSectionProps) {
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const comment = await CommentService.create(contentId, newComment.trim());
|
||||
const comment = await CommentService.create(
|
||||
contentId,
|
||||
newComment.trim(),
|
||||
replyingTo?.id,
|
||||
);
|
||||
setComments((prev) => [comment, ...prev]);
|
||||
setNewComment("");
|
||||
setReplyingTo(null);
|
||||
toast.success("Commentaire publié !");
|
||||
} catch (_error) {
|
||||
toast.error("Erreur lors de la publication du commentaire");
|
||||
@@ -70,97 +77,214 @@ export function CommentSection({ contentId }: CommentSectionProps) {
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 mt-8">
|
||||
<h3 className="font-bold text-lg">Commentaires ({comments.length})</h3>
|
||||
const handleLike = async (comment: Comment) => {
|
||||
if (!isAuthenticated) {
|
||||
toast.error("Vous devez être connecté pour liker");
|
||||
return;
|
||||
}
|
||||
|
||||
{isAuthenticated ? (
|
||||
<form onSubmit={handleSubmit} className="flex gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={user?.avatarUrl} />
|
||||
<AvatarFallback>{user?.username[0].toUpperCase()}</AvatarFallback>
|
||||
try {
|
||||
if (comment.isLiked) {
|
||||
await CommentService.unlike(comment.id);
|
||||
setComments((prev) =>
|
||||
prev.map((c) =>
|
||||
c.id === comment.id
|
||||
? { ...c, isLiked: false, likesCount: c.likesCount - 1 }
|
||||
: c,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
await CommentService.like(comment.id);
|
||||
setComments((prev) =>
|
||||
prev.map((c) =>
|
||||
c.id === comment.id
|
||||
? { ...c, isLiked: true, likesCount: c.likesCount + 1 }
|
||||
: c,
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (_error) {
|
||||
toast.error("Une erreur est survenue");
|
||||
}
|
||||
};
|
||||
|
||||
// Organiser les commentaires : Parents d'abord
|
||||
const rootComments = comments.filter((c) => !c.parentId);
|
||||
|
||||
const renderComment = (comment: Comment, depth = 0) => {
|
||||
const replies = comments.filter((c) => c.parentId === comment.id);
|
||||
|
||||
return (
|
||||
<div key={comment.id} className={cn("space-y-4", depth > 0 && "ml-10")}>
|
||||
<div className="flex gap-3">
|
||||
<Avatar className="h-8 w-8 shrink-0">
|
||||
<AvatarImage src={comment.user.avatarUrl} />
|
||||
<AvatarFallback>{comment.user.username[0].toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-2">
|
||||
<Textarea
|
||||
placeholder="Ajouter un commentaire..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="min-h-[80px] resize-none"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
disabled={!newComment.trim() || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Envoi..." : "Publier"}
|
||||
<Send className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-bold">
|
||||
{comment.user.displayName || comment.user.username}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(comment.createdAt), {
|
||||
addSuffix: true,
|
||||
locale: fr,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn(
|
||||
"h-8 w-8",
|
||||
comment.isLiked && "text-red-500 hover:text-red-600",
|
||||
)}
|
||||
onClick={() => handleLike(comment)}
|
||||
>
|
||||
<Heart className={cn("h-4 w-4", comment.isLiked && "fill-current")} />
|
||||
</Button>
|
||||
{(user?.uuid === comment.user.uuid ||
|
||||
user?.role === "admin" ||
|
||||
user?.role === "moderator") && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(comment.id)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{comment.text}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 pt-1">
|
||||
{comment.likesCount > 0 && (
|
||||
<span className="text-xs font-semibold text-muted-foreground">
|
||||
{comment.likesCount} like{comment.likesCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
{isAuthenticated && depth < 1 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-auto p-0 text-xs font-semibold text-muted-foreground hover:bg-transparent hover:text-foreground"
|
||||
onClick={() => {
|
||||
setReplyingTo(comment);
|
||||
setNewComment(`@${comment.user.username} `);
|
||||
document.querySelector("textarea")?.focus();
|
||||
}}
|
||||
>
|
||||
Répondre
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{replies.length > 0 && (
|
||||
<div className="space-y-4 pt-2">
|
||||
{replies.map((reply) => renderComment(reply, depth + 1))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 mt-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-bold text-lg">Commentaires ({comments.length})</h3>
|
||||
</div>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<div className="space-y-2">
|
||||
{replyingTo && (
|
||||
<div className="flex items-center justify-between bg-zinc-100 dark:bg-zinc-800 px-3 py-1.5 rounded-lg text-xs">
|
||||
<span className="text-muted-foreground">
|
||||
En réponse à{" "}
|
||||
<span className="font-bold">@{replyingTo.user.username}</span>
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4"
|
||||
onClick={() => {
|
||||
setReplyingTo(null);
|
||||
setNewComment("");
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="flex gap-3">
|
||||
<Avatar className="h-8 w-8 shrink-0">
|
||||
<AvatarImage src={user?.avatarUrl} />
|
||||
<AvatarFallback>{user?.username[0].toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-2">
|
||||
<Textarea
|
||||
placeholder={
|
||||
replyingTo ? "Ajouter une réponse..." : "Ajouter un commentaire..."
|
||||
}
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="min-h-[80px] resize-none"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
{replyingTo && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setReplyingTo(null);
|
||||
setNewComment("");
|
||||
}}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
disabled={!newComment.trim() || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Envoi..." : replyingTo ? "Répondre" : "Publier"}
|
||||
<Send className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-zinc-100 dark:bg-zinc-800 p-4 rounded-xl text-center text-sm">
|
||||
Connectez-vous pour laisser un commentaire.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{isLoading ? (
|
||||
<div className="text-center text-muted-foreground py-4">Chargement...</div>
|
||||
) : comments.length === 0 ? (
|
||||
) : rootComments.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-4">
|
||||
Aucun commentaire pour le moment. Soyez le premier !
|
||||
</div>
|
||||
) : (
|
||||
comments.map((comment) => (
|
||||
<div key={comment.id} className="flex gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={comment.user.avatarUrl} />
|
||||
<AvatarFallback>
|
||||
{comment.user.username[0].toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-bold">
|
||||
{comment.user.displayName || comment.user.username}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(comment.createdAt), {
|
||||
addSuffix: true,
|
||||
locale: fr,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{(user?.uuid === comment.user.uuid ||
|
||||
user?.role === "admin" ||
|
||||
user?.role === "moderator") && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(comment.id)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{comment.text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
rootComments.map((comment) => renderComment(comment))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,9 @@ import api from "@/lib/api";
|
||||
export interface Comment {
|
||||
id: string;
|
||||
text: string;
|
||||
parentId?: string;
|
||||
likesCount: number;
|
||||
isLiked: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
user: {
|
||||
@@ -19,9 +22,14 @@ export const CommentService = {
|
||||
return data;
|
||||
},
|
||||
|
||||
async create(contentId: string, text: string): Promise<Comment> {
|
||||
async create(
|
||||
contentId: string,
|
||||
text: string,
|
||||
parentId?: string,
|
||||
): Promise<Comment> {
|
||||
const { data } = await api.post<Comment>(`/contents/${contentId}/comments`, {
|
||||
text,
|
||||
parentId,
|
||||
});
|
||||
return data;
|
||||
},
|
||||
@@ -29,4 +37,12 @@ export const CommentService = {
|
||||
async remove(commentId: string): Promise<void> {
|
||||
await api.delete(`/comments/${commentId}`);
|
||||
},
|
||||
|
||||
async like(commentId: string): Promise<void> {
|
||||
await api.post(`/comments/${commentId}/like`);
|
||||
},
|
||||
|
||||
async unlike(commentId: string): Promise<void> {
|
||||
await api.delete(`/comments/${commentId}/like`);
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user