Что доделали по уроку

package.json

@@ -11,11 +11,11 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"json-server": "^1.0.0-beta.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.7.1"
+		"react-router-dom": "^7.15.1",
+		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.25.0",
@@ -26,7 +26,6 @@
 		"eslint-plugin-react-hooks": "^5.2.0",
 		"eslint-plugin-react-refresh": "^0.4.19",
 		"globals": "^16.0.0",
-		"sass-embedded": "^1.100.0",
 		"vite": "^6.3.5"
 	}
 }

src/components/OrderDetail.jsx

@@ -1,30 +0,0 @@
-import styles from './OrderDetail.module.scss'
-
-const OrderDetail = () => {
-	return (
-		<div className={styles.detail}>
-			<h2>Order Summary</h2>
-			<div className={styles.stats}>
-				<div>
-					<p>Subtotal</p>
-					<span>$565</span>
-				</div>
-				<div>
-					<p>Discount (-20%)</p>
-					<span>-$113</span>
-				</div>
-				<div>
-					<p>Delivery Fee</p>
-					<span>$15</span>
-				</div>
-			</div>
-			<div className={styles.total}>
-				<p>Total</p>
-				<span>$467</span>
-			</div>
-			<button>Go to Checkout</button>
-		</div>
-	)
-}
-
-export default OrderDetail

src/components/OrderDetail.module.scss

@@ -1,67 +0,0 @@
-@use '../assets/styles/variables' as *;
-
-.detail {
-	border: 1px solid gainsboro;
-	border-radius: 20px;
-
-	flex-basis: 50%;
-	margin-top: 24px;
-	padding: 20px;
-
-	display: flex;
-	flex-direction: column;
-
-	.stats {
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-		margin-top: 24px;
-		padding-bottom: 20px;
-
-		border-bottom: 1px solid gainsboro;
-		div {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			p {
-				color: gray;
-				font-size: 20px;
-			}
-
-			span {
-				font-size: 20px;
-				font-weight: bold;
-			}
-		}
-	}
-
-	.total {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		p {
-			color: gray;
-			font-size: 20px;
-		}
-
-		span {
-			font-size: 20px;
-			font-weight: bold;
-			margin-top: 20px;
-		}
-	}
-
-	button {
-		outline: 0;
-		border: 0;
-		font-size: 16px;
-		padding: 20px;
-		border-radius: 62px;
-		background-color: $primary-color;
-		color: $white-color;
-		cursor: pointer;
-		margin-top: 24px;
-	}
-}

src/components/card/cart/index.jsx

