Merge pull request #45 from infoshareacademy/hriabokonenko/basket

Hriabokonenko/basket
infoshareacademy · Mar 3, 2024 · d7ac6f7 · d7ac6f7
2 parents 2e77d40 + 8aec068
commit d7ac6f7
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 49 deletions.
diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
@@ -5,9 +5,10 @@ import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/portfolioimage";
+import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/PortfolioImage.jsx";
 import { NotFound } from "./Components/NotFound/NotFound";
 import { ThemeProvider } from "./providers/theme.tsx";
+import { BasketProvider } from "./providers/basketContext.tsx";
 import { Footer } from "./Components/Footer/Footer";
 
 function App() {
@@ -19,23 +20,28 @@ function App() {
   return (
     <>
       <ThemeProvider>
-        <BrowserRouter>
-          <Header />
-          <div className="main__container">
-            <Routes>
-              <Route path="/" element={<LandingPage quotes={quotes} />}></Route>
-              <Route path="/portfolio" element={<Portfolio />}></Route>
-              <Route path="/pricing" element={<Pricing />}></Route>
-              <Route path="/contactform" element={<ContactForm />}></Route>
-              <Route
-                path="/portfolio/:imageId"
-                element={<PortfolioImage />}
-              ></Route>
-              <Route path="*" element={<NotFound />}></Route>
-            </Routes>
-          </div>
-          <Footer />
-        </BrowserRouter>
+        <BasketProvider>
+          <BrowserRouter>
+            <Header />
+            <div className="main__container">
+              <Routes>
+                <Route
+                  path="/"
+                  element={<LandingPage quotes={quotes} />}
+                ></Route>
+                <Route path="/portfolio" element={<Portfolio />}></Route>
+                <Route path="/pricing" element={<Pricing />}></Route>
+                <Route path="/contactform" element={<ContactForm />}></Route>
+                <Route
+                  path="/portfolio/:imageId"
+                  element={<PortfolioImage />}
+                ></Route>
+                <Route path="*" element={<NotFound />}></Route>
+              </Routes>
+            </div>
+            <Footer />
+          </BrowserRouter>
+        </BasketProvider>
       </ThemeProvider>
     </>
   );

diff --git a/my-app/src/Components/BasketModal/BasketItem/BasketItem.module.css b/my-app/src/Components/BasketModal/BasketItem/BasketItem.module.css
@@ -0,0 +1,3 @@
+.basket-item__product-image {
+  height: 100px;
+}
diff --git a/my-app/src/Components/BasketModal/BasketItem/BasketItem.tsx b/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>
+    );
+}
diff --git a/my-app/src/Components/BasketModal/BasketModal.jsx b/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>

diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/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

diff --git a/my-app/src/providers/basketContext.tsx b/my-app/src/providers/basketContext.tsx
@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, createContext, useContext, useState } from 'react';
+import { Product } from "./basketContext.types"
+
+interface BasketContextType {
+    basket: Product[];
+    addToBasket: (product: Product) => void;
+    removeFromBasket: (productId: number) => void;
+}
+
+const BasketContext = createContext<BasketContextType | undefined>(undefined);
+
+const BasketProvider: React.FC = ({ children }: PropsWithChildren) => {
+    const [basket, setBasket] = useState<Product[]>([]);
+
+    const addToBasket = (product: Product) => {
+        setBasket([...basket, product]);
+    }
+
+    const removeFromBasket = (productId: number) => {
+        setBasket(basket.filter(item => item.id !== productId));
+    }
+
+    return (
+        <BasketContext.Provider value={{ basket, addToBasket, removeFromBasket }}>
+            {children}
+        </BasketContext.Provider>
+    );
+}
+
+const useBasket = () => {
+    const context = useContext(BasketContext);
+    if (!context) {
+        throw new Error('useBasket must be used within a BasketProvider');
+    }
+    return context;
+}
+
+export { BasketProvider, useBasket, BasketContext };
diff --git a/my-app/src/providers/basketContext.types.ts b/my-app/src/providers/basketContext.types.ts
@@ -0,0 +1,8 @@
+export interface Product {
+    author: string;
+    height: number;
+    id: number;
+    price: number;
+    url: string;
+    width: number;
+}
diff --git a/my-app/src/providers/theme.jsx b/my-app/src/providers/theme.jsx