remove ex 5

Author: AlemTuzlak

exercises/03.data-fetching/01.problem.fetching-with-loaders/README.mdx

@@ -1,11 +1,11 @@
-## Data fetching with loaders
+# Data fetching with loaders
 
 Amazing work so far! Now is the time for us to dive deep into data fetching using
 loaders in React Router. Loaders are a powerful feature that allows us to fetch
 data before rendering a route, ensuring that our components have the data they need
 right from the start.
 
-### Loaders Overview
+## Loaders Overview
 
 Loaders are functions that run on the server (or during the build process in SPA mode) 
 before a route is rendered. (Keep this in mind if you want navigations to be instant)
@@ -32,7 +32,7 @@ which can significantly improve the performance of your application by reducing
 the number of requests made to your backend services, or improving the response of
 the loaders themselves, this is useful for data that doesn't change often.
 
-### Exercise Goals
+## Exercise Goals
 
 
 In this exercise, we will set up loaders for our routes to fetch product data from

exercises/03.data-fetching/01.solution.fetching-with-loaders/README.mdx

@@ -1,4 +1,4 @@
-## Data fetching with loaders
+# Data fetching with loaders
 
 Well done! You have successfully added loaders to multiple routes and you've learned
 how to optimize data fetching by parallelizing requests using `Promise.all`, how

exercises/03.data-fetching/02.problem.search-with-url/README.mdx

@@ -1,4 +1,4 @@
-## URL as the source of truth & Progressive enhancement
+# URL as the source of truth & Progressive enhancement
 
 One of the terms tied strongly with React Router is "Progressive Enhancement".
 Progressive enhancement is the idea of building web applications that work for
@@ -13,7 +13,7 @@ manage application state, we can use the URL to store and retrieve state informa
 This approach allows your users to have your website work without JavaScript,
 as the URL is always accessible, and servers can render pages based on the URL alone.
 
-### `Form` component
+## `Form` component
 
 If you've heard of React Router before, you might be familiar with their `Form` component.
 This is a wrapper around the native HTML `<form>` element that enhances its functionality
@@ -32,7 +32,7 @@ You can also change the method to `POST` if you want to submit the form data, th
 will submit the data to an `action` function defined on the route instead of the `loader`.
 
 
-### Exercise Goals
+## Exercise Goals
 
 
 In this exercise, we will implement a search functionality for our product listing

exercises/03.data-fetching/02.solution.search-with-url/README.mdx

@@ -1,4 +1,4 @@
-## URL as the source of truth & Progressive enhancement
+# URL as the source of truth & Progressive enhancement
 
 Well done! You have successfully  
 

exercises/03.data-fetching/03.problem.filtering-and-pagination/README.mdx

@@ -1,4 +1,4 @@
-## Filtering, sorting and pagination
+# Filtering, sorting and pagination
 
 Now that you have a working products listing page, it's time to enhance it with filtering, sorting, and pagination capabilities.
 In this exercise, you'll implement the following features:
@@ -10,7 +10,7 @@ We will be using the URL as the source of truth and we will learn how to do all
 We will rely on the web platform and HTML forms to manage the state of our filters, sorting, and pagination.
 We will also use the `useNavigation` hook to provide feedback to the user when the page is loading new data.
 
-### `useNavigation` hook
+## `useNavigation` hook
 
 The `useNavigation` hook from React Router provides information about the current navigation state of your application.
 This hook is particularly useful for providing feedback to users during navigation events, such as when a page is loading new data.
@@ -27,7 +27,7 @@ For example, you might display a loading spinner when the state is `"loading"` o
 This hook can also be used to show optimistic UI by accessing the `formData` property which is filled with the submitted data 
 during a form submission. This allows you to reflect the changes immediately in the UI before the server responds, enhancing the user experience.
 
-### Exercise Goals
+## Exercise Goals
 
 In this exercise, you will enhance the products listing page by implementing filtering, sorting, and pagination features.
 You will first use the prepared method for extracting all the search parameters from the URL and then apply those filters to the products listing.

exercises/03.data-fetching/03.solution.filtering-and-pagination/README.mdx

@@ -1,4 +1,4 @@
-## Filtering, sorting and pagination
+# Filtering, sorting and pagination
 
 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.

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

@@ -1,9 +1,9 @@
-## Infinite Scrolling with `useFetcher` hook
+# Infinite Scrolling with useFetcher hook
 
 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.
 
-### `useFetcher` hook
+## `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.
@@ -13,7 +13,7 @@ hook further in upcoming workshops, but for now, it's important to understand th
 
 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
+## 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.

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

