reroute-js 0.2.1 → 0.2.3

package/_/store/src/client/routes/products/[id].tsx

@@ -0,0 +1,233 @@
+import { useEffect, useState } from 'react';
+import { Link, useData, useParams } from 'reroute-js/react';
+import Header from '../../components/Header';
+import ProductCard from '../../components/ProductCard';
+import { getProduct, getProductsByCategory, type Product } from '../../lib/api';
+
+// Enable SSR data fetching for this route
+const ssr = {
+	async data({ params }: { params: { id?: string } }) {
+		try {
+			const idStr = params?.id;
+			const id = idStr ? Number.parseInt(idStr, 10) : NaN;
+			if (!Number.isFinite(id)) {
+				return {
+					product: null,
+					relatedProducts: [],
+					error: 'Invalid product ID',
+				};
+			}
+			const product = await getProduct(id);
+			const allInCategory = await getProductsByCategory(product.category);
+			const relatedProducts = allInCategory
+				.filter((p) => p.id !== id)
+				.slice(0, 4);
+			return { product, relatedProducts };
+		} catch (e) {
+			console.error('ssr.data error for product detail:', e);
+			return {
+				product: null,
+				relatedProducts: [],
+				error: 'Failed to load product details. Please try again later.',
+			};
+		}
+	},
+};
+
+function ProductDetailPage() {
+	const params = useParams<{ id: string }>();
+	const productId = params.id ? Number.parseInt(params.id, 10) : null;
+
+	// Read SSR-seeded or prefetched data for this route
+	const routeData = useData<{
+		product: Product | null;
+		relatedProducts: Product[];
+		error?: string;
+	}>();
+	const [clientData, setClientData] = useState<typeof routeData | null>(null);
+	const data = routeData ?? clientData ?? undefined;
+	const isLoading = data === undefined;
+	const product = data?.product ?? null;
+	const relatedProducts = data?.relatedProducts ?? [];
+	const error = data?.error ?? (productId ? null : 'Invalid product ID');
+
+	// Fallback on client nav if hover prefetch didn't run
+	useEffect(() => {
+		if (typeof window === 'undefined') return;
+		if (routeData !== undefined) return;
+		if (!productId) return;
+		const path = `/products/${productId}`;
+		fetch(`/__reroute_data?path=${encodeURIComponent(path)}`, {
+			headers: { Accept: 'application/json' },
+			credentials: 'same-origin',
+		})
+			.then((r) => (r.ok ? r.json() : null))
+			.then((j) => {
+				if (!j) return;
+				setClientData(j.data ?? j);
+			})
+			.catch(() => {});
+	}, [productId, routeData]);
+
+	const [addingToCart, setAddingToCart] = useState(false);
+
+	const handleAddToCart = () => {
+		setAddingToCart(true);
+		// Simulate adding to cart
+		setTimeout(() => {
+			setAddingToCart(false);
+			alert(`Added ${product?.title} to cart!`);
+		}, 500);
+	};
+
+	const handleBuyNow = () => {
+		alert(`Proceeding to checkout with ${product?.title}`);
+	};
+
+	if (isLoading) {
+		return (
+			<>
+				<Header />
+				<main className='container-custom py-8'>
+					<div className='text-center py-16 text-gray-600 text-lg'>
+						<div className='animate-pulse'>Loading product details...</div>
+					</div>
+				</main>
+			</>
+		);
+	}
+
+	if (error || !product) {
+		return (
+			<>
+				<Header />
+				<main className='container-custom py-8'>
+					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
+						{error || 'Product not found'}
+						<div className='mt-4'>
+							<Link to='/products' className='link font-semibold'>
+								← Back to Products
+							</Link>
+						</div>
+					</div>
+				</main>
+			</>
+		);
+	}
+
+	return (
+		<>
+			<Header />
+
+			<main className='container-custom py-8'>
+				{/* Breadcrumbs */}
+				<nav className='flex items-center gap-2 text-sm text-gray-600 mb-8'>
+					<Link to='/' className='link'>
+						Home
+					</Link>
+					<span>/</span>
+					<Link to='/products' className='link'>
+						Products
+					</Link>
+					<span>/</span>
+					<Link to={`/categories/${product.category}`} className='link'>
+						{product.category}
+					</Link>
+					<span>/</span>
+					<span className='text-gray-900'>{product.title}</span>
+				</nav>
+
+				{/* Product Details */}
+				<div className='grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16'>
+					{/* Product Image */}
+					<div className='card flex items-center justify-center p-8 min-h-[500px]'>
+						<img
+							src={product.image}
+							alt={product.title}
+							className='max-w-full max-h-[500px] object-contain'
+							style={{ viewTransitionName: `product-image-${product.id}` }}
+						/>
+					</div>
+
+					{/* Product Info */}
+					<div className='flex flex-col gap-6'>
+						<div className='badge-primary'>{product.category}</div>
+
+						<h1 className='text-4xl font-bold text-gray-900 leading-tight'>
+							{product.title}
+						</h1>
+
+						{product.rating && (
+							<div className='flex items-center gap-4'>
+								<div className='flex items-center gap-2 text-base text-gray-600'>
+									<span className='text-2xl'>⭐</span>
+									<span className='font-semibold text-xl'>
+										{product.rating.rate}
+									</span>
+									<span>({product.rating.count} reviews)</span>
+								</div>
+							</div>
+						)}
+
+						<div className='text-4xl font-bold text-primary-600'>
+							${product.price.toFixed(2)}
+						</div>
+
+						<p className='text-lg text-gray-700 leading-relaxed'>
+							{product.description}
+						</p>
+
+						<div className='flex gap-4 mt-4'>
+							<button
+								type='button'
+								className='btn-primary flex-1 disabled:opacity-50'
+								onClick={handleAddToCart}
+								disabled={addingToCart}
+							>
+								{addingToCart ? 'Adding...' : '🛒 Add to Cart'}
+							</button>
+
+							<button
+								type='button'
+								className='btn-secondary'
+								onClick={handleBuyNow}
+							>
+								Buy Now
+							</button>
+						</div>
+
+						<div className='p-4 bg-gray-50 rounded-xl text-sm text-gray-600 space-y-2'>
+							<div className='flex items-center gap-2'>
+								<span className='text-green-600 font-bold'>✓</span>
+								<span>Free shipping on orders over $50</span>
+							</div>
+							<div className='flex items-center gap-2'>
+								<span className='text-green-600 font-bold'>✓</span>
+								<span>30-day return policy</span>
+							</div>
+							<div className='flex items-center gap-2'>
+								<span className='text-green-600 font-bold'>✓</span>
+								<span>Secure checkout</span>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				{/* Related Products */}
+				{relatedProducts.length > 0 && (
+					<section className='animate-in'>
+						<h2 className='section-heading'>Related Products</h2>
+						<div className='product-grid'>
+							{relatedProducts.map((relatedProduct) => (
+								<ProductCard key={relatedProduct.id} product={relatedProduct} />
+							))}
+						</div>
+					</section>
+				)}
+			</main>
+		</>
+	);
+}
+
+export default ProductDetailPage;
+export { ssr };

