([]);
+ const [numberToShow, setNumberToShow] = useState(6);
+ const { isMobileScreen } = useProfile();
+
+ const findNumbersToShow = useCallback(() => {
+ if (isMobileScreen) {
+ setNumberToShow(6);
+ return;
+ }
+
+ setNumberToShow(5);
+ }, [isMobileScreen]);
+
+ useEffect(() => {
+ findNumbersToShow();
+ }, [findNumbersToShow, isMobileScreen]);
+
+ const handleCategoryToggle = () => {
+ if (numberToShow < 12) {
+ setNumberToShow(12);
+ return;
+ }
+ findNumbersToShow();
+ };
+
+ useEffect(() => {
+ api.categoriesList().then((categories) => setCategories(categories));
+ }, []);
+ return (
+ <>
+
+
+
+
+ {categories.slice(0, numberToShow).map((category) => (
+ -
+
+
+
+
+ {category.name}
+
+
+
+
+ ))}
+
+
+
+ {numberToShow < 12 ? 'Развернуть' : 'Свернуть'}
+
+
+
углеводы
- {`${carbohydrates}г`}
+ {`${carbonhydrates}г`}
ккал
diff --git a/src/components/making-order-btn/index.tsx b/src/components/making-order-btn/index.tsx
index 2627ae28..8c6c7922 100644
--- a/src/components/making-order-btn/index.tsx
+++ b/src/components/making-order-btn/index.tsx
@@ -1,15 +1,19 @@
import React from 'react';
import styles from './making-order-btn.module.scss';
import Button from '@components/Button';
+import type { ButtonProps } from '@components/Button';
-interface MakingOrderBtnProps {
- onClick?: () => void;
-}
+interface MakingOrderBtnProps extends Pick {}
-const MakingOrderBtn: React.FC = ({ onClick }) => {
+const MakingOrderBtn: React.FC = ({ onClick, disabled }) => {
return (
-
+
Нажимая на кнопку «Оформить заказ», вы соглашаетесь
с условиями обработки персональных данных, а также с условиями
diff --git a/src/components/making-order-btn/making-order-btn.module.scss b/src/components/making-order-btn/making-order-btn.module.scss
index 4daa8648..33b7852c 100644
--- a/src/components/making-order-btn/making-order-btn.module.scss
+++ b/src/components/making-order-btn/making-order-btn.module.scss
@@ -47,8 +47,8 @@
transition: 0.5s;
&:disabled {
- background-color: black;
- cursor: not-allowed;
+ background-color: $accent-color-lightest-green;
+ cursor: initial;
}
}
diff --git a/src/components/navigation-icons/index.tsx b/src/components/navigation-icons/index.tsx
index 6077540b..5a504c00 100644
--- a/src/components/navigation-icons/index.tsx
+++ b/src/components/navigation-icons/index.tsx
@@ -3,10 +3,12 @@ import { Link } from 'react-router-dom';
import { useAuth } from '@hooks/use-auth.ts';
import styles from './navigation-icons.module.scss';
import { usePopup } from '@hooks/use-popup.ts';
+import { useCart } from '@hooks/use-cart-context';
const NavigationIcons: React.FC = () => {
const { isLoggedIn } = useAuth();
const { handleOpenPopup } = usePopup();
+ const { cartData } = useCart();
return (
@@ -20,6 +22,7 @@ const NavigationIcons: React.FC = () => {
{
);
};
diff --git a/src/components/shopping-item/index.tsx b/src/components/shopping-item/index.tsx
index 62b73959..f6bd2b66 100644
--- a/src/components/shopping-item/index.tsx
+++ b/src/components/shopping-item/index.tsx
@@ -50,9 +50,7 @@ const ShoppingItem: React.FC
= (props) => {
className={`${styles.item_btn} ${styles.item__decrease_btn}`}
onClick={handleDecreaseClick}
>
- {`${product.quantity} шт`}
+ {product.quantity}
diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss
index 83406b75..6d356395 100644
--- a/src/pages/home/home.module.scss
+++ b/src/pages/home/home.module.scss
@@ -15,15 +15,16 @@
}
.home__catalogSection {
- margin-top: 120px;
+ max-width: 80%;
+ margin: 120px auto 0;
@media screen and (width <= 768px) {
margin: 50px auto 0;
- max-width: 550px;
+ max-width: calc(100% - 2 * 20px);
}
@media screen and (width <= 400px) {
- margin-top: 0;
+ margin: 0 auto;
}
}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 31d6b21f..4721f3fe 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -4,11 +4,10 @@ import styles from './home.module.scss';
import InfoCard from '@components/info-card';
import usefulProductsIcon from '@images/useful-products-icon.svg';
import roundTheClockDelivery from '@images/round-the-clock-delivery.svg';
-import CardCatalogLink from '@components/card-catalog-link';
-import { mainPageBlockLinks } from '@data/dataExamples.ts';
import TopSellingThisWeek from '@components/top-selling-this-week';
import AboutCompany from '@components/about-company/index.tsx';
import OurBlock from '@components/our-block';
+import CatalogPromo from '@components/catalog-promo';
const Home: React.FC = () => {
return (
@@ -31,7 +30,7 @@ const Home: React.FC = () => {
/>
diff --git a/src/pages/profile/profile-favorites/index.tsx b/src/pages/profile/profile-favorites/index.tsx
index 6a12cd1c..ff6129d8 100644
--- a/src/pages/profile/profile-favorites/index.tsx
+++ b/src/pages/profile/profile-favorites/index.tsx
@@ -4,6 +4,7 @@ import api from '@services/api';
import ProductCard from '@components/product-card';
import ReturnBackButton from '@components/profile-components/return-back-button';
import { useProfile } from '@hooks/use-profile';
+import { useCart } from '@hooks/use-cart-context';
import type { Product } from '@services/generated-api/data-contracts';
import { Link } from 'react-router-dom';
@@ -14,11 +15,17 @@ export default function ProfileFavorites() {
error: '',
});
const [products, setProducts] = useState>([]);
- const [checkboxesValues, setCheckboxesValue] = useState([]);
+ const [checkboxesValues, setCheckboxesValue] = useState>({});
const { isMobileScreen } = useProfile();
+ const { updateCart } = useCart();
useEffect(() => {
- products && setCheckboxesValue(products.map(() => false));
+ products &&
+ products.forEach((product) => {
+ setCheckboxesValue((prev) => {
+ return { ...prev, [product.id]: false };
+ });
+ });
}, [products]);
useEffect(() => {
@@ -46,18 +53,40 @@ export default function ProfileFavorites() {
});
}, []);
- const onCheckButton = (index: number) => {
+ const onCheckButton = (id: number) => {
return () => {
- setCheckboxesValue(
- checkboxesValues.map((value, i) => (i === index ? !value : value))
- );
+ setCheckboxesValue((prev) => {
+ return { ...prev, [id]: !prev[id] };
+ });
};
};
- const isChooseAll = checkboxesValues.every((el) => el) || !products.length;
+ const isChooseAll =
+ Object.values(checkboxesValues).every((el) => el) || !products.length;
const toggleAll = () => {
- setCheckboxesValue(checkboxesValues.map(() => (isChooseAll ? false : true)));
+ if (isChooseAll) {
+ Object.keys(checkboxesValues).forEach((key) => {
+ setCheckboxesValue((prev) => {
+ return { ...prev, [key]: false };
+ });
+ });
+ } else {
+ Object.keys(checkboxesValues).forEach((key) => {
+ setCheckboxesValue((prev) => {
+ return { ...prev, [key]: true };
+ });
+ });
+ }
+ };
+
+ const handleAddToCart = () => {
+ const dataToSend = Object.keys(checkboxesValues)
+ .filter((i) => checkboxesValues[i as unknown as keyof typeof checkboxesValues])
+ .map((item) => ({ id: Number(item), quantity: 1 }));
+ updateCart(dataToSend);
+
+ window.scroll(0, 0);
};
return (
@@ -71,7 +100,7 @@ export default function ProfileFavorites() {
{!productsLoadingStatus.inProcess && products.length ? (
- products.map((product, index) => (
+ products.map((product) => (
-
)}
-
+
);
}
diff --git a/src/pages/recipe/index.tsx b/src/pages/recipe/index.tsx
index f5ef4883..cf83ad34 100644
--- a/src/pages/recipe/index.tsx
+++ b/src/pages/recipe/index.tsx
@@ -14,31 +14,29 @@ import { usePopup } from '@hooks/use-popup';
import PopupRecipe from '@components/popups/popup-recipe';
type ReceipeIngredientInfoProps = {
+ amount: number;
+ final_price: number;
id: number;
- name: string;
- measure_unit: string;
- quantity: number;
ingredient_photo: string;
- amount_of_pack: number;
- amount?: number;
- price?: number;
+ measure_unit: string;
+ name: string;
+ need_to_buy: number;
+ quantity_in_recipe: number;
};
type ReceipeInfoProps = {
- id: number;
author: number;
- name: string;
- text: string;
+ carbohydrates: number;
+ cooking_time: number;
+ fats: number;
+ id: number;
image: string;
ingredients: ReceipeIngredientInfoProps[];
- total_ingredients?: string;
- recipe_nutrients?: {
- proteins: number;
- fats: number;
- carbonhydrates: number;
- kcal: number;
- };
- cooking_time: number;
+ kcal: number;
+ name: string;
+ proteins: number;
+ text: string;
+ total_ingredients?: number;
};
const Recipe: React.FC = () => {
@@ -50,6 +48,12 @@ const Recipe: React.FC = () => {
const [recipeByLines, setRecipeByLines] = useState(['']);
const [numeralizeWord, setNumeralizeWord] = useState('');
const { reset } = useCart();
+ const [recipeNutrients, setRecipeNutrients] = useState({
+ proteins: 0,
+ fats: 0,
+ carbonhydrates: 0,
+ kcal: 0,
+ });
useEffect(() => {
if (!id) {
@@ -61,33 +65,13 @@ const Recipe: React.FC = () => {
const recipe = await api.getRecipeById(recipeId);
setRecipeByLines(recipe.text.split('\n'));
setNumeralizeWord(declOfNum(recipe.cooking_time, ['минута', 'минуты', 'минут']));
-
- const promises = recipe.ingredients.map(
- (ingredient: ReceipeIngredientInfoProps) => {
- return api.productsRead(ingredient.id);
- }
- );
-
- const newProducts = await Promise.all(promises);
- const filteredProducts = newProducts.filter((product) => product !== null);
-
- const addFieldsToRecipe = (prevReceipe: ReceipeInfoProps) => {
- filteredProducts.map((product) => {
- const index = prevReceipe.ingredients.findIndex((i) => i.id == product.id);
- if (index === -1) {
- return;
- }
- prevReceipe.ingredients[index].amount = product.amount;
- prevReceipe.ingredients[index].price = product.price;
- prevReceipe.ingredients[index].amount_of_pack = Math.ceil(
- prevReceipe.ingredients[index].quantity / product.amount
- );
- });
-
- return prevReceipe;
- };
-
- setRecipeInfo(addFieldsToRecipe(recipe));
+ setRecipeInfo(recipe);
+ setRecipeNutrients({
+ proteins: recipe.proteins,
+ fats: recipe.fats,
+ carbonhydrates: recipe.carbohydrates,
+ kcal: recipe.kcal,
+ });
};
fetchReceiptAndProducts().finally(() => setIsLoading(false));
@@ -130,10 +114,7 @@ const Recipe: React.FC = () => {
-
+
diff --git a/src/pages/shopping-cart/index.tsx b/src/pages/shopping-cart/index.tsx
index e73cfa1c..601fcb44 100644
--- a/src/pages/shopping-cart/index.tsx
+++ b/src/pages/shopping-cart/index.tsx
@@ -118,7 +118,10 @@ const ShoppingCart: React.FC = () => {
-
+
)}
diff --git a/src/services/api.ts b/src/services/api.ts
index ae81f660..e7c10954 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -31,7 +31,7 @@ class Api {
_checkResponse(res: Response) {
if (res.ok) {
- if (res.status === 204) return res;
+ if (res.status === 204 || res.status === 205) return res;
return res.json();
}
diff --git a/src/services/generated-api/data-contracts.ts b/src/services/generated-api/data-contracts.ts
index 36b5a8f8..dc6e447d 100644
--- a/src/services/generated-api/data-contracts.ts
+++ b/src/services/generated-api/data-contracts.ts
@@ -30,6 +30,7 @@ export interface Category {
* @maxLength 100
*/
name: string;
+ image: string;
/**
* Slug
* @format slug