P14:[{"_341":51,"_342":45,"_343":344},"app1","app2","diffPatch","diff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nindex 158e333..f9bed39 100644\n--- a/app/routes/_landing.products._index/route.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -51,18 +51,14 @@ export const loader = async ({ request }: Route.LoaderArgs) => {\n export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \tconst [searchParams, setSearchParams] = useSearchParams()\n \tconst navigation = useNavigation()\n-\t// 🐨 use the useInfiniteProductFetcher returned properties to fetch infinite data\n \tconst { loadMoreProducts, allProducts, hasMore, isLoadingMore } =\n \t\tuseInfiniteProductFetcher(loaderData)\n \tconst isPageLoading = navigation.state !== 'idle'\n-\t// 💣 We won't be needing this when we finish pagination\n-\tconst { products } = loaderData\n \tconst [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n \tconst [showFilters, setShowFilters] = useState(false)\n \tconst observerRef = useRef(null)\n-\t// 🐨 use the useIntersectionObserver to call a load of more products when end of screen is reached\n-\t// 💰 pass in loadMoreProducts instead of the arrow function\n-\tuseIntersectionObserver(observerRef, () => {})\n+\tuseIntersectionObserver(observerRef, loadMoreProducts)\n+\n \treturn (\n \t\t

\n \t\t\t{/* Header */}\n@@ -75,8 +71,7 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\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{loaderData.pagination.totalCount} products total (\n-\t\t\t\t\t\t\t\t{/** 🐨 use the allProducts variable instead of products to show the number of allProducts */}\n-\t\t\t\t\t\t\t\t{products.length} shown)\n+\t\t\t\t\t\t\t\t{allProducts.length} shown)\n \t\t\t\t\t\t\t

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

\n@@ -154,9 +149,7 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \n \t\t\t\t\t{/* Products Grid/List */}\n \t\t\t\t\t

