first commit

2026-05-29 10:23:25 +03:00
commit e4b25fe4b7
48 changed files with 9112 additions and 0 deletions
--- a/client/src/components/CatCard.tsx
+++ b/client/src/components/CatCard.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { Cat } from '@/api/endpoints';
+import { useAuth } from '@/hooks/useAuth';
+import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Heart, MessageCircle } from 'lucide-react';
+import { useToast } from '@/components/Toast';
+
+interface CatCardProps {
+  cat: Cat;
+  onOpen: (id: number) => void;
+}
+
+export default function CatCard({ cat, onOpen }: CatCardProps) {
+  const { user, updateUser } = useAuth();
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(cat.likes_count);
+  const [animating, setAnimating] = useState(false);
+  const [showHeart, setShowHeart] = useState(false);
+  const { toast } = useToast();
+  const likeMutation = useLikeCat(cat.id);
+  const unlikeMutation = useUnlikeCat(cat.id);
+  const isOwner = user && cat.user_id === user.id;
+
+  const handleDoubleClick = () => {
+    setShowHeart(true);
+    setTimeout(() => setShowHeart(false), 600);
+    if (!liked && !isOwner) {
+      handleLikeAction();
+    }
+  };
+
+  const handleLikeAction = async () => {
+    if (isOwner || !user) 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 });
+        }
+      } catch {
+        setLiked(true);
+        setLikeCount((c) => c + 1);
+      }
+    } else {
+      setLiked(true);
+      setLikeCount((c) => c + 1);
+      toast('Liked', 'like');
+      try {
+        await likeMutation.mutateAsync();
+      } catch {
+        setLiked(false);
+        setLikeCount((c) => c - 1);
+      }
+    }
+  };
+
+  const handleLike = () => {
+    handleLikeAction();
+  };
+
+  return (
+    <div className="animate-fade-in border-b pb-6 mb-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <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>
+          <span className="text-xs text-muted-foreground">
+            {new Date(cat.created_at).toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+            })}
+          </span>
+        </div>
+      </div>
+
+      {/* Image */}
+      <div
+        className="relative bg-muted rounded-sm overflow-hidden cursor-pointer mb-3"
+        onDoubleClick={handleDoubleClick}
+        onClick={() => onOpen(cat.id)}
+      >
+        <img
+          src={cat.image_url}
+          alt={cat.caption || 'Cat photo'}
+          className="w-full max-h-[500px] object-contain select-none"
+          draggable={false}
+          loading="lazy"
+        />
+        {showHeart && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <Heart className="heart-burst h-20 w-20 text-white" strokeWidth={1.5} />
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-between mb-2">
+        <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 ${
+                liked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'
+              }`}
+              strokeWidth={liked ? 2 : 1.5}
+            />
+          </button>
+          <button onClick={() => onOpen(cat.id)} className="hover:text-muted-foreground transition-colors">
+            <MessageCircle className="h-5 w-5" strokeWidth={1.5} />
+          </button>
+        </div>
+      </div>
+
+      {/* Likes */}
+      <div className="mb-1">
+        <span className="text-sm font-semibold">{likeCount.toLocaleString()} likes</span>
+      </div>
+
+      {/* Caption */}
+      {cat.caption && (
+        <div className="mb-0.5">
+          <span className="text-sm">
+            <span className="font-semibold mr-1.5">@{cat.username}</span>
+            {cat.caption}
+          </span>
+        </div>
+      )}
+
+      {/* Comment link */}
+      <button
+        onClick={() => onOpen(cat.id)}
+        className="text-sm text-muted-foreground hover:text-foreground transition-colors mt-0.5"
+      >
+        View comments
+      </button>
+    </div>
+  );
+}