@@ -1,29 +0,0 @@
-import styles from './index.module.scss'
-import JacketImage from '../../../assets/images/products/jacket.svg'
-import TrashIcon from '../../../assets/icons/trash.svg'
-
-const CartItem = () => {
-	return (
-		<div className={styles.item}>
-			<button className={styles.trash}>
-				<img src={TrashIcon} alt='' />
-			</button>
-			<div className={styles.image}>
-				<img src={JacketImage} alt='' />
-			</div>
-			<div className={styles.content}>
-				<h2>Quilted Satin Jacket</h2>
-				<div className={styles.wrapper}>
-					<span className={styles.price}>$145</span>
-					<div className={styles.buttons}>
-						<button>-</button>
-						<span>1</span>
-						<button>+</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default CartItem

src/components/card/cart/index.module.scss

@@ -1,62 +0,0 @@
-.item {
-	border-bottom: 1px solid #dcdcdc;
-	padding: 24px 0;
-	position: relative;
-
-	.trash {
-		outline: 0;
-		border: 0;
-		background-color: white;
-		position: absolute;
-
-		top: 20px;
-		right: 20px;
-
-		cursor: pointer;
-	}
-
-	.image {
-		background-color: #f5f5f5;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 35px;
-		height: 124px;
-		width: 124px;
-
-		img {
-			width: 90px;
-			object-fit: contain;
-		}
-	}
-
-	.wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		.price {
-			font-size: 24px;
-		}
-
-		.buttons {
-			display: flex;
-			background-color: #f0f0f0;
-			padding: 12px 20px;
-			gap: 20px;
-			border-radius: 62px;
-			align-items: center;
-
-			span {
-				font-size: 14px;
-			}
-
-			button {
-				outline: 0;
-				border: 0;
-				font-size: 16px;
-				cursor: pointer;
-			}
-		}
-	}
-}

src/components/card/index.jsx

@@ -1,9 +1,11 @@
 import styles from './index.module.scss'
 
-import WishIcon from '../../../assets/icons/wish.svg'
+import WishIcon from '../../assets/icons/wish.svg'
+import { Link } from 'react-router-dom'
 
-const ProductCard = ({ name, price, imageUrl }) => {
+const ProductCard = ({ id, name, price, imageUrl }) => {
 	return (
+        
 		<div className={styles.product}>
 			<div className={styles.image}>
 				<img src={imageUrl} alt='' />
@@ -14,7 +16,9 @@ const ProductCard = ({ name, price, imageUrl }) => {
 				</div>
 			</div>
 			<div className={styles.content}>
-				<h4>{name}</h4>
+				<Link to={{ pathname: `/catalog/${id}` }} state={ name, price}>
+				    <h4>{name}</h4>
+				</Link>
 				<div className={styles.stats}>
 					<span>${price}</span>
 				</div>

src/components/card/index.module.scss

@@ -1,4 +1,4 @@
-@use '../../../assets/styles/variables' as *;
+@use '../../assets/styles/variables' as *;
 
 .product {
 	display: flex;

src/components/header/index.jsx

@@ -4,7 +4,7 @@ import CartIcon from '../../assets/icons/cart.svg'
 import UserIcon from '../../assets/icons/user.svg'
 import WishlistIcon from '../../assets/icons/wishlist.svg'
 import LoopIcon from '../../assets/icons/loop.svg'
-import { Link } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 
 const Header = () => {
 	return (
@@ -13,16 +13,22 @@ const Header = () => {
 			<nav>
 				<ul>
 					<li>
-						<Link to={{ pathname: '/' }}>Home</Link>
+						<NavLink to={{ pathname: '/' }}
+						    className={ ({ isActive }) => (isActive ? styles.active : '')}>
+						    Главная
+						</NavLink>
 					</li>
 					<li>
-						<Link to={{ pathname: '/contact' }}>Contact</Link>
+						<Link to={{ pathname: '/contact' }}>Контакты</Link>
 					</li>
 					<li>
-						<Link to={{ pathname: '/about' }}>About</Link>
+						<NavLink to={{ pathname: '/about' }}
+                        className={ ({ isActive }) => (isActive ? styles.active : '')}>
+						    О нас
+				        </NavLink>
 					</li>
 					<li>
-						<a href='#'>Sign Up</a>
+						<Link to={{ pathname: '/login' }}>Sign Up</Link>
 					</li>
 				</ul>
 			</nav>
@@ -37,12 +43,16 @@ const Header = () => {
 					</Link>
 				</button>
 				<button>
-					<Link to={{ pathname: '/cart' }}>
+					<NavLink to={{ pathname: '/cart', search: '?category=electronic', state: {id: 44} }}
+					    className={ ({ isActive }) => (isActive ? styles.active : '')}>
 						<img src={CartIcon} alt='' />
-					</Link>
+					</NavLink>
 				</button>
 				<button>
-					<img src={UserIcon} alt='' />
+				    <NavLink to={{ pathname: '/profile/111' }}
+                        className={ ({ isActive }) => (isActive ? styles.active : '')}>
+				        <img src={UserIcon} alt='' />
+				    </NavLink>
 				</button>
 			</div>
 		</header>

src/components/header/index.module.scss

@@ -53,3 +53,6 @@
 		}
 	}
 }
+    .active {
+        border-bottom: 1px solid red;
+    }

src/components/list/cart/index.jsx

@@ -1,20 +0,0 @@
-import CartItem from '../../card/cart'
-import styles from './index.module.scss'
-
-const CartList = () => {
-	return (
-		<ul className={styles.list}>
-			<li>
-				<CartItem />
-			</li>
-			<li>
-				<CartItem />
-			</li>
-			<li>
-				<CartItem />
-			</li>
-		</ul>
-	)
-}
-
-export default CartList

src/components/list/cart/index.module.scss

@@ -1,13 +0,0 @@
-.list {
-	display: flex;
-	border: 1px solid gainsboro;
-	border-radius: 20px;
-	padding: 20px;
-	margin-top: 24px;
-	list-style: none;
-
-	max-width: 715px;
-	flex-direction: column;
-
-	flex-basis: 80%;
-}

src/components/list/index.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import styles from './index.module.scss'
+
+import ProductCard from '../card'
+
+const ProductList = () => {
+	const [products, setProducts] = React.useState([])
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
+    console.log("rendred");
+    
+	React.useEffect(() => {
+		let cancelled = false
+        console.log("useEffect");
+		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 key={product.id}>
+					<ProductCard {...product} />
+				</li>
+			))}
+		</ul>
+	)
+}
+
+export default ProductList

src/components/list/product/index.jsx

@@ -1,34 +0,0 @@
-import styles from './index.module.scss'
-import ProductCard from '../../card/product'
-import { useProducts } from '../../../hooks/useProducts'
-
-const ProductList = () => {
-	const { products, loading, error } = useProducts()
-
-	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 key={product.id}>
-					<ProductCard {...product} />
-				</li>
-			))}
-		</ul>
-	)
-}
-
-export default ProductList

src/main.jsx

@@ -3,18 +3,27 @@ import {
 	BrowserRouter as Router,
 	Routes,
 	Route,
-	Navigate,
+	Navigate, // 1. Импортируем компонент для редиректа
 } from 'react-router-dom'
 
 import Catalog from './pages/catalog'
 import Cart from './pages/cart'
+import About from './pages/about'
+import Login from './pages/login'
+import UserProfile from './pages/profile'
+import Item from './pages/item'
 
 createRoot(document.getElementById('root')).render(
 	<Router>
 		<Routes>
+			{/* 2. Добавляем редирект с корневого пути */}
 			<Route path='/' element={<Navigate to='/catalog' replace />} />
 			<Route path='/catalog' element={<Catalog />} />
+			<Route path='/catalog/:id' element={<Item />} />
 			<Route path='/cart' element={<Cart />} />
+			<Route path='/about' element={<About />} />
+			<Route path='/login' element={<Login />} />
+			<Route path='/profile/:id' element={<UserProfile name='Alex' />} />
 		</Routes>
 	</Router>
 )

src/pages/about/index.jsx

@@ -0,0 +1,13 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+
+const About = () => {
+	return (
+        <div className={styles.container}>
+			<Header />
+        </div>
+    )
+}
+
+export default About

src/pages/about/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}

