add in exercise 4

Author: AlemTuzlak

exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/README.mdx

@@ -1,12 +1,22 @@
-## Filtering, sorting and pagination
+## Infinite Scrolling with `useFetcher` hook
 
-Well done! You have successfully added filtering, sorting, and pagination to your product listing page.
-This allows your users to easily find and navigate through products based on their preferences.
+Now that we have everything in place, the lest step in improving our products listing page is to implement infinite scrolling.
+This will allow us to load more products as the user scrolls down the page, providing a seamless browsing experience.
 
-Now with that out of the way, you might've noticed that the pagination works, but it doesn't load more products!
-Let's fix that in the next exercise by using fetchers and infinite scrolling.
+### `useFetcher` hook
+The `useFetcher` hook from React Router is a powerful tool that allows you to perform data fetching and mutations without causing a full page navigation.
+When you call `useFetcher`, it returns an object that contains several properties and methods to help you manage data fetching. 
+One of the key properties is `load`, which is a function that you can call to fetch data from a specified URL.
 
-🧝‍♀️ I'm going to help you out for the next exercise, I'll create an intersection observer hook to let us listen
-to when the user scrolls to the bottom of the page so we can load more products automatically! The rest is up to you!
+By using the `load` method, you can fetch additional data (like more products) and update your component's state accordingly. We will explore this 
+hook further in upcoming workshops, but for now, it's important to understand that it allows us to fetch data without navigating away from the current page.
 
-You're doing great! 🚀
+You typically use this hook when you don't want to add an event to the browsers `history` stack, for example when implementing infinite scrolling.
+
+### Exercise Goals
+
+- Add infinite scrolling to the products listing page using the `useFetcher` hook.
+- Use an intersection observer to detect when the user has scrolled to the bottom of the page.
+- Fetch and append more products to the existing list as the user scrolls down.
+- Ensure that the infinite scrolling works seamlessly with the existing filtering, sorting, and pagination features.
+- Provide feedback to the user when new products are being loaded (e.g., a loading spinner).

exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/hooks/use-intersection-observer.ts

@@ -0,0 +1,28 @@
+import { useEffect } from "react"
+
+export const useIntersectionObserver = <T extends Element>(
+  ref: React.RefObject<T | null>,
+  onIntersect: () => void,
+  options?: IntersectionObserverInit,
+) => {
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          onIntersect()
+        }
+      })
+    }, options)
+
+    const currentRef = ref.current
+    if (currentRef) {
+      observer.observe(currentRef)
+    }
+
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef)
+      }
+    }
+  }, [ref, onIntersect, options])
+}

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

@@ -0,0 +1,50 @@
+import { useState, useEffect, useCallback } from "react"
+import { useFetcher, useSearchParams, href } from "react-router"
+import { type Route } from "./+types/route"
+
+export function useInfiniteProductFetcher(
+  loaderData: Route.ComponentProps['loaderData'],
+) {
+  const fetcher = useFetcher<Route.ComponentProps['loaderData']>({
+    key: 'infinite-product-fetcher',
+  })
+  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(
+    function resetStateOnLoaderRefire() {
+      //setAllProducts(products)
+      // setCurrentPage(pagination.page)
+      // setHasMore(pagination.hasMore)
+    },
+    [pagination.hasMore, pagination.page, products],
+  )
+
+  useEffect(
+    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)
+      }
+    },
+    [fetcher.data, fetcher.state, isLoadingMore],
+  )
+
+  const loadMoreProducts = useCallback(() => {
+    // setIsLoadingMore(true)
+    // const nextPage = currentPage + 1
+
+    // Create URL params for the fetch
+    // const params = new URLSearchParams(searchParams)
+    // params.set('page', nextPage.toString())
+
+    // void fetcher.load(href('/products') + '?' + params.toString())
+  }, [currentPage, fetcher, searchParams])
+
+  return { fetcher, loadMoreProducts, allProducts, hasMore, isLoadingMore }
+}

exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "exercises_03.data-fetching_03.solution.filtering-and-pagination copy",
+  "name": "exercises_03.data-fetching_04.problem.infinite-fetching-with-fetchers",
   "private": true,
   "type": "module",
   "imports": {

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

@@ -0,0 +1,20 @@
+{
+	"include": [
+		"../05.solution.product-variations/**/*",
+		"../05.solution.product-variations/**/.server/**/*",
+		"../05.solution.product-variations/**/.client/**/*",
+		"../05.solution.product-variations/.react-router/types/**/*"
+	],
+	"extends": ["@epic-web/config/typescript"],
+	"compilerOptions": {
+		"types": ["node", "vite/client"],
+		"rootDirs": [
+			"../05.solution.product-variations",
+			"../05.solution.product-variations/.react-router/types"
+		],
+		"paths": {
+			"#app/*": ["../05.solution.product-variations/app/*"]
+		},
+		"noUncheckedIndexedAccess": false
+	}
+}

exercises/03.data-fetching/04.solution.infinite-fetching-with-fetchers/app/domain/products.server.ts

@@ -89,7 +89,7 @@ function createProductWhereClause(filters?: ProductFilters): ProductWhereInput {
 
 export async function getProducts(filters?: ProductFilters) {
   const page = filters?.page ?? 1;
-  const limit = filters?.limit ?? 4; // Default to 9 products per page
+  const limit = filters?.limit ?? 4;
   const skip = (page - 1) * limit;
 
   const whereClause = createProductWhereClause(filters);