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) => (
  • )}
- + ); }