P14:[{"_317":58,"_318":55,"_319":320},"app1","app2","diffPatch","diff --git a/app/domain/products.server.ts b/app/domain/products.server.ts\nindex 70efbfb..e204b7a 100644\n--- a/app/domain/products.server.ts\n+++ b/app/domain/products.server.ts\n@@ -6,7 +6,6 @@ import {\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@@ -38,11 +37,8 @@ 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@@ -63,7 +59,6 @@ export const extractProductFiltersFromSearchParams = (\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@@ -93,7 +88,6 @@ 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@@ -110,14 +104,14 @@ function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {\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 page = filters?.page ?? 1\n+\tconst limit = filters?.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+\n+\tconst orderByClause = createProductOrderBy(filters?.sortBy)\n+\n+\t// Get products with pagination\n \tconst products = await db.product.findMany({\n \t\twhere: whereClause,\n \t\torderBy: orderByClause,\n@@ -126,17 +120,15 @@ export async function getProducts(filters?: ProductFilters) {\n \t\ttake: limit,\n \t})\n \n-\t// 💰 This returns the total count of our query\n+\t// Get total count for pagination metadata\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+\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,\ndiff --git a/app/routes/_landing.products._index/product-filters.tsx b/app/routes/_landing.products._index/product-filters.tsx\nindex f269eb2..7fe5299 100644\n--- a/app/routes/_landing.products._index/product-filters.tsx\n+++ b/app/routes/_landing.products._index/product-filters.tsx\n@@ -8,7 +8,6 @@ interface ProductFiltersProps {\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@@ -26,11 +25,9 @@ export function ProductFilters({ isPageLoading }: ProductFiltersProps) {\n \t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n \t\t\t\t\t\t\t\t\tid={category.id}\n \t\t\t\t\t\t\t\t\tdisabled={isPageLoading}\n-\t\t\t\t\t\t\t\t\t// 🐨 let's apply the default checked if the url includes the category\n-\t\t\t\t\t\t\t\t\tdefaultChecked={\n-\t\t\t\t\t\t\t\t\t\t// 💰 searchParams has a getAll method that returns an array of values\n-\t\t\t\t\t\t\t\t\t\tundefined\n-\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\tdefaultChecked={searchParams\n+\t\t\t\t\t\t\t\t\t\t.getAll('category')\n+\t\t\t\t\t\t\t\t\t\t.includes(category.name)}\n \t\t\t\t\t\t\t\t\tname=\"category\"\n \t\t\t\t\t\t\t\t\tvalue={category.name}\n \t\t\t\t\t\t\t\t/>\n@@ -56,11 +53,9 @@ export function ProductFilters({ isPageLoading }: ProductFiltersProps) {\n \t\t\t\t\t\t\t\t\tclassName=\"peer hidden\"\n \t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n \t\t\t\t\t\t\t\t\tid={brand.id}\n-\t\t\t\t\t\t\t\t\t// 🐨 let's apply the default checked if the url includes the category\n-\t\t\t\t\t\t\t\t\tdefaultChecked={\n-\t\t\t\t\t\t\t\t\t\t// 💰 searchParams has a getAll method that returns an array of values\n-\t\t\t\t\t\t\t\t\t\tundefined\n-\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\tdefaultChecked={searchParams\n+\t\t\t\t\t\t\t\t\t\t.getAll('brand')\n+\t\t\t\t\t\t\t\t\t\t.includes(brand.name)}\n \t\t\t\t\t\t\t\t\tdisabled={isPageLoading}\n \t\t\t\t\t\t\t\t\tname=\"brand\"\n \t\t\t\t\t\t\t\t\tvalue={brand.name}\ndiff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nindex be5f875..a1be296 100644\n--- a/app/routes/_landing.products._index/route.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -5,7 +5,6 @@ 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 {\n-\t// 💰 we need this to extract the filters!\n \textractProductFiltersFromSearchParams,\n \tgetProducts,\n } from '#app/domain/products.server.js'\n@@ -30,43 +29,31 @@ 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-\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+\tconst filters = extractProductFiltersFromSearchParams(searchParams)\n+\n+\tconst [{ products, pagination }, { categories }, { brands }] =\n+\t\tawait Promise.all([\n+\t\t\tgetProducts(filters),\n \t\t\tgetAllCategories(),\n \t\t\tgetAllBrands(),\n \t\t])\n \n \treturn {\n \t\tproducts,\n-\t\t// 🐨 Return the pagination object as well\n+\t\tpagination,\n \t\tcategories,\n \t\tbrands,\n \t}\n }\n \n export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n+\tconst [searchParams, setSearchParams] = useSearchParams()\n+\tconst navigation = useNavigation()\n+\tconst isPageLoading = navigation.state !== 'idle'\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-\t// 💣 The products are already filtered server-side, we can remove this!\n-\tconst filteredProducts = products\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+\n \treturn (\n \t\t

\n \t\t\t{/* Header */}\n@@ -78,11 +65,8 @@ 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{/** 🐨 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\t{loaderData.pagination.totalCount} products total (\n+\t\t\t\t\t\t\t\t{products.length} shown)\n \t\t\t\t\t\t\t

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

\n@@ -97,7 +81,6 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t\t\t\t\tname=\"perPage\"\n \t\t\t\t\t\t\t\tonChange={(e) =>\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@@ -114,12 +97,16 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\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\tname=\"sortBy\"\n+\t\t\t\t\t\t\t\tonChange={(e) =>\n+\t\t\t\t\t\t\t\t\tsetSearchParams((prev) => {\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('sortBy', e.target.value)\n+\t\t\t\t\t\t\t\t\t\tnewParams.delete('page') // Reset page when changing sort\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('sortBy') || 'name'}\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@@ -152,7 +139,6 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \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@@ -160,21 +146,19 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\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{products.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-\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+\n+\t\t\t\t\t\t{products.length === 0 && (\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\t"]

app/domain/products.server.ts-63+55App 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-29+24App 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-108+92App 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-63+55App 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-29+24App 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-108+92App 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