P14:[{"_318":60,"_319":58,"_320":321},"app1","app2","diffPatch","diff --git a/app/domain/products.server.ts b/app/domain/products.server.ts\nindex 64bd817..70efbfb 100644\n--- a/app/domain/products.server.ts\n+++ b/app/domain/products.server.ts\n@@ -2,12 +2,22 @@ import { db } from '#app/db.server.js'\n import {\n \ttype ProductWhereInput,\n \ttype ProductSelect,\n+\ttype ProductOrderByWithRelationInput,\n } from '#app/generated/prisma/models.ts'\n \n interface ProductFilters {\n+\t// 💰 we add the new types for the filters\n+\tcategory?: string[]\n+\tbrand?: string[]\n+\tpriceMin?: number\n+\tpriceMax?: number\n+\tsortBy?: 'name' | 'price-low' | 'price-high' | 'rating'\n+\tpage?: number\n+\tlimit?: number\n \tsearch?: string\n }\n \n+// Define select object without strict typing for _count support\n const productShortInfoSelect = {\n \tid: true,\n \tname: true,\n@@ -28,6 +38,49 @@ const productShortInfoSelect = {\n \t},\n } as const satisfies ProductSelect\n \n+// 💰 We have learned how to use searchParams, now we have a utility method to extract all\n+// 💰 the filters from the URLSearchParams for us\n+export const extractProductFiltersFromSearchParams = (\n+\tsearchParams: URLSearchParams,\n+\t// 💰 we tell the function what the return type is so we don't accidentally make a mistake\n+): ProductFilters => {\n+\tconst search = searchParams.get('q') || undefined\n+\tconst category = searchParams.getAll('category') || []\n+\tconst brand = searchParams.getAll('brand') || []\n+\tconst priceMin = searchParams.get('priceMin')\n+\t\t? parseFloat(searchParams.get('priceMin')!)\n+\t\t: undefined\n+\tconst priceMax = searchParams.get('priceMax')\n+\t\t? parseFloat(searchParams.get('priceMax')!)\n+\t\t: undefined\n+\tconst sortBy = (searchParams.get('sortBy') || 'name') as\n+\t\t| 'name'\n+\t\t| 'price-low'\n+\t\t| 'price-high'\n+\t\t| 'rating'\n+\tconst page = parseInt(searchParams.get('page') || '1')\n+\tconst limit = parseInt(searchParams.get('perPage') || '9')\n+\treturn { search, category, brand, priceMin, priceMax, sortBy, page, limit }\n+}\n+\n+// 💰 We use this utility method to help us sort the products by price/name/rating\n+function createProductOrderBy(\n+\tsortBy: ProductFilters['sortBy'],\n+): ProductOrderByWithRelationInput | undefined {\n+\tswitch (sortBy) {\n+\t\tcase 'name':\n+\t\t\treturn { name: 'asc' }\n+\t\tcase 'price-low':\n+\t\t\treturn { price: 'asc' }\n+\t\tcase 'price-high':\n+\t\t\treturn { price: 'desc' }\n+\t\tcase 'rating':\n+\t\t\treturn { reviewScore: 'desc' }\n+\t\tdefault:\n+\t\t\treturn { name: 'asc' }\n+\t}\n+}\n+\n function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {\n \treturn {\n \t\tOR: filters?.search\n@@ -40,18 +93,57 @@ function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {\n \t\t\t\t\t},\n \t\t\t\t]\n \t\t\t: undefined,\n+\t\t// 💰 We add the new where clauses for category, brand, priceMin and priceMax\n+\t\tcategory:\n+\t\t\tfilters?.category && filters.category.length > 0\n+\t\t\t\t? { name: { in: filters.category } }\n+\t\t\t\t: undefined,\n+\t\tbrand:\n+\t\t\tfilters?.brand && filters.brand.length > 0\n+\t\t\t\t? { name: { in: filters.brand } }\n+\t\t\t\t: undefined,\n+\t\tprice: {\n+\t\t\tgte: filters?.priceMin ?? 0,\n+\t\t\tlte: filters?.priceMax ?? 300,\n+\t\t},\n \t}\n }\n \n export async function getProducts(filters?: ProductFilters) {\n+\t// 🐨 Let's fix up the hardcoded values for page and limit to make it work!\n+\tconst page = 1\n+\tconst limit = 4\n+\tconst skip = (page - 1) * limit\n \tconst whereClause = createProductWhereClause(filters)\n+\t// 🐨 Let's pass our sorting value into this function\n+\tconst orderByClause = createProductOrderBy(undefined)\n+\t// 💰 We pass in the orderBy, skip and take to our ORM to make everything work\n \tconst products = await db.product.findMany({\n \t\twhere: whereClause,\n+\t\torderBy: orderByClause,\n \t\tselect: productShortInfoSelect,\n+\t\tskip,\n+\t\ttake: limit,\n+\t})\n+\n+\t// 💰 This returns the total count of our query\n+\tconst totalCount = await db.product.count({\n+\t\twhere: whereClause,\n \t})\n+\t// 💰 We figure out if there are more products to load\n+\tconst hasMore = skip + products.length < totalCount\n \n \treturn {\n \t\tproducts,\n+\t\thasMore,\n+\t\t// 💰 We return the pagination object to be consumed by the client\n+\t\tpagination: {\n+\t\t\tpage,\n+\t\t\tlimit,\n+\t\t\ttotalCount,\n+\t\t\thasMore,\n+\t\t\ttotalPages: Math.ceil(totalCount / limit),\n+\t\t},\n \t}\n }\n \ndiff --git a/app/routes/_landing.products._index/product-filters.tsx b/app/routes/_landing.products._index/product-filters.tsx\nnew file mode 100644\nindex 0000000..f269eb2\n--- /dev/null\n+++ b/app/routes/_landing.products._index/product-filters.tsx\n@@ -0,0 +1,114 @@\n+import { Form, useLoaderData, useSearchParams } from 'react-router'\n+import { type Route } from './+types/route'\n+\n+interface ProductFiltersProps {\n+\tisPageLoading: boolean\n+}\n+\n+export function ProductFilters({ isPageLoading }: ProductFiltersProps) {\n+\tconst loaderData = useLoaderData()\n+\tconst [searchParams] = useSearchParams()\n+\t// 💰 We learned how to get single values from the url\n+\tconst priceMin = searchParams.get('priceMin') || ''\n+\tconst priceMax = searchParams.get('priceMax') || ''\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tCategory\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{loaderData.categories.map((category) => (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{category.name}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tBrand\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{loaderData.brands.map((brand) => (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{brand.name}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tPrice Range\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t\n+\t\t\t\t\tApply Filters\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nindex 180b939..be5f875 100644\n--- a/app/routes/_landing.products._index/route.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -1,15 +1,21 @@\n import { Filter, Grid, List } from 'lucide-react'\n import { useState } from 'react'\n+import { useSearchParams, useNavigation } from 'react-router'\n import { ProductCard } from '#app/components/product-card.js'\n import { getAllBrands } from '#app/domain/brand.server.js'\n import { getAllCategories } from '#app/domain/category.server.js'\n-import { getProducts } from '#app/domain/products.server.js'\n+import {\n+\t// 💰 we need this to extract the filters!\n+\textractProductFiltersFromSearchParams,\n+\tgetProducts,\n+} from '#app/domain/products.server.js'\n import {\n \tgetMetaFromMatches,\n \tgetMetaTitle,\n \tconstructPrefixedTitle,\n } from '#app/utils/metadata.js'\n import { type Route } from './+types/route'\n+import { ProductFilters } from './product-filters'\n \n export const meta: Route.MetaFunction = ({ matches }) => {\n \tconst rootMeta = getMetaFromMatches(matches, 'root')\n@@ -24,9 +30,13 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n export const loader = async ({ request }: Route.LoaderArgs) => {\n \tconst url = new URL(request.url)\n \tconst searchParams = url.searchParams\n-\n+\t// 🐨 Extract the filters from the search parameters\n+\tconst filters = undefined\n+\t// 💣 We won't be needing the search anymore after we extract the filters\n \tconst search = searchParams.get('q') || undefined\n+\t// 🐨 Extract the pagination object alongside the products\n \tconst [{ products }, { categories }, { brands }] = await Promise.all([\n+\t\t// 🐨 Let's replace the search here with our filters\n \t\tgetProducts({ search }),\n \t\tgetAllCategories(),\n \t\tgetAllBrands(),\n@@ -34,26 +44,33 @@ export const loader = async ({ request }: Route.LoaderArgs) => {\n \n \treturn {\n \t\tproducts,\n+\t\t// 🐨 Return the pagination object as well\n \t\tcategories,\n \t\tbrands,\n \t}\n }\n \n export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n-\tconst { products, categories, brands } = loaderData\n+\tconst { products } = loaderData\n+\t// 💣 We won't be needing these manual state filters anymore, we are using the url!\n \tconst [selectedCategory, setSelectedCategory] = useState('All')\n \tconst [selectedBrand, setBrand] = useState('All')\n \tconst [priceRange, setPriceRange] = useState([0, 300])\n \tconst [sortBy, setSortBy] = useState('name')\n \tconst [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n \tconst [showFilters, setShowFilters] = useState(false)\n-\n+\t// 💣 The products are already filtered server-side, we can remove this!\n \tconst filteredProducts = products\n-\n+\tconst [searchParams, setSearchParams] = useSearchParams()\n+\tconst navigation = useNavigation()\n+\t// 🐨 There are 3 states in useNavigation, \"idle\" | \"submitting\" | \"loading\", let's\n+\t// 🐨 use that to determine if the page is loading\n+\t// 💰 it's easier to use \"!==\"\n+\tconst isPageLoading = false\n \treturn (\n \t\t

\n \t\t\t{/* Header */}\n-\t\t\t

\n+\t\t\t

\n \t\t\t\t

\n \t\t\t\t\t

\n \t\t\t\t\t\t

\n@@ -61,7 +78,11 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t\t\t\t\tAll Products\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{filteredProducts.length} products found\n+\t\t\t\t\t\t\t\t{/** 🐨 Add the total number of products */}\n+\t\t\t\t\t\t\t\t{/** 💰 loaderData.pagination.totalCount */}\n+\t\t\t\t\t\t\t\t{} products total ({/** 🐨 Add the shown number of products */}\n+\t\t\t\t\t\t\t\t{/** 💰 products.length */}\n+\t\t\t\t\t\t\t\t{} shown)\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t

\n@@ -73,6 +94,30 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t\t\t\t\tFilters\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\tsetSearchParams((prev) => {\n+\t\t\t\t\t\t\t\t\t\t// 💰 Let's use this approach for sortBy as well\n+\t\t\t\t\t\t\t\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\t\t\t\t\t\t\t\tnewParams.set('perPage', e.target.value)\n+\t\t\t\t\t\t\t\t\t\tnewParams.delete('page') // Reset page when changing limit\n+\t\t\t\t\t\t\t\t\t\treturn newParams\n+\t\t\t\t\t\t\t\t\t})\n+\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\tdefaultValue={searchParams.get('perPage') || '9'}\n+\t\t\t\t\t\t\t\tclassName=\"rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:ring-2 focus:ring-amber-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white\"\n+\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t setSortBy(e.target.value)}\n \t\t\t\t\t\t\t\tclassName=\"rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:ring-2 focus:ring-amber-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white\"\n@@ -105,91 +150,30 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t

\n \t\t\t\t\t{/* Filters Sidebar */}\n \t\t\t\t\t\n-\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\tCategory\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t{categories.map((category) => (\n-\t\t\t\t\t\t\t\t\t\t setSelectedCategory(category.name)}\n-\t\t\t\t\t\t\t\t\t\t\tclassName={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${\n-\t\t\t\t\t\t\t\t\t\t\t\tselectedCategory === category.name\n-\t\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n-\t\t\t\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'\n-\t\t\t\t\t\t\t\t\t\t\t}`}\n-\t\t\t\t\t\t\t\t\t\t>\n-\t\t\t\t\t\t\t\t\t\t\t{category.name}\n-\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t))}\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t

\n-\n-\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\tBrand\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t{brands.map((brand) => (\n-\t\t\t\t\t\t\t\t\t\t setBrand(brand.name)}\n-\t\t\t\t\t\t\t\t\t\t\tclassName={`block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 ${\n-\t\t\t\t\t\t\t\t\t\t\t\tselectedBrand === brand.name\n-\t\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n-\t\t\t\t\t\t\t\t\t\t\t\t\t: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'\n-\t\t\t\t\t\t\t\t\t\t\t}`}\n-\t\t\t\t\t\t\t\t\t\t>\n-\t\t\t\t\t\t\t\t\t\t\t{brand.name}\n-\t\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t))}\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t

\n-\n-\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\tPrice Range\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t\t\t\tsetPriceRange([priceRange[0], parseInt(e.target.value)])\n-\t\t\t\t\t\t\t\t\t\t}\n-\t\t\t\t\t\t\t\t\t\tclassName=\"h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700\"\n-\t\t\t\t\t\t\t\t\t/>\n-\t\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t\t\t$0\n-\t\t\t\t\t\t\t\t\t\t${priceRange[1]}\n-\t\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t

\n+\t\t\t\t\t\t{/* 💰 We have this extracted out method built by Kelly */}\n+\t\t\t\t\t\t\n \t\t\t\t\t

\n \n \t\t\t\t\t{/* Products Grid/List */}\n \t\t\t\t\t

\n \t\t\t\t\t\t{viewMode === 'grid' ? (\n \t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{/* 🐨 We don't want to use the \"filteredProducts\" anymore */}\n \t\t\t\t\t\t\t\t{filteredProducts.map((product) => (\n \t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t))}\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t) : (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t)}\n-\n+\t\t\t\t\t\t{/* 🐨 We don't want to use the \"filteredProducts\" anymore */}\n \t\t\t\t\t\t{filteredProducts.length === 0 && (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

app/domain/products.server.ts-36+128App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/product-filters.tsx-0+114App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/route.tsx-154+138App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/domain/products.server.ts-36+128App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/product-filters.tsx-0+114App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/route.tsx-154+138App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2