exercise 4 done

Author: AlemTuzlak

exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx

@@ -1,5 +1,5 @@
 import { Filter, Grid, List } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useSearchParams, useNavigation } from 'react-router'
 import { ProductCard } from '#app/components/product-card.js'
 import { getAllBrands } from '#app/domain/brand.server.js'
@@ -8,13 +8,15 @@ import {
 	extractProductFiltersFromSearchParams,
 	getProducts,
 } from '#app/domain/products.server.js'
+import { useIntersectionObserver } from '#app/hooks/use-intersection-observer.js'
 import {
 	getMetaFromMatches,
 	getMetaTitle,
 	constructPrefixedTitle,
 } from '#app/utils/metadata.js'
 import { type Route } from './+types/route'
 import { ProductFilters } from './product-filters'
+import { useInfiniteProductFetcher } from './use-infinite-product-fetcher'
 
 export const meta: Route.MetaFunction = ({ matches }) => {
 	const rootMeta = getMetaFromMatches(matches, 'root')
@@ -49,11 +51,18 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
 export default function ProductsPage({ loaderData }: Route.ComponentProps) {
 	const [searchParams, setSearchParams] = useSearchParams()
 	const navigation = useNavigation()
+	// 🐨 use the useInfiniteProductFetcher returned properties to fetch infinite data
+	const { loadMoreProducts, allProducts, hasMore, isLoadingMore } =
+		useInfiniteProductFetcher(loaderData)
 	const isPageLoading = navigation.state !== 'idle'
+	// 💣 We won't be needing this when we finish pagination
 	const { products } = loaderData
 	const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
 	const [showFilters, setShowFilters] = useState(false)
-
+	const observerRef = useRef<HTMLDivElement>(null)
+	// 🐨 use the useIntersectionObserver to call a load of more products when end of screen is reached
+	// 💰 pass in loadMoreProducts instead of the arrow function
+	useIntersectionObserver(observerRef, () => {})
 	return (
 		<div className="min-h-screen bg-stone-50 dark:bg-gray-900">
 			{/* Header */}
@@ -66,6 +75,7 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<p className="mt-2 text-gray-600 dark:text-gray-300">
 								{loaderData.pagination.totalCount} products total (
+								{/** 🐨 use the allProducts variable instead of products to show the number of allProducts */}
 								{products.length} shown)
 							</p>
 						</div>
@@ -144,20 +154,50 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {
 
 					{/* Products Grid/List */}
 					<div className="flex-1">
-						{viewMode === 'grid' ? (
-							<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-								{products.map((product) => (
-									<ProductCard key={product.id} product={product} />
-								))}
+						{/** 🐨 we should show a loading UI when needed */}
+						{/** 💰 use isPageLoading */}
+						{false ? (
+							<div className="mb-4 text-center text-gray-500 dark:text-gray-400">
+								Loading...
 							</div>
 						) : (
-							<div className="space-y-6">
-								{products.map((product) => (
-									<ProductCard key={product.id} product={product} />
-								))}
-							</div>
-						)}
+							<>
+								<div
+									className={
+										viewMode === 'grid'
+											? 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3'
+											: 'space-y-6'
+									}
+								>
+									{/** 🐨 we should use allProducts instead of products to show all fetched products */}
+									{products.map((product) => (
+										<ProductCard key={product.id} product={product} />
+									))}
+								</div>
+
+								{/* Intersection observer target */}
+								{hasMore && (
+									<div ref={observerRef} className="mt-8 flex justify-center">
+										{isLoadingMore ? (
+											<div className="text-center text-gray-500 dark:text-gray-400">
+												<div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-amber-600 border-t-transparent"></div>
+												<p className="mt-2">Loading more products...</p>
+											</div>
+										) : (
+											<div className="h-4 w-full"></div>
+										)}
+									</div>
+								)}
 
+								{/* End of results message */}
+								{!hasMore && allProducts.length > 0 && (
+									<div className="mt-8 text-center text-gray-500 dark:text-gray-400">
+										<p>You've reached the end of the product list!</p>
+									</div>
+								)}
+							</>
+						)}
+						{/** 🐨 we should use allProducts instead of products to show no products found */}
 						{products.length === 0 && (
 							<div className="py-16 text-center">
 								<div className="mb-4 text-gray-400 dark:text-gray-600">

exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts

@@ -1,49 +1,70 @@
 import { useState, useEffect, useCallback } from "react"
 import { useFetcher, useSearchParams, href } from "react-router"
+// 💰 use this to type the route
 import { type Route } from "./+types/route"
 
 export function useInfiniteProductFetcher(
-  loaderData: Route.ComponentProps['loaderData'],
+  // 🐨 we want to type the loader data to be the type of the returned loader data of the products listing page
+  // 💰 Route.ComponentProps['loaderData']
+  loaderData: any,
 ) {
-  const fetcher = useFetcher<Route.ComponentProps['loaderData']>({
+  // 💰 we are fetching from the same loader, so we can type this fetcher with the same type as loader-data
+  const fetcher = useFetcher<any>({
     key: 'infinite-product-fetcher',
   })
+  // 💰 we are extracting the initial data we fetched and then we will load more from the server
   const { products, pagination } = loaderData
   const [allProducts, setAllProducts] = useState(products)
   const [currentPage, setCurrentPage] = useState(pagination.page)
   const [hasMore, setHasMore] = useState(pagination.hasMore)
   const [isLoadingMore, setIsLoadingMore] = useState(false)
   const [searchParams] = useSearchParams()
   useEffect(
+    // 🐨 whenever we change the filters we should start from the beginning again
     function resetStateOnLoaderRefire() {
-      //setAllProducts(products)
-      // setCurrentPage(pagination.page)
-      // setHasMore(pagination.hasMore)
+      // 💰 whenever we reset the URL and the loader returns new products, we want to reset the state to the initial values
+      // 💰 setAllProducts(products)
+      // 💰 setCurrentPage(pagination.page)
+      // 💰 setHasMore(pagination.hasMore)
+
     },
     [pagination.hasMore, pagination.page, products],
   )
 
   useEffect(
+
+    // 🐨 whenever we load the new products we want to append them to the existing array
     function setNewlyLoadedProducts() {
-      if (fetcher.data && fetcher.state === 'idle' && isLoadingMore) {
-        //setAllProducts((prev) => [...prev, ...(fetcher.data?.products ?? [])])
-        //  setCurrentPage(fetcher.data.pagination.page)
-        //setHasMore(fetcher.data.pagination.hasMore)
-        // setIsLoadingMore(false)
+      // 💰 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
+      if (false) {
+        // 💰 we append the newly loaded products to the existing array
+        // 💰 setAllProducts((prev) => [...prev, ...(fetcher.data.? ??[])])
+        // 💰 we update the current page
+        // 💰 setCurrentPage(fetcher.data.?)
+        // 💰 we update the hasMore flag
+        // 💰 setHasMore(fetcher.data.?)
+        // 💰 we set isLoadingMore to false
+        // 💰 setIsLoadingMore(false)
       }
     },
     [fetcher.data, fetcher.state, isLoadingMore],
   )
 
   const loadMoreProducts = useCallback(() => {
-    // setIsLoadingMore(true)
-    // const nextPage = currentPage + 1
+    // 🐨 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
+    // 💰 we set the flag to true
+    // 💰 setIsLoadingMore(true)
+    // 💰 we use the current page to create the next page
+    // 💰 const nextPage = currentPage + 1
+
+    // 💰 Create URL params for the fetch
+    // 💰 const params = new URLSearchParams(searchParams)
+    // 💰 params.set('page', nextPage.toString())
 
-    // Create URL params for the fetch
-    // const params = new URLSearchParams(searchParams)
-    // params.set('page', nextPage.toString())
+    // 🐨 finally we want to load the next page using the fetcher
+    // 💰 use the `load` function and call the /products page in a type-safe manner (href function) and append the search params
+    // 💰  + "?" + params.toString()
 
-    // void fetcher.load(href('/products') + '?' + params.toString())
   }, [currentPage, fetcher, searchParams])
 
   return { fetcher, loadMoreProducts, allProducts, hasMore, isLoadingMore }

exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers copy/tsconfig.json

@@ -1,20 +1,12 @@
-Well done! You have successfully added metadata to your routes using the `meta` export. 
-This allows you to set dynamic titles for each page in your application by merging 
-the parent route's metadata with the current route's metadata.
+## Infinite Scrolling with `useFetcher` hook
 
-You have also ensured that all titles have a consistent prefix, "Epic Shop -", which
-improves the branding and recognition of your application.
+One more exercise to go! You have done an amazing job so far.
 
-Another benefit of the approach we just implemented is that if you add a new route
-and you forget to add a title there, it will fallback to the closest parent route's title,
-which is a nice safety net to have.
+In this one we tackled infinite scrolling using the `useFetcher` hook provided by React Router.
+We learned how to load data without navigating away from the current page, and how to use an intersection observer
+to detect when the user has scrolled to the bottom of the page.
 
-Now that you fully understand the `meta` export and how to use it effectively, let's
-move onto the next module when you're ready!
-
-🧝‍♀️ I'm going to help you out for the next exercise, from what I understand it's all about
-data fetching and loaders, so I'm going to set up a database for you to use in the next exercise
-and also add some utilities to help you out with fetching data from the database! I hope
-this helps you out!
+Now all that is left to do for us it to fetch the data on the singular product page using loaders and we're done!
+ 
 
 You're doing great! 🚀