\n-\t\t\t\t\t\t{/** 🐨 we should show a loading UI when needed */}\n-\t\t\t\t\t\t{/** 💰 use isPageLoading */}\n-\t\t\t\t\t\t{false ? (\n+\t\t\t\t\t\t{isPageLoading ? (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\tLoading...\n \t\t\t\t\t\t\t

\n@@ -169,8 +162,7 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t\t\t\t\t\t\t\t: 'space-y-6'\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\t\t{/** 🐨 we should use allProducts instead of products to show all fetched products */}\n-\t\t\t\t\t\t\t\t\t{products.map((product) => (\n+\t\t\t\t\t\t\t\t\t{allProducts.map((product) => (\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@@ -197,8 +189,8 @@ 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)}\n-\t\t\t\t\t\t{/** 🐨 we should use allProducts instead of products to show no products found */}\n-\t\t\t\t\t\t{products.length === 0 && (\n+\n+\t\t\t\t\t\t{allProducts.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\ndiff --git a/app/routes/_landing.products._index/use-infinite-product-fetcher.ts b/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\nindex 4b9c961..29c7d8b 100644\n--- a/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\n+++ b/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\n@@ -1,19 +1,13 @@\n import { useState, useEffect, useCallback } from 'react'\n import { useFetcher, useSearchParams, href } from 'react-router'\n-// 💰 use this to type the route\n import { type Route } from './+types/route'\n \n export function useInfiniteProductFetcher(\n-\t// 🐨 we want to type the loader data to be the type of the returned loader data of the products listing page\n-\t// 💰 Route.ComponentProps['loaderData']\n-\tloaderData: any,\n+\tloaderData: Route.ComponentProps['loaderData'],\n ) {\n-\t// 💰 we are fetching from the same loader, so we can type this fetcher with the same type as loader-data\n-\tconst fetcher = useFetcher({\n-\t\t// 🐨 Let's define a fetcher key for this fetch\n-\t\t// 💰 key should be infinite-product-fetcher\n+\tconst fetcher = useFetcher({\n+\t\tkey: 'infinite-product-fetcher',\n \t})\n-\t// 💰 we are extracting the initial data we fetched and then we will load more from the server\n \tconst { products, pagination } = loaderData\n \tconst [allProducts, setAllProducts] = useState(products)\n \tconst [currentPage, setCurrentPage] = useState(pagination.page)\n@@ -21,48 +15,35 @@ export function useInfiniteProductFetcher(\n \tconst [isLoadingMore, setIsLoadingMore] = useState(false)\n \tconst [searchParams] = useSearchParams()\n \tuseEffect(\n-\t\t// 🐨 whenever we change the filters we should start from the beginning again\n \t\tfunction resetStateOnLoaderRefire() {\n-\t\t\t// 💰 whenever we reset the URL and the loader returns new products, we want to reset the state to the initial values\n-\t\t\t// setAllProducts(products)\n-\t\t\t// setCurrentPage(pagination.page)\n-\t\t\t// setHasMore(pagination.hasMore)\n+\t\t\tsetAllProducts(products)\n+\t\t\tsetCurrentPage(pagination.page)\n+\t\t\tsetHasMore(pagination.hasMore)\n \t\t},\n \t\t[pagination.hasMore, pagination.page, products],\n \t)\n \n \tuseEffect(\n-\t\t// 🐨 whenever we load the new products we want to append them to the existing array\n \t\tfunction setNewlyLoadedProducts() {\n-\t\t\t// 💰 we want to make sure that the fetcher has returned some data and it's defined, and it is idle and we were loading more products\n-\t\t\tif (false) {\n-\t\t\t\t// 💰 we append the newly loaded products to the existing array\n-\t\t\t\t// setAllProducts((prev) => [...prev, ...(fetcher.data.? ??[])])\n-\t\t\t\t// 💰 we update the current page\n-\t\t\t\t// setCurrentPage(fetcher.data.?)\n-\t\t\t\t// 💰 we update the hasMore flag\n-\t\t\t\t// setHasMore(fetcher.data.?)\n-\t\t\t\t// 💰 we set isLoadingMore to false\n-\t\t\t\t// setIsLoadingMore(false)\n+\t\t\tif (fetcher.data && fetcher.state === 'idle' && isLoadingMore) {\n+\t\t\t\tsetAllProducts((prev) => [...prev, ...(fetcher.data?.products ?? [])])\n+\t\t\t\tsetCurrentPage(fetcher.data.pagination.page)\n+\t\t\t\tsetHasMore(fetcher.data.pagination.hasMore)\n+\t\t\t\tsetIsLoadingMore(false)\n \t\t\t}\n \t\t},\n \t\t[fetcher.data, fetcher.state, isLoadingMore],\n \t)\n \n \tconst loadMoreProducts = useCallback(() => {\n-\t\t// 🐨 we want to create the new search params so we can submit that to the loader so it gives us the next page of results\n-\t\t// 💰 we set the flag to true\n-\t\t// setIsLoadingMore(true)\n-\t\t// 💰 we use the current page to create the next page\n-\t\t// const nextPage = currentPage + 1\n-\t\t// 💰 Create URL params for the fetch\n-\t\t// const params = new URLSearchParams(searchParams)\n-\t\t// params.set('page', nextPage.toString())\n-\t\t// 🐨 finally we want to load the next page using the fetcher\n-\t\t// 💰 use the `load` function and call the /products page in a type-safe manner (href function) and append the search params\n-\t\t// 💰 + \"?\" + params.toString()\n-\t\t// 🐨 don't forget to remove this ignore hook, it's going to be invalid once you implement this!\n-\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n+\t\tsetIsLoadingMore(true)\n+\t\tconst nextPage = currentPage + 1\n+\n+\t\t// Create URL params for the fetch\n+\t\tconst params = new URLSearchParams(searchParams)\n+\t\tparams.set('page', nextPage.toString())\n+\n+\t\tvoid fetcher.load(href('/products') + '?' + params.toString())\n \t}, [currentPage, fetcher, searchParams])\n \n \treturn { fetcher, loadMoreProducts, allProducts, hasMore, isLoadingMore }"]

app/routes/_landing.products._index/route.tsx-51+43App 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/use-infinite-product-fetcher.ts-67+48App 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-51+43App 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/use-infinite-product-fetcher.ts-67+48App 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