feat(contents): add author actions to content card
- Added dropdown menu for authors to edit or delete their content. - Integrated `UserContentEditDialog` for inline editing. - Enabled content deletion with confirmation and success/error feedback. - Improved UI with `DropdownMenu` for better action accessibility.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Eye, Heart, MoreHorizontal, Share2 } from "lucide-react";
|
||||
import { Edit, Eye, Heart, MoreHorizontal, Share2, Trash2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -15,20 +15,31 @@ import {
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useAuth } from "@/providers/auth-provider";
|
||||
import { ContentService } from "@/services/content.service";
|
||||
import { FavoriteService } from "@/services/favorite.service";
|
||||
import type { Content } from "@/types/content";
|
||||
import { UserContentEditDialog } from "./user-content-edit-dialog";
|
||||
|
||||
interface ContentCardProps {
|
||||
content: Content;
|
||||
onUpdate?: () => void;
|
||||
}
|
||||
|
||||
export function ContentCard({ content }: ContentCardProps) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
export function ContentCard({ content, onUpdate }: ContentCardProps) {
|
||||
const { isAuthenticated, user } = useAuth();
|
||||
const router = useRouter();
|
||||
const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
|
||||
const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
|
||||
const [editDialogOpen, setEditDialogOpen] = React.useState(false);
|
||||
|
||||
const isAuthor = user?.uuid === content.authorId;
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsLiked(content.isLiked || false);
|
||||
@@ -71,28 +82,69 @@ export function ContentCard({ content }: ContentCardProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("Êtes-vous sûr de vouloir supprimer ce mème ?")) return;
|
||||
|
||||
try {
|
||||
await ContentService.remove(content.id);
|
||||
toast.success("Mème supprimé !");
|
||||
onUpdate?.();
|
||||
} catch (_error) {
|
||||
toast.error("Erreur lors de la suppression.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow">
|
||||
<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={content.author.avatarUrl} />
|
||||
<AvatarFallback>{content.author.username[0].toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
href={`/user/${content.author.username}`}
|
||||
className="text-sm font-semibold hover:underline"
|
||||
>
|
||||
{content.author.displayName || content.author.username}
|
||||
</Link>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(content.createdAt).toLocaleDateString("fr-FR")}
|
||||
</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="ml-auto h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<>
|
||||
<Card className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow">
|
||||
<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={content.author.avatarUrl} />
|
||||
<AvatarFallback>{content.author.username[0].toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
href={`/user/${content.author.username}`}
|
||||
className="text-sm font-semibold hover:underline"
|
||||
>
|
||||
{content.author.displayName || content.author.username}
|
||||
</Link>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(content.createdAt).toLocaleDateString("fr-FR")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{isAuthor && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={() => setEditDialogOpen(true)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Modifier
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={handleDelete}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => toast.success("Lien copié !")}>
|
||||
<Share2 className="h-4 w-4 mr-2" />
|
||||
Partager
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
|
||||
<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
|
||||
{content.mimeType.startsWith("image/") ? (
|
||||
@@ -161,5 +213,12 @@ export function ContentCard({ content }: ContentCardProps) {
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<UserContentEditDialog
|
||||
content={content}
|
||||
open={editDialogOpen}
|
||||
onOpenChange={setEditDialogOpen}
|
||||
onSuccess={() => onUpdate?.()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user