indigo/ToyShare
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement add toy and edit toy functions to sqlite database

Browse Source
This commit is contained in:
Indigo Tang
2025-07-06 13:46:36 +00:00
parent a6ccc6a5f4
commit 0b22c28dfa
10 changed files with 156 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/toys/[id]/page.tsx
+51 -24
View File
@@ -1,26 +1,24 @@
import Image from 'next/image';
import { mockToys } from '@/lib/mockData';
import { getToyById, getAllToys } from '@/data/operations';
import type { Toy } from '@/types';
import { Button } from '@/components/ui/button';
import AvailabilityCalendar from '@/components/toys/AvailabilityCalendar';
import { ArrowLeft, CalendarDays, DollarSign, MapPin, ShoppingBag, UserCircle2 } from 'lucide-react';
import { Calendar } from '@/components/ui/calendar';
import { ArrowLeft, DollarSign, MapPin, ShoppingBag, UserCircle2 } from 'lucide-react';
import Link from 'next/link';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { addDays, parseISO } from 'date-fns';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
interface ToyPageProps {
params: { id: string };
}
// Server Component to fetch toy data (mocked for now)
async function getToyById(id: string): Promise<Toy | undefined> {
// In a real app, this would fetch from a database
await new Promise(resolve => setTimeout(resolve, 200)); // Simulate network delay
return mockToys.find(toy => toy.id === id);
}
export default async function ToyPage({ params }: ToyPageProps) {
const toy = await getToyById(params.id);
const toy = getToyById(params.id);
if (!toy) {
return (
@@ -39,6 +37,12 @@ export default async function ToyPage({ params }: ToyPageProps) {
const placeholderHint = toy.category.toLowerCase() || "toy detail";
const disabledDates = toy.unavailableRanges.map(range => {
const from = parseISO(range.startDate);
const to = parseISO(range.endDate);
return { from, to };
});
return (
<div className="container mx-auto py-8 px-4">
<Link href="/" className="inline-flex items-center text-primary hover:underline mb-6 group">
@@ -47,7 +51,6 @@ export default async function ToyPage({ params }: ToyPageProps) {
</Link>
<div className="grid md:grid-cols-2 gap-8 lg:gap-12 items-start">
{/* Image Gallery Section */}
<div className="space-y-4">
<div className="aspect-video relative w-full rounded-lg overflow-hidden shadow-lg">
<Image
@@ -76,7 +79,6 @@ export default async function ToyPage({ params }: ToyPageProps) {
)}
</div>
{/* Toy Details Section */}
<div className="space-y-6">
<Badge variant="secondary" className="text-sm">{toy.category}</Badge>
<h1 className="text-4xl font-bold font-headline text-primary">{toy.name}</h1>
@@ -88,12 +90,19 @@ export default async function ToyPage({ params }: ToyPageProps) {
<Separator />
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
<div className="flex items-center">
<UserCircle2 className="h-5 w-5 mr-2 text-accent" />
<div>
<span className="font-medium text-muted-foreground">Owner: </span>
<span className="text-foreground">{toy.ownerName}</span>
</div>
<div className="flex items-center gap-2">
<Link href={`/owner/${toy.ownerId}/toys`} className="flex-shrink-0">
<Avatar className="h-8 w-8">
<AvatarImage src={toy.ownerAvatarUrl} alt={toy.ownerName} data-ai-hint="owner avatar" />
<AvatarFallback>{toy.ownerName.split(' ').map(n => n[0]).join('').toUpperCase()}</AvatarFallback>
</Avatar>
</Link>
<div>
<span className="font-medium text-muted-foreground">Owner: </span>
<Link href={`/owner/${toy.ownerId}/toys`} className="text-foreground hover:underline">
{toy.ownerName}
</Link>
</div>
</div>
{toy.location && (
<div className="flex items-center">
@@ -109,7 +118,9 @@ export default async function ToyPage({ params }: ToyPageProps) {
<DollarSign className="h-5 w-5 mr-2 text-accent" />
<div>
<span className="font-medium text-muted-foreground">Price: </span>
<span className="text-foreground font-semibold">{toy.pricePerDay > 0 ? `$${toy.pricePerDay}/day` : 'Free'}</span>
<span className="text-foreground font-semibold">
{toy.pricePerDay > 0 ? `$${toy.pricePerDay}/day` : 'Free'}
</span>
</div>
</div>
)}
@@ -117,7 +128,22 @@ export default async function ToyPage({ params }: ToyPageProps) {
<Separator />
<AvailabilityCalendar availability={toy.availability} />
<Card className="shadow-md">
<CardHeader>
<CardTitle className="text-xl font-headline text-primary">Availability Calendar</CardTitle>
</CardHeader>
<CardContent className="flex justify-center">
<Calendar
mode="single"
disabled={disabledDates}
month={new Date()}
className="rounded-md border"
/>
</CardContent>
<p className="text-xs text-muted-foreground mt-0 pb-4 text-center">
Dates shown in gray or crossed out are unavailable.
</p>
</Card>
<Button size="lg" className="w-full mt-6 transition-transform transform hover:scale-105">
<ShoppingBag className="mr-2 h-5 w-5" /> Request to Rent
@@ -130,7 +156,8 @@ export default async function ToyPage({ params }: ToyPageProps) {
// Generate static paths for all toys
export async function generateStaticParams() {
return mockToys.map((toy) => ({
id: toy.id,
}));
const toys = getAllToys();
return toys.map((toy) => ({
id: toy.id,
}));
}