@@ -9,12 +9,12 @@ import {
 	Minus,
 } from 'lucide-react'
 import { useState } from 'react'
-import { Link } from 'react-router'
+import { Link, useSearchParams } from 'react-router'
 import { ProductCard } from '#app/components/product-card.js'
 import {
 	getProductById,
 	getRelatedProducts,
-} from '#app/domain/products.server.ts'
+} from '#app/domain/products.server.js'
 import {
 	getMetaFromMatches,
 	getMetaTitle,
@@ -25,37 +25,79 @@ import { type Route } from './+types/_landing.products.$productId'
 export const meta: Route.MetaFunction = ({ matches }) => {
 	const rootMeta = getMetaFromMatches(matches, 'root')
 	const prefix = getMetaTitle(rootMeta)
+
 	return [
 		{
 			title: constructPrefixedTitle('Product overview', prefix),
 		},
 	]
 }
 
-export const loader = async ({ params }: Route.LoaderArgs) => {
+export const loader = async ({ params, request }: Route.LoaderArgs) => {
 	const { productId } = params
 	const product = await getProductById(productId)
 	const relatedProducts = await getRelatedProducts(
 		productId,
 		product?.category.id,
 		product?.brand.id,
 	)
+	const uniqueSizes = Array.from(
+		new Set(product?.variations.map((v) => v.size) || []),
+	)
+	const uniqueColors = Array.from(
+		new Set(product?.variations.map((v) => v.color) || []),
+	)
+
+	const url = new URL(request.url)
+	const searchParams = url.searchParams
+	// Get the selected size and color from the search params
+	const selectedSize = searchParams.get('size') || ''
+	const selectedColor = searchParams.get('color') || ''
+	// Determine available sizes for the currently selected color
+	const availableSizes = selectedColor
+		? product?.variations
+				.filter((v) => v.color === selectedColor && v.quantity > 0)
+				.map((v) => v.size) || []
+		: uniqueSizes
+	// Determine available colors for the currently selected size
+	const availableColors = selectedSize
+		? product?.variations
+				.filter((v) => v.size === selectedSize && v.quantity > 0)
+				.map((v) => v.color) || []
+		: uniqueColors
+
+	const selectedVariation = product?.variations.find(
+		(v) => v.size === selectedSize && v.color === selectedColor,
+	)
 
 	return {
 		product,
+		uniqueSizes,
+		uniqueColors,
+		availableSizes,
+		availableColors,
+		selectedVariation,
 		relatedProducts,
 	}
 }
 
 export default function ProductDetailPage({
 	loaderData,
 }: Route.ComponentProps) {
-	const { product, relatedProducts } = loaderData
-	const [selectedSize] = useState('')
-	const [selectedColor] = useState('')
+	const {
+		product,
+		selectedVariation,
+		uniqueColors,
+		uniqueSizes,
+		availableColors,
+		availableSizes,
+		relatedProducts,
+	} = loaderData
+	const [searchParams, setSearchParams] = useSearchParams()
 	const [quantity, setQuantity] = useState(1)
 	const [activeImage, setActiveImage] = useState(0)
-
+	const selectedSize = searchParams.get('size') || ''
+	const selectedColor = searchParams.get('color') || ''
 	if (!product) {
 		return (
 			<div className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-gray-900">
@@ -83,6 +125,53 @@ export default function ProductDetailPage({
 		alert('Added to cart!')
 	}
 
+	const handleSizeChange = (size: string) => () => {
+		setSearchParams((prev) => {
+			const newParams = new URLSearchParams(prev)
+			if (size === selectedSize) {
+				newParams.delete('size')
+			} else {
+				newParams.set('size', size)
+			}
+			const color = newParams.get('color')
+			// If the selected color is not available for the new size, remove it
+			const noQuantityForColor =
+				color &&
+				product.variations.some(
+					(v) => v.size === size && v.color === color && v.quantity === 0,
+				)
+
+			if (noQuantityForColor) {
+				newParams.delete('color')
+			}
+			return newParams
+		})
+		setQuantity(1)
+	}
+
+	const handleColorChange = (color: string) => () => {
+		setSearchParams((prev) => {
+			const newParams = new URLSearchParams(prev)
+			if (color === selectedColor) {
+				newParams.delete('color')
+			} else {
+				newParams.set('color', color)
+			}
+			const size = newParams.get('size')
+			// If the selected size is not available for the new color, remove it
+			const noQuantityForSize =
+				size &&
+				product.variations.some(
+					(v) => v.color === color && v.size === size && v.quantity === 0,
+				)
+			if (noQuantityForSize) {
+				newParams.delete('size')
+			}
+			return newParams
+		})
+		setQuantity(1)
+	}
+
 	// Mock additional images for gallery
 	const productImages = [
 		product.imageUrl,
@@ -179,19 +268,21 @@ export default function ProductDetailPage({
 								Size
 							</h3>
 							<div className="grid grid-cols-6 gap-3">
-								{/* {product.sizes.map((size) => (
+								{uniqueSizes.map((size) => (
 									<button
 										key={size}
-										onClick={() => setSelectedSize(size)}
-										className={`rounded-lg border px-4 py-3 text-center transition-colors duration-200 ${
+										disabled={!availableSizes.includes(size)}
+										title={!availableSizes.includes(size) ? 'Out of stock' : ''}
+										onClick={handleSizeChange(size)}
+										className={`rounded-lg border px-4 py-3 text-center transition-colors duration-200 disabled:opacity-20 ${
 											selectedSize === size
 												? 'border-amber-500 bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'
 												: 'border-gray-300 text-gray-700 hover:border-amber-300 dark:border-gray-600 dark:text-gray-300 dark:hover:border-amber-700'
 										}`}
 									>
 										{size}
 									</button>
-								))} */}
+								))}
 							</div>
 						</div>
 
@@ -200,53 +291,64 @@ export default function ProductDetailPage({
 							<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
 								Color
 							</h3>
-							<div className="flex space-x-3">
-								{/* {product.colors.map((color) => (
+							<div className="flex flex-wrap space-x-3">
+								{uniqueColors.map((color) => (
 									<button
 										key={color}
-										onClick={() => setSelectedColor(color)}
-										className={`rounded-lg border px-4 py-2 transition-colors duration-200 ${
+										disabled={!availableColors.includes(color)}
+										title={
+											!availableColors.includes(color) ? 'Out of stock' : ''
+										}
+										onClick={handleColorChange(color)}
+										className={`rounded-lg border px-4 py-2 transition-colors duration-200 disabled:opacity-20 ${
 											selectedColor === color
 												? 'border-amber-500 bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'
 												: 'border-gray-300 text-gray-700 hover:border-amber-300 dark:border-gray-600 dark:text-gray-300 dark:hover:border-amber-700'
 										}`}
 									>
 										{color}
 									</button>
-								))} */}
+								))}
 							</div>
 						</div>
 
 						{/* Quantity */}
-						<div>
-							<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
-								Quantity
-							</h3>
-							<div className="flex items-center space-x-4">
-								<div className="flex items-center rounded-lg border border-gray-300 dark:border-gray-600">
-									<button
-										onClick={() => setQuantity(Math.max(1, quantity - 1))}
-										className="p-2 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
-									>
-										<Minus className="h-4 w-4" />
-									</button>
-									<span className="px-4 py-2 font-medium text-gray-900 dark:text-white">
-										{quantity}
-									</span>
-									<button
-										onClick={() => setQuantity(quantity + 1)}
-										className="p-2 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700"
-									>
-										<Plus className="h-4 w-4" />
-									</button>
+						{selectedVariation ? (
+							<div>
+								<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+									Quantity
+								</h3>
+								<div className="flex items-center space-x-4">
+									<div className="flex items-center rounded-lg border border-gray-300 dark:border-gray-600">
+										<button
+											onClick={() => setQuantity(Math.max(1, quantity - 1))}
+											disabled={quantity === 1}
+											className="p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700"
+										>
+											<Minus className="h-4 w-4" />
+										</button>
+										<span className="px-4 py-2 font-medium text-gray-900 dark:text-white">
+											{quantity}
+										</span>
+										<button
+											onClick={() => setQuantity(quantity + 1)}
+											disabled={quantity === selectedVariation.quantity}
+											className="p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700"
+										>
+											<Plus className="h-4 w-4" />
+										</button>
+									</div>
 								</div>
 							</div>
-						</div>
+						) : null}
 
 						{/* Add to Cart */}
 						<div className="flex space-x-4">
 							<button
 								onClick={handleAddToCart}
+								disabled={
+									!selectedVariation || selectedVariation.quantity === 0
+								}
 								className="flex-1 rounded-lg bg-amber-600 px-6 py-4 font-medium text-white transition-colors duration-300 hover:bg-amber-700 hover:shadow-lg"
 							>
 								Add to Cart

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

@@ -1,4 +1,4 @@
-## Infinite Scrolling with `useFetcher` hook
+# Infinite Scrolling with useFetcher hook
 
 One more exercise to go! You have done an amazing job so far.
 
@@ -9,4 +9,4 @@ to detect when the user has scrolled to the bottom of the page.
 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! 🚀
+You're doing great! 🚀