add BasteItems component, add solution to adding iem po basket and sh…

…ow item at basket

my-app/src/Components/BasketModal/BasketItem/BasketItem.module.css

@@ -0,0 +1,3 @@
+.basket-item__product-image {
+  height: 100px;
+}

my-app/src/Components/BasketModal/BasketItem/BasketItem.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import styles from "./BasketItem.module.css";
+import classNames from 'classnames';
+import { ThemeContext } from '../../../providers/theme';
+
+interface Product {
+    author: string;
+    height: number;
+    id: number;
+    price: number;
+    url: string;
+    width: number;
+}
+
+interface BasketItemProps {
+    product: Product;
+}
+
+export const BasketItem: React.FC<BasketItemProps> = ({ product }) => {
+    const { theme } = useContext(ThemeContext);
+
+    return (
+        <div>
+            <h3>{product.author}</h3>
+            <img className={classNames(styles["basket-item__product-image"], styles[theme])} src={product.url}></img>
+            <p>{product.price}$</p>
+        </div>
+    );
+}

my-app/src/Components/BasketModal/BasketModal.jsx

@@ -2,9 +2,13 @@ import styles from "./BasketModal.module.css";
 import { Modal } from "../Modal/Modal.jsx";
 import { useContext, useEffect } from "react";
 import { ThemeContext } from "../../providers/theme.tsx";
+import { BasketContext } from "../../providers/BasketContext";
+import { BasketItem } from "../BasketModal/BasketItem/BasketItem.tsx";
 
 export const BasketModal = ({ isOpen, onClose }) => {
   const { theme } = useContext(ThemeContext);
+  const { basket } = useContext(BasketContext);
+  console.log("BASKET", basket);
 
   useEffect(() => {
     const handleKeyDown = (event) => {
@@ -42,7 +46,15 @@ export const BasketModal = ({ isOpen, onClose }) => {
           x
         </button>
         <div>
-          <h1>Basket modal</h1>
+          {basket.length > 0 ? (
+            <div>
+              {basket.map((product, index) => (
+                <BasketItem key={index} product={product} />
+              ))}
+            </div>
+          ) : (
+            <div>Empty basket</div>
+          )}
         </div>
       </Modal>
     </div>

my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx

@@ -5,11 +5,17 @@ import { useContext, useState, useEffect } from "react";
 import classnames from "classnames";
 import { db } from "../../../../firebase-config";
 import { doc, getDoc } from "firebase/firestore";
+import { BasketContext } from "../../../providers/BasketContext.tsx";
 
 export const PortfolioImage = () => {
   const { imageId } = useParams();
   const { theme } = useContext(ThemeContext);
   const [photo, setPhoto] = useState(null);
+  const { addToBasket } = useContext(BasketContext);
+
+  const handleClick = (product) => {
+    addToBasket(product);
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -25,10 +31,6 @@ export const PortfolioImage = () => {
     fetchData();
   }, [imageId]);
 
-  const addToBasket = () => {
-    // console.log("ADDED");
-  };
-
   if (!photo) {
     return <div>Loading...</div>;
   }
@@ -47,7 +49,7 @@ export const PortfolioImage = () => {
       </div>
       {photo.amount ? (
         <button
-          onClick={addToBasket}
+          onClick={() => handleClick(photo)}
           className={classnames(styles["portfolio__input--buy"], styles[theme])}
         >
           Add to basket

my-app/src/providers/basketContext.tsx

@@ -35,4 +35,4 @@ const useBasket = () => {
     return context;
 }
 
-export { BasketProvider, useBasket };
+export { BasketProvider, useBasket, BasketContext };