fix: remove redundant component, fix typo (#957)

src/app/(main)/categories/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import { type Metadata } from "next";
 import { ProductListByCategoryDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
-import { ProductsList } from "@/ui/components/ProductsList";
+import { ProductList } from "@/ui/components/ProductList";
 
 export const generateMetadata = async ({ params }: { params: { slug: string } }): Promise<Metadata> => {
 	const { category } = await executeGraphQL(ProductListByCategoryDocument, {
@@ -31,7 +31,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 	return (
 		<div className="mx-auto max-w-7xl p-8 pb-16">
 			<h1 className="pb-8 text-xl font-semibold">{name}</h1>
-			<ProductsList products={products.edges.map((e) => e.node)} />
+			<ProductList products={products.edges.map((e) => e.node)} />
 		</div>
 	);
 }

src/app/(main)/page.tsx

@@ -1,6 +1,6 @@
 import { ProductListDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
-import { ProductsList } from "@/ui/components/ProductsList";
+import { ProductList } from "@/ui/components/ProductList";
 
 export const metadata = {
 	title: "Saleor Storefront example",
@@ -18,7 +18,7 @@ export default async function Page() {
 		<div>
 			<section className="mx-auto max-w-7xl p-8 pb-16">
 				<h2 className="sr-only">Product list</h2>
-				<ProductsList products={products} />
+				<ProductList products={products} />
 			</section>
 		</div>
 	);

src/app/(main)/products/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import { ProductListPaginatedDocument } from "@/gql/graphql";
 import { ProductsPerPage, executeGraphQL } from "@/lib/graphql";
 import { Pagination } from "@/ui/components/Pagination";
-import { ProductsList } from "@/ui/components/ProductsList";
+import { ProductList } from "@/ui/components/ProductList";
 
 export const metadata = {
 	title: "Product List · Saleor Storefront example",
@@ -34,7 +34,7 @@ export default async function Page({ searchParams }: Props) {
 		<div>
 			<section className="mx-auto max-w-7xl p-8 pb-16">
 				<h2 className="sr-only">Product list</h2>
-				<ProductsList products={products.edges.map((e) => e.node)} />
+				<ProductList products={products.edges.map((e) => e.node)} />
 				<Pagination pageInfo={products.pageInfo} />
 			</section>
 		</div>

src/ui/components/ProductList.tsx

@@ -1,20 +1,19 @@
 import { ProductElement } from "./ProductElement";
 import { type ProductListItemFragment } from "@/gql/graphql";
 
-type Props = {
-	products: ProductListItemFragment[];
-};
-
-export const ProductList = ({ products }: Props) => {
+export const ProductList = ({ products }: { products: readonly ProductListItemFragment[] }) => {
 	return (
-		<ul className="grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" role="list">
+		<ul
+			role="list"
+			data-testid="ProductList"
+			className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+		>
 			{products.map((product, index) => (
 				<ProductElement
 					key={product.id}
 					product={product}
-					//Prioritize first image in the list to speed up above the fold image loading on mobile
 					priority={index === 0}
-					loading={index < 4 ? "eager" : "lazy"}
+					loading={index < 3 ? "eager" : "lazy"}
 				/>
 			))}
 		</ul>