Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | "use client"; import { useProducts } from "@/hooks/useProducts"; import { useCategories } from "@/hooks/useCategories"; import Image from "next/image"; import { formatCurrency, formatNumber } from "@/lib/core"; export default function APITestPage() { const { products, loading: productsLoading, error: productsError } = useProducts({ limit: 4 }); const { categories, loading: categoriesLoading, error: categoriesError } = useCategories(true); return ( <div className="container mx-auto px-4 py-10"> <h1 className="text-4xl font-bold mb-8 text-center">API Integration Test</h1> {/* Products Section */} <section className="mb-12"> <h2 className="text-2xl font-semibold mb-4">Products from Database</h2> {productsLoading && ( <div className="text-center py-8"> <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue"></div> <p className="mt-2">Loading products...</p> </div> )} {productsError && ( <div className="bg-red-light-6 border border-red text-red-dark p-4 rounded"> Error: {productsError.message} </div> )} {!productsLoading && !productsError && ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> {products.map((product) => ( <div key={product.id} className="bg-white border border-gray-3 rounded-lg p-4 shadow-sm hover:shadow-md transition"> {product.imgs?.previews?.[0] && ( <Image src={product.imgs.previews[0]} alt={product.title} width={200} height={200} className="w-full h-48 object-cover rounded mb-3" /> )} <h3 className="font-semibold text-lg mb-2">{product.title}</h3> <div className="flex items-center gap-2 mb-2"> <span className="text-blue font-bold text-xl">{formatCurrency(product.discountedPrice)}</span> <span className="text-gray-5 line-through text-sm">{formatCurrency(product.price)}</span> </div> <div className="flex items-center gap-1"> <span className="text-yellow">★</span> <span className="text-sm text-gray-6">{product.rating ? formatNumber(product.rating, 1) : "0.0"}</span> <span className="text-sm text-gray-5">({product.reviews} reviews)</span> </div> <div className="mt-2"> <span className="text-xs bg-green-light-5 text-green-dark px-2 py-1 rounded"> In Stock: {product.stock} </span> </div> </div> ))} </div> )} </section> {/* Categories Section */} <section className="mb-12"> <h2 className="text-2xl font-semibold mb-4">Categories from Database</h2> {categoriesLoading && ( <div className="text-center py-8"> <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue"></div> <p className="mt-2">Loading categories...</p> </div> )} {categoriesError && ( <div className="bg-red-light-6 border border-red text-red-dark p-4 rounded"> Error: {categoriesError} </div> )} {!categoriesLoading && !categoriesError && ( <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4"> {categories.map((category) => ( <div key={category.id} className="bg-meta rounded-lg p-4 text-center hover:bg-blue-light-5 transition"> {category.imageUrl && ( <Image src={category.imageUrl} alt={category.name} width={80} height={80} className="mx-auto mb-2" /> )} <h3 className="font-medium text-sm">{category.name}</h3> {category.products !== undefined && ( <p className="text-xs text-gray-6 mt-1">{category.products} products</p> )} </div> ))} </div> )} </section> {/* API Endpoints Info */} <section className="bg-gray-1 rounded-lg p-6"> <h2 className="text-2xl font-semibold mb-4">Active API Endpoints</h2> <div className="space-y-2 font-mono text-sm"> <div className="flex gap-2"> <span className="text-green font-semibold">GET</span> <code>/api/products</code> </div> <div className="flex gap-2"> <span className="text-green font-semibold">GET</span> <code>/api/categories</code> </div> <div className="flex gap-2"> <span className="text-green font-semibold">GET</span> <code>/api/cart</code> </div> <div className="flex gap-2"> <span className="text-green font-semibold">GET</span> <code>/api/wishlist</code> </div> </div> <p className="mt-4 text-sm text-gray-6"> All data is fetched from MySQL database via Prisma ORM. </p> <div className="mt-4 flex gap-4"> <a href="/api/products" target="_blank" className="inline-block bg-blue text-white px-4 py-2 rounded hover:bg-blue-dark transition" > View Products JSON </a> <a href="http://localhost:5555" target="_blank" className="inline-block bg-green text-white px-4 py-2 rounded hover:bg-green-dark transition" > Open Prisma Studio </a> </div> </section> </div> ); } |