0a1391674f
Integrate the `ViewCounter` component into meme standard and modal detail pages to track and display content views.
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import * as React from "react";
|
|
import { ContentCard } from "@/components/content-card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { ViewCounter } from "@/components/view-counter";
|
|
import { ContentService } from "@/services/content.service";
|
|
import type { Content } from "@/types/content";
|
|
|
|
export default function MemeModal({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string }>;
|
|
}) {
|
|
const { slug } = React.use(params);
|
|
const router = useRouter();
|
|
const [content, setContent] = React.useState<Content | null>(null);
|
|
const [loading, setLoading] = React.useState(true);
|
|
|
|
React.useEffect(() => {
|
|
ContentService.getOne(slug)
|
|
.then(setContent)
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, [slug]);
|
|
|
|
return (
|
|
<Dialog open onOpenChange={(open) => !open && router.back()}>
|
|
<DialogContent className="max-w-3xl p-0 overflow-hidden bg-transparent border-none">
|
|
<DialogTitle className="sr-only">
|
|
{content?.title || "Détail du mème"}
|
|
</DialogTitle>
|
|
<DialogDescription className="sr-only">
|
|
Affiche le mème en grand avec ses détails
|
|
</DialogDescription>
|
|
{loading ? (
|
|
<div className="h-[500px] flex items-center justify-center bg-zinc-950/50 rounded-lg">
|
|
<Spinner className="h-10 w-10 text-white" />
|
|
</div>
|
|
) : content ? (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
|
|
<ViewCounter contentId={content.id} />
|
|
<ContentCard content={content} />
|
|
</div>
|
|
) : (
|
|
<div className="p-8 bg-white dark:bg-zinc-900 rounded-lg text-center">
|
|
<p>Impossible de charger ce mème.</p>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|