src/pages/cart/index.jsx

@@ -1,20 +1,13 @@
 import styles from './index.module.scss'
 
-import Header from '../../components/header'
+import Header from '../../components/header/index'
-import CartList from '../../components/list/cart'
-import OrderDetail from '../../components/OrderDetail'
 
 const Cart = () => {
 	return (
-		<div className={styles.container}>
+        <div className={styles.container}>
 			<Header />
-			<h1 style={{ marginTop: 24 }}>Your Cart</h1>
+        </div>
-			<div style={{ display: 'flex', gap: 20 }}>
+    )
-				<CartList />
-				<OrderDetail />
-			</div>
-		</div>
-	)
 }
 
 export default Cart

src/pages/cart/index.module.scss

@@ -1,4 +1,4 @@
 .container {
 	max-width: 1170px;
 	margin: 0 auto;
-}
+}

src/pages/catalog/index.jsx

@@ -1,7 +1,7 @@
 import styles from './index.module.scss'
 
 import Header from '../../components/header/index'
-import ProductList from '../../components/list/product/index'
+import ProductList from '../../components/list/index'
 
 const Catalog = () => {
 	return (

src/pages/item/index.jsx

@@ -0,0 +1,12 @@
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+
+const Product = ({ name, price }) => {
+    const { id } = useParams();
+    return ( 
+        <>
+            <h2>Товар {id}. {name} по цене {price   }</h2>
+        </>
+    )
+}
+export default Product

src/pages/login/index.jsx

@@ -0,0 +1,22 @@
+import styles from './index.module.scss'
+import { useNavigate } from 'react-router-dom'
+
+const Login = () => {
+    const navigate = useNavigate();
+    
+    const handleSubmit = formData => {
+        //Какая то логика проверки авторизации
+        navigate('/catalog')
+    }
+    
+    return (
+        <>
+            <h2>Страница авторизации</h2>
+        <form onSubmit={handleSubmit}>
+            <button type="submit">Войти</button>
+        </form>
+        </>
+    )
+}
+
+export default Login

src/pages/profile/index.jsx

@@ -0,0 +1,15 @@
+import styles from './index.module.scss'
+import Header from '../../components/header/index'
+import { useParams } from 'react-router-dom'
+
+
+const UserProfile = ({ name }) => {
+    const { id } = useParams();
+    return (
+        <div className={styles.container}>
+			<Header />
+           <h2>Профиль пользователя {id} {name}</h2>
+        </div>
+    )
+}
+export default UserProfile

src/pages/profile/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}