added problem 4

Author: AlemTuzlak

exercises/03.data-fetching/04.solution.fetching-with-loaders/.env.example renamed to exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/.env.example

@@ -0,0 +1,12 @@
+## Filtering, sorting and pagination
+
+Well done! You have successfully added filtering, sorting, and pagination to your product listing page.
+This allows your users to easily find and navigate through products based on their preferences.
+
+Now with that out of the way, you might've noticed that the pagination works, but it doesn't load more products!
+Let's fix that in the next exercise by using fetchers and infinite scrolling.
+
+🧝‍♀️ I'm going to help you out for the next exercise, I'll create an intersection observer hook to let us listen
+to when the user scrolls to the bottom of the page so we can load more products automatically! The rest is up to you!
+
+You're doing great! 🚀

exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/README.mdx

@@ -0,0 +1,54 @@
+import { Heart, Star } from 'lucide-react'
+import { Link } from 'react-router'
+import { type ProductCardInfo } from '#app/domain/products.server.js'
+
+export function ProductCard({ product }: { product: ProductCardInfo }) {
+	return (
+		<div
+			key={product.id}
+			className="group overflow-hidden rounded-lg bg-white transition-all duration-300 hover:scale-105 hover:transform hover:shadow-xl dark:bg-gray-800"
+		>
+			<div className="relative overflow-hidden">
+				<Link to={`/products/${product.id}`}>
+					<img
+						src={product.imageUrl}
+						alt={product.name}
+						className="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-110"
+					/>
+				</Link>
+				<button className="absolute top-4 right-4 rounded-full bg-white p-2 shadow-lg transition-colors duration-200 hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800">
+					<Heart className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+				</button>
+				<div className="absolute top-4 left-4 rounded-full bg-white px-3 py-1 dark:bg-gray-900">
+					<div className="flex items-center space-x-1">
+						<Star className="h-4 w-4 fill-current text-amber-500" />
+						<span className="text-sm font-medium text-gray-900 dark:text-white">
+							{product.reviewScore.toFixed(1)}
+						</span>
+					</div>
+				</div>
+			</div>
+			<div className="p-6">
+				<div className="mb-2 text-sm font-medium text-amber-600 dark:text-amber-500">
+					{product.brand.name}
+				</div>
+				<Link to={`/products/${product.id}`}>
+					<h3 className="mb-2 text-lg font-medium text-gray-900 transition-colors duration-300 group-hover:text-amber-600 dark:text-white dark:group-hover:text-amber-500">
+						{product.name}
+					</h3>
+				</Link>
+				<p className="mb-4 line-clamp-2 text-sm text-gray-600 dark:text-gray-300">
+					{product.description}
+				</p>
+				<div className="flex items-center justify-between">
+					<span className="text-xl font-bold text-gray-900 dark:text-white">
+						${product.price}
+					</span>
+					<span className="text-sm text-gray-500 dark:text-gray-400">
+						{product._count.reviews} reviews
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}

exercises/03.data-fetching/04.solution.fetching-with-loaders/app/app.css renamed to exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/app.css

@@ -0,0 +1,187 @@
+import { db } from "#app/db.server.js";
+import { type ProductWhereInput, type ProductSelect, type ProductOrderByWithRelationInput } from "#app/generated/prisma/models.ts";
+
+interface ProductFilters {
+  category?: string[];
+  brand?: string[];
+  priceMin?: number;
+  priceMax?: number;
+  sortBy?: 'name' | 'price-low' | 'price-high' | 'rating';
+  page?: number;
+  limit?: number;
+  search?: string;
+}
+
+// Define select object without strict typing for _count support
+const productShortInfoSelect = {
+  id: true,
+  name: true,
+  description: true,
+  imageUrl: true,
+  price: true,
+  brand: {
+    select: {
+      id: true,
+      name: true
+    },
+  },
+  reviewScore: true,
+  _count: {
+    select: {
+      reviews: true,
+    },
+  },
+} as const satisfies ProductSelect
+
+
+export const extractProductFiltersFromSearchParams = (
+  searchParams: URLSearchParams,
+): ProductFilters => {
+  const search = searchParams.get('q') || undefined
+  const category = searchParams.getAll('category') || []
+  const brand = searchParams.getAll('brand') || []
+  const priceMin = searchParams.get('priceMin')
+    ? parseFloat(searchParams.get('priceMin')!)
+    : undefined
+  const priceMax = searchParams.get('priceMax')
+    ? parseFloat(searchParams.get('priceMax')!)
+    : undefined
+  const sortBy = (searchParams.get('sortBy') || 'name') as
+    | 'name'
+    | 'price-low'
+    | 'price-high'
+    | 'rating'
+  const page = parseInt(searchParams.get('page') || '1')
+  const limit = parseInt(searchParams.get('perPage') || '9')
+  return { search, category, brand, priceMin, priceMax, sortBy, page, limit }
+}
+
+function createProductOrderBy(sortBy: ProductFilters['sortBy']): ProductOrderByWithRelationInput | undefined {
+  switch (sortBy) {
+    case 'name':
+      return { name: 'asc' };
+    case 'price-low':
+      return { price: 'asc' };
+    case 'price-high':
+      return { price: 'desc' };
+    case 'rating':
+      return { reviewScore: 'desc' };
+    default:
+      return { name: 'asc' };
+  }
+}
+
+
+function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {
+  return {
+    OR: filters?.search ? [
+      { name: filters.search ? { contains: filters.search, } : undefined },
+      { description: filters.search ? { contains: filters.search, } : undefined },
+    ] : undefined,
+    category: filters?.category && filters.category.length > 0 ? { name: { in: filters.category } } : undefined,
+    brand: filters?.brand && filters.brand.length > 0 ? { name: { in: filters.brand } } : undefined,
+    price: {
+      gte: filters?.priceMin ?? 0,
+      lte: filters?.priceMax ?? 300,
+    },
+  }
+}
+
+
+export async function getProducts(filters?: ProductFilters) {
+  const page = filters?.page ?? 1;
+  const limit = filters?.limit ?? 4;
+  const skip = (page - 1) * limit;
+  const whereClause = createProductWhereClause(filters);
+
+  const orderByClause = createProductOrderBy(filters?.sortBy);
+
+  // Get products with pagination 
+  const products = await db.product.findMany({
+    where: whereClause,
+    orderBy: orderByClause,
+    select: productShortInfoSelect,
+    skip,
+    take: limit,
+  });
+
+  // Get total count for pagination metadata
+  const totalCount = await db.product.count({
+    where: whereClause,
+  });
+
+  const hasMore = skip + products.length < totalCount;
+
+
+  return {
+    products,
+    pagination: {
+      page,
+      limit,
+      totalCount,
+      hasMore,
+      totalPages: Math.ceil(totalCount / limit),
+    }
+  };
+}
+
+export async function getProductById(id: string) {
+  const product = await db.product.findUnique({
+    where: { id },
+    select: {
+      id: true,
+      name: true,
+      description: true,
+      imageUrl: true,
+      price: true,
+      reviewScore: true,
+      category: {
+        select: {
+          id: true,
+          name: true
+        },
+      },
+      brand: {
+        select: {
+          id: true,
+          name: true
+        },
+      },
+      reviews: {
+        select: {
+          id: true,
+          rating: true,
+          comment: true,
+        }
+      },
+      variations: {
+        select: {
+
+          color: true,
+          size: true,
+          id: true,
+          quantity: true,
+
+        }
+      }
+    }
+  });
+  return product;
+}
+
+export async function getRelatedProducts(productId: string, categoryId: string | undefined, brandId: string | undefined) {
+  const products = await db.product.findMany({
+    where: {
+      id: { not: productId },
+      OR: [
+        { categoryId: categoryId },
+        { brandId: brandId }
+      ]
+    },
+    select: productShortInfoSelect,
+    take: 4
+  });
+  return products;
+}
+
+export type ProductCardInfo = Awaited<ReturnType<typeof getProducts>>['products'][number];