feat(ui): hide spoiler banner, anonymize claims, optional guest name, list wishlists on home, drop esgotados toggle
This commit is contained in:
@@ -19,7 +19,6 @@ function PublicWishlistContent() {
|
||||
const params = useParams();
|
||||
const [wishlist, setWishlist] = useState<Wishlist | null>(null);
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const [showClaimed, setShowClaimed] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
@@ -121,12 +120,10 @@ function PublicWishlistContent() {
|
||||
}
|
||||
};
|
||||
|
||||
const filteredItems = showClaimed
|
||||
? items
|
||||
: items.filter((item) => {
|
||||
const my = myClaimFor(item);
|
||||
return item.remainingQuantity > 0 || my || item.id === justClaimedItemId;
|
||||
});
|
||||
const filteredItems = items.filter((item) => {
|
||||
const my = myClaimFor(item);
|
||||
return item.remainingQuantity > 0 || my || item.id === justClaimedItemId;
|
||||
});
|
||||
|
||||
const formatPrice = (price: number | null, currency: string) => {
|
||||
if (!price) return null;
|
||||
@@ -208,18 +205,7 @@ function PublicWishlistContent() {
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showClaimed}
|
||||
onChange={(e) => setShowClaimed(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Mostrar itens esgotados</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mb-6 flex items-center justify-end">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{filteredItems.length} de {items.length} itens
|
||||
</div>
|
||||
@@ -229,7 +215,7 @@ function PublicWishlistContent() {
|
||||
{filteredItems.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
|
||||
Todos os itens já foram reservados!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
@@ -282,9 +268,9 @@ function PublicWishlistContent() {
|
||||
return (
|
||||
<li key={c.id} className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<span className="font-medium">{c.guest.name}</span>
|
||||
<span className="font-medium">{isMine ? 'Você' : 'Reservado'}</span>
|
||||
<span className="text-gray-500"> · {c.quantity} un.</span>
|
||||
{c.note && (
|
||||
{c.note && isMine && (
|
||||
<span className="block text-xs italic text-gray-500">
|
||||
"{c.note}"
|
||||
</span>
|
||||
|
||||
@@ -29,7 +29,6 @@ function GuestsManager() {
|
||||
const onCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setErr('');
|
||||
if (!name.trim()) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await guestsApi.create(name.trim());
|
||||
@@ -67,7 +66,7 @@ function GuestsManager() {
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Nome do convidado"
|
||||
placeholder="Nome do convidado (opcional)"
|
||||
className="flex-1 border rounded px-3 py-2"
|
||||
/>
|
||||
<button disabled={busy} className="bg-indigo-600 text-white rounded px-4 py-2 disabled:opacity-50">
|
||||
|
||||
@@ -16,10 +16,7 @@ export async function POST(request: NextRequest) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
const body = await request.json().catch(() => ({}));
|
||||
const name = (body?.name ?? '').toString().trim();
|
||||
if (!name) {
|
||||
return NextResponse.json({ error: 'name is required' }, { status: 400 });
|
||||
}
|
||||
const name = (body?.name ?? '').toString().trim() || 'Convidado';
|
||||
const [row] = await db.insert(guests).values({ name }).returning();
|
||||
return NextResponse.json({ success: true, guest: row }, { status: 201 });
|
||||
}
|
||||
|
||||
39
app/page.tsx
39
app/page.tsx
@@ -1,14 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { authApi } from '@/lib/api';
|
||||
import { authApi, wishlistsApi, type Wishlist } from '@/lib/api';
|
||||
|
||||
export default function HomePage() {
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
const [state, setState] = useState<'checking' | 'guest' | 'none'>('checking');
|
||||
const [guestName, setGuestName] = useState<string>('');
|
||||
const [wishlists, setWishlists] = useState<Wishlist[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
@@ -31,7 +32,13 @@ export default function HomePage() {
|
||||
return;
|
||||
}
|
||||
if (who.role === 'guest') {
|
||||
setGuestName(who.guest.name);
|
||||
const lists = await wishlistsApi.getAllPublic();
|
||||
if (cancelled) return;
|
||||
if (lists.length === 1) {
|
||||
router.replace(`/${lists[0].slug}`);
|
||||
return;
|
||||
}
|
||||
setWishlists(lists);
|
||||
setState('guest');
|
||||
return;
|
||||
}
|
||||
@@ -49,10 +56,28 @@ export default function HomePage() {
|
||||
|
||||
if (state === 'guest') {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center text-center px-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">Olá, {guestName}!</h1>
|
||||
<p className="text-gray-500">Visite o link da lista que você recebeu.</p>
|
||||
<div className="min-h-screen flex items-center justify-center px-6">
|
||||
<div className="w-full max-w-2xl text-center">
|
||||
<h1 className="text-3xl font-bold mb-6">Bem-vindo</h1>
|
||||
{wishlists.length === 0 ? (
|
||||
<p className="text-gray-500">Nenhuma lista disponível ainda.</p>
|
||||
) : (
|
||||
<ul className="space-y-3 text-left">
|
||||
{wishlists.map((w) => (
|
||||
<li key={w.id}>
|
||||
<Link
|
||||
href={`/${w.slug}`}
|
||||
className="block rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:border-indigo-400 hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10 transition"
|
||||
>
|
||||
<div className="font-semibold text-lg">{w.name}</div>
|
||||
{w.description && (
|
||||
<div className="text-sm text-gray-500 mt-1">{w.description}</div>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user