first commit
This commit is contained in:
152
client/src/pages/ProfilePage.tsx
Normal file
152
client/src/pages/ProfilePage.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useUserCats } from '@/hooks/useCats';
|
||||
import CatModal from '@/components/CatModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart, Plus, ArrowLeft } from 'lucide-react';
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { id: paramId } = useParams<{ id?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user: me } = useAuth();
|
||||
const [modalCatId, setModalCatId] = useState<number | null>(null);
|
||||
|
||||
const profileUserId = paramId ? parseInt(paramId) : me?.id;
|
||||
const isMe = !paramId || (me && profileUserId === me.id);
|
||||
|
||||
const { data, isLoading } = useUserCats(profileUserId ?? 0);
|
||||
|
||||
const profileUser = isMe ? me : data?.cats?.[0]
|
||||
? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
|
||||
: null;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-10">
|
||||
<div className="flex items-center gap-6 mb-10">
|
||||
<Skeleton className="h-16 w-16 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-0.5">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="aspect-square" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!profileUser && !isMe) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<p className="text-muted-foreground">User not found</p>
|
||||
<Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cats = data?.cats ?? [];
|
||||
const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
|
||||
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-10">
|
||||
{!isMe && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Profile header */}
|
||||
<div className="flex items-start gap-8 mb-10">
|
||||
<Avatar className="h-16 w-16 shrink-0">
|
||||
<AvatarFallback className="bg-foreground text-background text-lg font-medium">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<h1 className="text-xl font-medium">@{profileUser?.username}</h1>
|
||||
{/* Edit profile button - only for own profile, navigates to profile settings or does nothing */}
|
||||
{isMe && (
|
||||
<Button variant="outline" size="sm" className="text-xs h-7 rounded-sm">
|
||||
Edit profile
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm mb-4">
|
||||
<div><span className="font-semibold">{cats.length}</span> <span className="text-muted-foreground">posts</span></div>
|
||||
<div><span className="font-semibold">{totalLikes}</span> <span className="text-muted-foreground">likes</span></div>
|
||||
<div><span className="font-semibold">{profileUser?.points ?? 0}</span> <span className="text-muted-foreground">pts</span></div>
|
||||
</div>
|
||||
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="text-xs h-7 rounded-sm gap-1">
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
New post
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-6 border-t pt-4 mb-4">
|
||||
<button className="text-xs font-semibold tracking-wider uppercase text-foreground">Posts</button>
|
||||
<button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Saved</button>
|
||||
<button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Liked</button>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{cats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center border-t">
|
||||
<p className="text-base font-medium mb-1">No cats yet</p>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{isMe ? 'Share your first cat photo' : 'This user has no cats yet'}
|
||||
</p>
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<Button size="sm">Upload</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-0.5">
|
||||
{cats.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setModalCatId(cat.id)}
|
||||
className="group relative aspect-square overflow-hidden bg-muted"
|
||||
>
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Cat photo'}
|
||||
className="h-full w-full object-cover transition-transform group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="flex items-center gap-1 text-white text-sm font-medium">
|
||||
<Heart className="h-4 w-4 fill-white" strokeWidth={2} />
|
||||
<span>{cat.likes_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{modalCatId && (
|
||||
<CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user