first commit
This commit is contained in:
184
client/src/components/CatModal.tsx
Normal file
184
client/src/components/CatModal.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCat, useDeleteCat } from '@/hooks/useCats';
|
||||
import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart, MessageCircle, X, Trash2 } from 'lucide-react';
|
||||
|
||||
interface CatModalProps {
|
||||
catId: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
const { user, updateUser } = useAuth();
|
||||
const { data, isLoading } = useCat(catId);
|
||||
const { data: likeData, refetch: refetchLike } = useLikeStatus(catId);
|
||||
const likeMutation = useLikeCat(catId);
|
||||
const unlikeMutation = useUnlikeCat(catId);
|
||||
const deleteMutation = useDeleteCat();
|
||||
const { toast } = useToast();
|
||||
|
||||
const [liked, setLiked] = useState(false);
|
||||
const [likeCount, setLikeCount] = useState(0);
|
||||
const [animating, setAnimating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (likeData) setLiked(likeData.liked);
|
||||
}, [likeData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.cat) setLikeCount(data.cat.likes_count);
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, []);
|
||||
|
||||
const cat = data?.cat;
|
||||
const isOwner = cat && user && cat.user_id === user.id;
|
||||
|
||||
const handleLike = async () => {
|
||||
if (isOwner || !user || !cat) return;
|
||||
setAnimating(true);
|
||||
setTimeout(() => setAnimating(false), 400);
|
||||
|
||||
if (liked) {
|
||||
setLiked(false);
|
||||
setLikeCount((c) => c - 1);
|
||||
try {
|
||||
const res = await unlikeMutation.mutateAsync();
|
||||
if (res.ownerPoints !== undefined && cat.user_id === user.id) {
|
||||
updateUser({ ...user, points: res.ownerPoints });
|
||||
}
|
||||
refetchLike();
|
||||
} catch {
|
||||
setLiked(true);
|
||||
setLikeCount((c) => c + 1);
|
||||
}
|
||||
} else {
|
||||
setLiked(true);
|
||||
setLikeCount((c) => c + 1);
|
||||
toast('Liked', 'like');
|
||||
try {
|
||||
await likeMutation.mutateAsync();
|
||||
refetchLike();
|
||||
} catch {
|
||||
setLiked(false);
|
||||
setLikeCount((c) => c - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!isOwner || !cat) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(cat.id);
|
||||
toast('Deleted', 'success');
|
||||
onClose();
|
||||
} catch {
|
||||
toast('Failed to delete', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || !cat) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40" onClick={onClose}>
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-foreground/30 border-t-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]">
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Cat photo'}
|
||||
className="max-h-[85vh] w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Details panel */}
|
||||
<div className="flex w-[320px] flex-col border-l">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Avatar className="h-7 w-7">
|
||||
<AvatarFallback className="text-[10px] bg-foreground text-background">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm font-medium">@{cat.username}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{isOwner && (
|
||||
<button onClick={handleDelete} className="p-1 text-muted-foreground hover:text-destructive transition-colors">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onClose} className="p-1 text-muted-foreground hover:text-foreground transition-colors">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<Avatar className="h-7 w-7 shrink-0">
|
||||
<AvatarFallback className="text-[10px] bg-foreground text-background">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
{cat.caption || 'No caption'}
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{new Date(cat.created_at).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="border-t px-4 py-3">
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<button
|
||||
onClick={handleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`like-btn ${animating ? 'heart-animate' : ''}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-5 w-5 ${
|
||||
liked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'
|
||||
}`}
|
||||
strokeWidth={liked ? 2 : 1.5}
|
||||
/>
|
||||
</button>
|
||||
<button className="hover:text-muted-foreground transition-colors">
|
||||
<MessageCircle className="h-5 w-5" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-sm font-semibold">{likeCount.toLocaleString()} likes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user