first commit

client/src/pages/CatPage.tsx

@@ -0,0 +1,161 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useCat, useDeleteCat } from '@/hooks/useCats';
+import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/components/Toast';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Heart, ArrowLeft, Trash2, MessageCircle } from 'lucide-react';
+
+export default function CatPage() {
+  const { id } = useParams<{ id: string }>();
+  const catId = parseInt(id!);
+  const navigate = useNavigate();
+  const { user, updateUser } = useAuth();
+  const { toast } = useToast();
+
+  const { data, isLoading, isError } = useCat(catId);
+  const { data: likeData, refetch: refetchLike } = useLikeStatus(catId);
+  const likeMutation = useLikeCat(catId);
+  const unlikeMutation = useUnlikeCat(catId);
+  const deleteMutation = useDeleteCat();
+
+  const [liked, setLiked] = useState(false);
+  const [animating, setAnimating] = useState(false);
+
+  const cat = data?.cat;
+  const isOwner = cat && user && cat.user_id === user.id;
+  const isLiked = likeData?.liked ?? false;
+
+  useEffect(() => { setLiked(isLiked); }, [isLiked]);
+
+  const handleLike = async () => {
+    if (isOwner || !user || !cat) return;
+    setAnimating(true);
+    setTimeout(() => setAnimating(false), 400);
+
+    if (isLiked) {
+      setLiked(false);
+      try {
+        const res = await unlikeMutation.mutateAsync();
+        if (res.ownerPoints !== undefined && cat.user_id === user.id) {
+          updateUser({ ...user, points: res.ownerPoints });
+        }
+        refetchLike();
+      } catch { setLiked(true); }
+    } else {
+      setLiked(true);
+      toast('Liked', 'like');
+      try {
+        await likeMutation.mutateAsync();
+        refetchLike();
+      } catch { setLiked(false); }
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!isOwner || !cat) return;
+    try {
+      await deleteMutation.mutateAsync(cat.id);
+      toast('Deleted', 'success');
+      navigate('/feed');
+    } catch {
+      toast('Failed to delete', 'error');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-8">
+        <Skeleton className="mb-4 h-5 w-20" />
+        <Skeleton className="aspect-[4/3] w-full" />
+        <div className="mt-4 space-y-2">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !cat) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20">
+        <p className="text-muted-foreground">Cat not found</p>
+        <Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 animate-fade-in">
+      <button
+        onClick={() => navigate(-1)}
+        className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back
+      </button>
+
+      {/* Image */}
+      <div className="bg-muted mb-5">
+        <img src={cat.image_url} alt={cat.caption || 'Cat photo'} className="w-full max-h-[60vh] object-contain mx-auto" />
+      </div>
+
+      {/* Info */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <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>
+          {isOwner && (
+            <button onClick={handleDelete} className="text-muted-foreground hover:text-destructive transition-colors">
+              <Trash2 className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <button
+            onClick={handleLike}
+            disabled={isOwner || !user}
+            className={`like-btn ${animating ? 'heart-animate' : ''}`}
+          >
+            <Heart
+              className={`h-5 w-5 ${isLiked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'}`}
+              strokeWidth={isLiked ? 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 block">{cat.likes_count.toLocaleString()} likes</span>
+
+        {cat.caption && (
+          <p className="text-sm">
+            <span className="font-semibold mr-1.5">@{cat.username}</span>
+            {cat.caption}
+          </p>
+        )}
+
+        <p className="text-xs text-muted-foreground">
+          {new Date(cat.created_at).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })}
+        </p>
+
+        <p className="text-xs text-muted-foreground">🏆 {cat.user_points} points</p>
+      </div>
+    </div>
+  );
+}