From 169ce23bede4e015ae1d452f2f92ce5a61efafcf Mon Sep 17 00:00:00 2001
From: isHardCoded <ishardcoded@gmail.com>
Date: Mon, 7 Jul 2025 23:06:01 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=20ProductList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/index.jsx | 59 ++++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/components/list/index.jsx b/src/components/list/index.jsx
index e6db08e..2e6c0cf 100644
--- a/src/components/list/index.jsx
+++ b/src/components/list/index.jsx
@@ -5,21 +5,66 @@ import ProductCard from '../card'
 
 const ProductList = () => {
 	const [products, setProducts] = React.useState([])
-
-	const getProducts = async () => {
-		const response = await fetch('http://localhost:8000/products')
-		const data = await response.json()
-		setProducts(data)
-	}
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
 
 	React.useEffect(() => {
+		let cancelled = false
+
+		const getProducts = async () => {
+			try {
+				setLoading(true)
+				setError(null)
+
+				const response = await fetch('http://localhost:8000/products')
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! status: ${response.status}`)
+				}
+
+				const data = await response.json()
+
+				if (!cancelled) {
+					setProducts(data)
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err.message)
+					setProducts([])
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false)
+				}
+			}
+		}
+
 		getProducts()
+
+		return () => {
+			cancelled = true
+		}
 	}, [])
 
+	if (loading) {
+		return <div className={styles.loading}>Загрузка продуктов...</div>
+	}
+
+	if (error) {
+		return (
+			<div className={styles.error}>
+				<p>Ошибка при загрузке продуктов: {error}</p>
+				<button onClick={() => window.location.reload()}>
+					Попробовать снова
+				</button>
+			</div>
+		)
+	}
+
 	return (
 		<ul className={styles.list}>
 			{products.map(product => (
-				<li>
+				<li key={product.id}>
 					<ProductCard {...product} />
 				</li>
 			))}