package/_/store/src/client/routes/products/index.tsx

@@ -0,0 +1,261 @@
+import { useEffect, useState } from 'react';
+import { useData } from 'reroute-js/react';
+import Header from '../../components/Header';
+import ProductCard from '../../components/ProductCard';
+import {
+	getAllProducts,
+	getCategories,
+	getProductsByCategory,
+	type Product,
+} from '../../lib/api';
+
+type SortOption = 'default' | 'price-asc' | 'price-desc' | 'name-asc';
+
+const ssr = {
+	async data() {
+		try {
+			const [categories, products] = await Promise.all([
+				getCategories(),
+				getAllProducts(),
+			]);
+			return { categories, products } as {
+				categories: string[];
+				products: Product[];
+			};
+		} catch (e) {
+			console.error('ssr.data error for products list:', e);
+			return {
+				categories: [],
+				products: [],
+				error: 'Failed to load products.',
+			};
+		}
+	},
+};
+
+function ProductsPage() {
+	const routeData = useData<{
+		products: Product[];
+		categories: string[];
+		error?: string;
+	}>();
+	const [products, setProducts] = useState<Product[]>(
+		routeData?.products || [],
+	);
+	const [filteredProducts, setFilteredProducts] = useState<Product[]>(
+		routeData?.products || [],
+	);
+	const [categories, setCategories] = useState<string[]>(
+		routeData?.categories || [],
+	);
+	const [selectedCategory, setSelectedCategory] = useState<string>('all');
+	const [searchQuery, setSearchQuery] = useState<string>('');
+	const [sortBy, setSortBy] = useState<SortOption>('default');
+	const [loading, setLoading] = useState(!routeData);
+	const [error, setError] = useState<string | null>(routeData?.error || null);
+
+	// Load categories on mount (if not provided by SSR)
+	useEffect(() => {
+		if (categories.length > 0) return;
+		getCategories()
+			.then(setCategories)
+			.catch((err) => {
+				console.error('Failed to load categories:', err);
+			});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [categories.length]);
+
+	// Load products based on category (skip initial when SSR provided for 'all')
+	useEffect(() => {
+		// When SSR provided initial products just stop loading
+		if (products.length > 0) {
+			setFilteredProducts(products);
+			setLoading(false);
+			return;
+		}
+		setLoading(true);
+		setError(null);
+
+		const loadProducts =
+			selectedCategory === 'all'
+				? getAllProducts()
+				: getProductsByCategory(selectedCategory);
+
+		loadProducts
+			.then((data) => {
+				setProducts(data);
+				setFilteredProducts(data);
+			})
+			.catch((err) => {
+				console.error('Failed to load products:', err);
+				setError('Failed to load products. Please try again later.');
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedCategory, products]);
+
+	// Filter and sort products
+	useEffect(() => {
+		let result = [...products];
+
+		// Apply search filter
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			result = result.filter(
+				(product) =>
+					product.title.toLowerCase().includes(query) ||
+					product.description.toLowerCase().includes(query) ||
+					product.category.toLowerCase().includes(query),
+			);
+		}
+
+		// Apply sorting
+		switch (sortBy) {
+			case 'price-asc':
+				result.sort((a, b) => a.price - b.price);
+				break;
+			case 'price-desc':
+				result.sort((a, b) => b.price - a.price);
+				break;
+			case 'name-asc':
+				result.sort((a, b) => a.title.localeCompare(b.title));
+				break;
+			default:
+				// Keep default order
+				break;
+		}
+
+		setFilteredProducts(result);
+	}, [products, searchQuery, sortBy]);
+
+	return (
+		<>
+			<Header />
+
+			<main className='container-custom py-8'>
+				<div className='mb-8'>
+					<h1 className='section-heading'>All Products</h1>
+					<p className='section-subheading'>
+						Browse our complete collection of quality products
+					</p>
+				</div>
+
+				{/* Filters */}
+				<div className='flex flex-wrap items-center gap-4 mb-8 p-6 bg-white rounded-xl shadow-card'>
+					<div className='flex items-center gap-2'>
+						<label
+							className='font-semibold text-gray-700'
+							htmlFor='category-filter'
+						>
+							Category:
+						</label>
+						<select
+							id='category-filter'
+							className='select min-w-[200px]'
+							value={selectedCategory}
+							onChange={(e) => setSelectedCategory(e.target.value)}
+						>
+							<option value='all'>All Categories</option>
+							{categories.map((category) => (
+								<option key={category} value={category}>
+									{category.charAt(0).toUpperCase() + category.slice(1)}
+								</option>
+							))}
+						</select>
+					</div>
+
+					<input
+						type='search'
+						placeholder='Search products...'
+						className='input flex-1 min-w-[250px]'
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+					/>
+
+					<div className='flex items-center gap-2'>
+						<span className='font-semibold text-gray-700'>Sort:</span>
+						<div className='flex gap-2'>
+							<button
+								type='button'
+								className={`btn-sm transition-all ${
+									sortBy === 'default'
+										? 'bg-primary-600 text-white border-primary-600'
+										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+								}`}
+								onClick={() => setSortBy('default')}
+							>
+								Default
+							</button>
+							<button
+								type='button'
+								className={`btn-sm transition-all ${
+									sortBy === 'price-asc'
+										? 'bg-primary-600 text-white border-primary-600'
+										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+								}`}
+								onClick={() => setSortBy('price-asc')}
+							>
+								Price: Low to High
+							</button>
+							<button
+								type='button'
+								className={`btn-sm transition-all ${
+									sortBy === 'price-desc'
+										? 'bg-primary-600 text-white border-primary-600'
+										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+								}`}
+								onClick={() => setSortBy('price-desc')}
+							>
+								Price: High to Low
+							</button>
+							<button
+								type='button'
+								className={`btn-sm transition-all ${
+									sortBy === 'name-asc'
+										? 'bg-primary-600 text-white border-primary-600'
+										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+								}`}
+								onClick={() => setSortBy('name-asc')}
+							>
+								Name: A-Z
+							</button>
+						</div>
+					</div>
+
+					{!loading && (
+						<div className='ml-auto text-sm text-gray-600'>
+							Showing {filteredProducts.length} of {products.length} products
+						</div>
+					)}
+				</div>
+
+				{/* Products Grid */}
+				{loading ? (
+					<div className='text-center py-16 text-gray-600 text-lg'>
+						<div className='animate-pulse'>Loading products...</div>
+					</div>
+				) : error ? (
+					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
+						{error}
+					</div>
+				) : filteredProducts.length === 0 ? (
+					<div className='text-center py-16 text-gray-600 text-lg'>
+						<div className='text-6xl mb-4'>🔍</div>
+						<div>No products found matching your criteria</div>
+					</div>
+				) : (
+					<div className='product-grid animate-in'>
+						{filteredProducts.map((product) => (
+							<ProductCard key={product.id} product={product} />
+						))}
+					</div>
+				)}
+			</main>
+		</>
+	);
+}
+
+export default ProductsPage;
+export { ssr };