feat: catalog-api

healthy-food-and-dietary-products · Nov 14, 2023 · db47be2 · db47be2
1 parent d150d52
commit db47be2
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 22 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -21,6 +21,17 @@ import PopupRegistration from '@components/popups/popup-registration';
 function App() {
 	const { isLoggedIn } = useAuth();
 
+	// useEffect(() => {
+	// 	api.productsList("?category=nuts-dried-fruits")
+	// 		.then((data) => {
+	// 			console.log(data)
+	// 		})
+	// 	api.categoriesList()
+	// 		.then((data) => {
+	// 			console.log(data)
+	// 		})
+	// }, [])
+
 	return (
 		<div className="app">
 			<Layout>
@@ -31,7 +42,7 @@ function App() {
 						path={URLS.PROFILE}
 						element={<ProtectedRoute element={Profile} loggedIn={isLoggedIn} />}
 					/>
-					<Route path="/catalog/:category/:subcategory/:id" element={<Product />} />
+					<Route path="/catalog/:category/:id" element={<Product />} />
 				</Routes>
 			</Layout>
 			<PopupLogin />

diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styles from './navigation.module.scss';
-import Button from '@components/Button';
 
 const Navigation: React.FC = () => {
 	return (
 		<nav className={styles.navigation}>
 			<ul className={styles.navigation__list}>
-				<Button buttonText="Каталог" buttonStyle="header-button"></Button>
+				<Link className={styles.navigation_catalog} to={'/catalog'}>
+					Каталог
+				</Link>
 				<Link className={`${styles.navigation__item}  `} to={''}>
 					О нас
 				</Link>

diff --git a/src/components/navigation/navigation.module.scss b/src/components/navigation/navigation.module.scss
@@ -15,6 +15,36 @@
 	align-items: center;
 }
 
+.navigation_catalog {
+	@extend %zero-padding-margin;
+
+	display: flex;
+	height: 51px;
+	width: 117px;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	color: #1a1a1a;
+	border-radius: 16px;
+	border: 1px solid var(--primary-700, #2b7a0f);
+	box-sizing: border-box;
+	text-decoration: none;
+	transition: 0.3s;
+
+	/* text */
+	font-family: $ubuntu-font;
+	font-size: 22px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 140%;
+
+	&:hover {
+		background: $accent-color-bright-green;
+		border: none;
+		color: white;
+	}
+}
+
 .navigation__item {
 	color: #1a1a1a;
 	text-align: center;

diff --git a/src/components/product-card/index.tsx b/src/components/product-card/index.tsx
@@ -13,10 +13,10 @@ type ProductCardProps = {
 
 const ProductCard = ({ cardName, price, weight, buttonText }: ProductCardProps) => {
 	return (
-		<li className={styles.card}>
+		<div className={styles.card}>
 			{/* вместо /login подставить нужный роут  */}
 			{/*Предполагается в будущем открывать страницу товара по пути id и категории*/}
-			<Link className={styles.card__link} to={`catalog/category/subcategory/id`}>
+			<Link className={styles.card__link} to={`category/id`}>
 				<img className={styles.card__image} src={cardImage} alt="карточка товара" />
 				<h2 className={styles.card__caption}>{cardName}</h2>
 			</Link>
@@ -27,7 +27,7 @@ const ProductCard = ({ cardName, price, weight, buttonText }: ProductCardProps)
 				<button className={styles['card__cart-button']}>{buttonText}</button>
 				<button className={styles['card__like-button']} />
 			</div>
-		</li>
+		</div>
 	);
 };
 

diff --git a/src/data/dataExamples.ts b/src/data/dataExamples.ts
@@ -4,12 +4,12 @@ export const mainPageBlockLinks = [
 	{
 		title: 'Овощи',
 		link: 'vegetables',
-		backgroundImage: '/4e039f6d2c33797f4fd913bd642549f0.jpeg',
+		backgroundImage: '/383bea75365411fd84f9c6c47e081cab.jpeg',
 	},
 	{
 		title: 'Фрукты',
 		link: 'fruits',
-		backgroundImage: '/5b5f8ca8a8f4f583ac88b6e80a646e10.jpeg',
+		backgroundImage: '/e8ab3ec81c9d3e4cc473a3d6ae86bc5a.jpeg',
 	},
 	{
 		title: 'Орехи',
@@ -19,12 +19,12 @@ export const mainPageBlockLinks = [
 	{
 		title: 'Молочные продукты',
 		link: 'diary',
-		backgroundImage: '/383bea75365411fd84f9c6c47e081cab.jpeg',
+		backgroundImage: '/5b5f8ca8a8f4f583ac88b6e80a646e10.jpeg',
 	},
 	{
 		title: 'Мясо и птица',
 		link: 'meat',
-		backgroundImage: '/e8ab3ec81c9d3e4cc473a3d6ae86bc5a.jpeg',
+		backgroundImage: '/4e039f6d2c33797f4fd913bd642549f0.jpeg',
 	},
 ];
 

diff --git a/src/hooks/use-form-and-validation.ts b/src/hooks/use-form-and-validation.ts
@@ -57,7 +57,6 @@ export function useFormAndValidation(): FormAndValidationHook {
 				}));
 			}
 		} else {
-			console.log('a');
 			setErrors({ ...errors, [name]: e.target.validationMessage });
 		}
 

diff --git a/src/pages/catalog/index.tsx b/src/pages/catalog/index.tsx
@@ -1,24 +1,38 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './catalog.module.scss';
 import SliderComponent from '@components/slider-component';
 import CardCatalogLink from '@components/card-catalog-link';
 import { products } from '@data/dataExamples';
+import api from '@services/api.ts';
+
+type Catalog = {
+	id: number;
+	name: string;
+};
 
 const Catalog: React.FC = () => {
+	const [catalogs, setCatalogs] = useState<Catalog[]>([]);
+
+	useEffect(() => {
+		api.categoriesList().then((data) => {
+			setCatalogs(data);
+		});
+	}, []);
 	return (
 		<>
 			<SliderComponent />
 			<section className={styles.catalogBlock}>
 				<div className={styles.catalog}>
 					<h1>Каталог товаров</h1>
 					<div className={styles.catalog__cardlist}>
-						<CardCatalogLink title="Овощи" type="single-row" array={products} />
-						<CardCatalogLink title="Фрукты" type="single-row" array={products} />
-						<CardCatalogLink
-							title="Молочные продукты"
-							type="single-row"
-							array={products}
-						/>
+						{catalogs.map((catalog) => (
+							<CardCatalogLink
+								key={catalog.id}
+								title={catalog.name}
+								type="single-row"
+								array={products}
+							/>
+						))}
 					</div>
 				</div>
 			</section>

diff --git a/src/services/api.ts b/src/services/api.ts
@@ -265,8 +265,8 @@ class Api {
 	}
 
 	/* ----------------------------- Products ----------------------------- */
-	productsList() {
-		return this._request('products/', {
+	productsList(slug: string) {
+		return this._request(`products${'/' + slug}`, {
 			method: 'GET',
 		});
 	}
@@ -313,6 +313,10 @@ class Api {
 	/* -------------------------- FavoriteProducts -------------------------- */
 	favoriteProductsList() {
 		return this._request('favorite-products/', {
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 			method: 'GET',
 		});
 	}
@@ -358,7 +362,11 @@ class Api {
 
 	/* ----------------------------- Categories ----------------------------- */
 	categoriesList() {
-		return this._request('categories/', {
+		return this._request('categories', {
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Token ${Cookies.get('token')}`,
+			},
 			method: 'GET',
 		});
 	}