P14:[{"_335":65,"_336":63,"_337":338},"app1","app2","diffPatch","diff --git a/app/components/header.tsx b/app/components/header.tsx\nindex ee5c53f..74d95a6 100644\n--- a/app/components/header.tsx\n+++ b/app/components/header.tsx\n@@ -1,6 +1,6 @@\n import { ShoppingBag, Search, Menu, X } from 'lucide-react'\n import { useState } from 'react'\n-import { Link, useLocation } from 'react-router'\n+import { Link, useLocation, useSearchParams, Form } from 'react-router'\n \n export const Header = () => {\n \tconst [isMenuOpen, setIsMenuOpen] = useState(false)\n@@ -10,9 +10,13 @@ export const Header = () => {\n \t\t{ name: 'About', href: '/about' },\n \t\t{ name: 'Contact', href: '/contact' },\n \t]\n+\t// 🐨 Let's use these search params to set the default value on the input\n+\t// 💰 This is done so when there is no javascript the input is preserved between pages\n+\tconst [searchParams] = useSearchParams()\n \tconst location = useLocation()\n \tconst isActive = (href: string) => location.pathname === href\n-\n+\t// 🐨 Get the \"q\" search Param here or leave it as an empty string if not defined\n+\tconst q = ''\n \treturn (\n \t\t

\n \t\t\t

\n@@ -28,12 +32,38 @@ export const Header = () => {\n \n \t\t\t\t\t\n \ndiff --git a/app/domain/products.server.ts b/app/domain/products.server.ts\nindex ce7fd33..eb9e2c4 100644\n--- a/app/domain/products.server.ts\n+++ b/app/domain/products.server.ts\n@@ -1,5 +1,12 @@\n import { db } from '#app/db.server.js'\n-import { type ProductSelect } from '#app/generated/prisma/models.ts'\n+import {\n+\ttype ProductWhereInput,\n+\ttype ProductSelect,\n+} from '#app/generated/prisma/models.ts'\n+\n+interface ProductFilters {\n+\tsearch?: string\n+}\n \n const productShortInfoSelect = {\n \tid: true,\n@@ -21,11 +28,29 @@ const productShortInfoSelect = {\n \t},\n } as const satisfies ProductSelect\n \n-export async function getProducts({ perPage }: { perPage?: number }) {\n-\t// Get products with pagination\n+function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {\n+\t// 💰 We use an OR where we search either the name or description for the search term\n+\treturn {\n+\t\tOR: filters?.search\n+\t\t\t? [\n+\t\t\t\t\t{ name: filters.search ? { contains: filters.search } : undefined },\n+\t\t\t\t\t{\n+\t\t\t\t\t\tdescription: filters.search\n+\t\t\t\t\t\t\t? { contains: filters.search }\n+\t\t\t\t\t\t\t: undefined,\n+\t\t\t\t\t},\n+\t\t\t\t]\n+\t\t\t: undefined,\n+\t}\n+}\n+\n+export async function getProducts(filters?: ProductFilters) {\n+\t// 🐨 Let's create the where clause using the filters passed in\n+\tconst whereClause = createProductWhereClause()\n \tconst products = await db.product.findMany({\n \t\tselect: productShortInfoSelect,\n-\t\t...(perPage ? { take: perPage } : {}),\n+\t\t// 🐨 Let's pass in the where clause to filter our products here\n+\t\twhere: undefined,\n \t})\n \n \treturn {\ndiff --git a/app/routes/_landing._index/featured-products.section.tsx b/app/routes/_landing._index/featured-products.section.tsx\nindex b86dd99..7cd6655 100644\n--- a/app/routes/_landing._index/featured-products.section.tsx\n+++ b/app/routes/_landing._index/featured-products.section.tsx\n@@ -24,7 +24,6 @@ export const FeaturedProductsSection = ({\n \n \t\t\t\t

\n \t\t\t\t\t{products.map((product) => (\n-\t\t\t\t\t\t// 🐨 Replace this with the ProductCard component that 🧝‍♀️ prepared!\n \t\t\t\t\t\t\n \t\t\t\t\t))}\n \t\t\t\t

\ndiff --git a/app/routes/_landing._index/route.tsx b/app/routes/_landing._index/route.tsx\nindex f1ad37d..eabbbfb 100644\n--- a/app/routes/_landing._index/route.tsx\n+++ b/app/routes/_landing._index/route.tsx\n@@ -1,5 +1,5 @@\n-import { getAllCategories } from '#app/domain/category.server.ts'\n-import { getProducts } from '#app/domain/products.server.ts'\n+import { getAllCategories } from '#app/domain/category.server.js'\n+import { getProducts } from '#app/domain/products.server.js'\n import { getMetaFromMatches, getMetaTitle } from '#app/utils/metadata.js'\n import { type Route } from './+types/route'\n import { CategoriesSection } from './categories-section'\n@@ -16,16 +16,13 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \n export const loader = async () => {\n \tconst [{ products }, { categories }] = await Promise.all([\n-\t\tgetProducts({ perPage: 3 }),\n+\t\tgetProducts(),\n \t\tgetAllCategories({ perPage: 4 }),\n \t])\n \n \treturn { products, categories }\n }\n \n-// 🐨 Let's access the data we have sent from the server and use it in the components\n-// 💰 You can access the data directly from the loader as a prop of the component\n-// 💰 Try using `loaderData` to access the data\n export default function HomePage({ loaderData }: Route.ComponentProps) {\n \treturn (\n \t\t

\ndiff --git a/app/routes/_landing.products.$productId.tsx b/app/routes/_landing.products.$productId.tsx\nindex 74dc280..b4f3913 100644\n--- a/app/routes/_landing.products.$productId.tsx\n+++ b/app/routes/_landing.products.$productId.tsx\n@@ -36,7 +36,7 @@ export const loader = async ({ params }: Route.LoaderArgs) => {\n \tconst { productId } = params\n \tconst product = await getProductById(productId)\n \tconst relatedProducts = await getRelatedProducts(\n-\t\tproduct?.id,\n+\t\tproductId,\n \t\tproduct?.category.id,\n \t\tproduct?.brand.id,\n \t)\ndiff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nindex b520d01..b307e3f 100644\n--- a/app/routes/_landing.products._index/route.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -1,9 +1,9 @@\n import { Filter, Grid, List } from 'lucide-react'\n import { useState } from 'react'\n import { ProductCard } from '#app/components/product-card.js'\n-import { getAllBrands } from '#app/domain/brand.server.ts'\n-import { getAllCategories } from '#app/domain/category.server.ts'\n-import { getProducts } from '#app/domain/products.server.ts'\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 \tgetMetaFromMatches,\n \tgetMetaTitle,\n@@ -20,9 +20,18 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \t\t},\n \t]\n }\n-\n-export const loader = async ({}: Route.LoaderArgs) => {\n+// 🐨 Update the loader to accept a search parameter and pass it to getProducts\n+export const loader = async ({ request }: Route.LoaderArgs) => {\n+\t// 🐨 Get the search parameter from the URL\n+\t// 💰 You can use the URL constructor to parse the request URL in loaders\n+\tconst url = new URL(request.url)\n+\t// 🐨 Get the searchParameters from the URL\n+\t// 💰 The URL class has a searchParams property that returns a URLSearchParams object\n+\tconst searchParams = undefined\n+\t// 🐨 Get the 'q' parameter from the search parameters\n+\tconst search = undefined\n \tconst [{ products }, { categories }, { brands }] = await Promise.all([\n+\t\t// 🐨 Pass the search into getProducts\n \t\tgetProducts({}),\n \t\tgetAllCategories(),\n \t\tgetAllBrands(),\ndiff --git a/data/products.ts b/data/products.ts\ndeleted file mode 100644\nindex 91a2747..0000000\n--- a/data/products.ts\n+++ /dev/null\n@@ -1,73 +0,0 @@\n-import { type getProductById } from '#app/domain/products.server.ts'\n-\n-export const products: NonNullable<\n-\tAwaited>\n->[] = [\n-\t{\n-\t\tid: '1',\n-\t\tname: 'Air Max Revolution',\n-\t\tprice: 129.99,\n-\t\timageUrl:\n-\t\t\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: {\n-\t\t\tid: '1',\n-\t\t\tname: 'SkyStep',\n-\t\t},\n-\n-\t\tcategory: {\n-\t\t\tid: '1',\n-\t\t\tname: 'Running',\n-\t\t},\n-\t\tvariations: [],\n-\t\tdescription:\n-\t\t\t'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',\n-\n-\t\treviewScore: 4.8,\n-\t\treviews: [],\n-\t},\n-\t{\n-\t\tid: '2',\n-\t\tname: 'Air Max Revolution',\n-\t\tprice: 129.99,\n-\t\timageUrl:\n-\t\t\t'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600',\n-\t\tbrand: {\n-\t\t\tid: '1',\n-\t\t\tname: 'SkyStep',\n-\t\t},\n-\n-\t\tcategory: {\n-\t\t\tid: '1',\n-\t\t\tname: 'Running',\n-\t\t},\n-\t\tvariations: [],\n-\t\tdescription:\n-\t\t\t'Revolutionary running shoes with advanced air cushioning technology for maximum comfort and performance.',\n-\n-\t\treviewScore: 4.8,\n-\t\treviews: [],\n-\t},\n-]\n-\n-export const categories = [\n-\t'All',\n-\t'Running',\n-\t'Casual',\n-\t'Athletic',\n-\t'Lifestyle',\n-\t'Hiking',\n-\t'Comfort',\n-\t'Formal',\n-]\n-\n-export const brands = [\n-\t'All',\n-\t'SkyStep',\n-\t'StreetWalk',\n-\t'ProAthlete',\n-\t'TimelessStep',\n-\t'OutdoorPro',\n-\t'VelocityRun',\n-\t'SoftStep',\n-\t'ExecutiveWear',\n-]"]

app/components/header.tsx-33+64App 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-16+41App 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._index/featured-products.section.tsx-7+6App 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._index/route.tsx-21+18App 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.$productId.tsx-7+7App 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-18+27App 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

data/products.ts-73+0App 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/components/header.tsx-33+64App 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-16+41App 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._index/featured-products.section.tsx-7+6App 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._index/route.tsx-21+18App 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.$productId.tsx-7+7App 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-18+27App 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

data/products.ts-73+0App 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

App 1
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

App 1
App 2