From f7d1e001ce7314502e2b9b51e56e58e8f8ce5eac Mon Sep 17 00:00:00 2001
From: Halyna Riabokonenko <sgallina89@gmail.com>
Date: Sun, 3 Mar 2024 20:52:03 +0100
Subject: [PATCH] implement solution of showing items at basket

---
 my-app/src/App.jsx                            |  62 +++++++----
 .../Components/BasketModal/BasketModal.jsx    | 100 +++++++++++-------
 .../BasketModal/BasketModal.module.css        |  37 ++++++-
 my-app/src/Components/Header/Header.jsx       |   9 +-
 .../PortfolioImage/PortfolioImage.jsx         |  42 +++++++-
 5 files changed, 182 insertions(+), 68 deletions(-)

diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
index 1ee8f79..f1adb0c 100644
--- a/my-app/src/App.jsx
+++ b/my-app/src/App.jsx
@@ -14,6 +14,7 @@ import { Footer } from "./Components/Footer/Footer";
 import { auth } from "./../firebase-config.js";
 import { useState } from "react";
 import { onAuthStateChanged } from "firebase/auth";
+import { BasketModal } from "./Components/BasketModal/BasketModal.jsx";
 
 function App() {
   const quotes = [
@@ -22,6 +23,7 @@ function App() {
   ];
 
   const [user, setUser] = useState(null);
+
   onAuthStateChanged(auth, (res) => {
     setUser(res);
   });
@@ -33,29 +35,45 @@ function App() {
           <Header setUser={setUser} user={user} />
           <div className="main__container">
             <Routes>
-              <Route path="/" element={<LandingPage quotes={quotes} />}></Route>
-              <Route
-                path="/portfolio"
-                element={user ? <Portfolio /> : <Login />}
-              ></Route>
-              <Route
-                path="/pricing"
-                element={user ? <Pricing /> : <Login />}
-              ></Route>
-              <Route path="/contactform" element={<ContactForm />}></Route>
-              <Route
-                path="/portfolio/:imageId"
-                element={user ? <PortfolioImage user={user} /> : <Login />}
-              ></Route>
+              {user ? (
+                <>
+                  <Route
+                    path="/"
+                    element={<LandingPage quotes={quotes} />}
+                  ></Route>
+                  <Route
+                    path="/portfolio"
+                    element={user ? <Portfolio /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/pricing"
+                    element={user ? <Pricing /> : <Login />}
+                  ></Route>
+                  <Route path="/contactform" element={<ContactForm />}></Route>
+                  <Route
+                    path="/portfolio/:imageId"
+                    element={user ? <PortfolioImage user={user} /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/basket"
+                    element={user ? <BasketModal user={user} /> : <Login />}
+                  ></Route>
+                </>
+              ) : (
+                <>
+                  <Route
+                    path="/login"
+                    element={user ? <Navigate to={"/"} replace /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/register"
+                    element={
+                      user ? <Navigate to={"/"} replace /> : <Register />
+                    }
+                  ></Route>
+                </>
+              )}
               <Route path="*" element={<NotFound />}></Route>
-              <Route
-                path="/login"
-                element={user ? <Navigate to={"/"} replace /> : <Login />}
-              ></Route>
-              <Route
-                path="/register"
-                element={user ? <Navigate to={"/"} replace /> : <Register />}
-              ></Route>
             </Routes>
           </div>
           <Footer />
diff --git a/my-app/src/Components/BasketModal/BasketModal.jsx b/my-app/src/Components/BasketModal/BasketModal.jsx
index c055165..9391e73 100644
--- a/my-app/src/Components/BasketModal/BasketModal.jsx
+++ b/my-app/src/Components/BasketModal/BasketModal.jsx
@@ -1,16 +1,20 @@
 import styles from "./BasketModal.module.css";
-import { Modal } from "../Modal/Modal.jsx";
 import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../../providers/theme.tsx";
 import { BasketItem } from "../BasketModal/BasketItem/BasketItem.tsx";
 import { db } from "../../../firebase-config.js";
-import { collection } from "firebase/firestore";
+import { collection, doc, onSnapshot } from "firebase/firestore";
+import classNames from "classnames";
 
 export const BasketModal = ({ isOpen, onClose, user }) => {
   const { theme } = useContext(ThemeContext);
   console.log("User from basket", user);
 
+  const [portfolioData, setPortfolioData] = useState([]);
+
   const [basket, setBasket] = useState([]);
+  // const [photos, setPhotos] = useState([]);
+
   console.log("BASKET", basket);
 
   useEffect(() => {
@@ -35,46 +39,68 @@ export const BasketModal = ({ isOpen, onClose, user }) => {
     };
   }, [isOpen]);
 
-  // const getData = () => {
-  //   const basketCollection = collection(db, "basket", user.uid);
-  //   onSnapshot(basketCollection, (res) => {
-  //     const items = res.docs.map((doc) => ({
-  //       id: doc.id,
-  //       ...doc.data(),
-  //     }));
-
-  //     setBasket(items);
-  //   });
-  // };
-  // useEffect(() => {
-  //   getData();
-  // }, []);
+  const getData = () => {
+    const basketCollection = doc(db, "basket", user.uid);
+    onSnapshot(basketCollection, (doc) => {
+      const item = doc.data();
+      setBasket(item.photos);
+    });
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getPhotosData = () => {
+    const photosCollection = collection(db, "photos");
+    onSnapshot(photosCollection, (res) => {
+      const photos = res.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      }));
+
+      setPortfolioData(photos);
+    });
+  };
+  useEffect(() => {
+    getPhotosData();
+  }, []);
+
+  console.log("PORTFOLIO", portfolioData);
+  console.log("Basket", basket);
+
+  const result = portfolioData.filter((obj) => basket.includes(Number(obj.id)));
+
+  console.log("RESULT", result);
 
   return (
-    <div style={{ display: isOpen ? "block" : "none" }}>
-      <div
-        className={`${styles["basket-modal__overlay"]}`}
-        onClick={onClose}
-      ></div>
-      <Modal>
-        <button
-          className={`${styles["basket-modal__button-close"]} ${styles[theme]}`}
+    <div className={classNames(styles["basket__container"], styles[theme])}>
+      <h1 className={classNames(styles["basket__header"], styles[theme])}>
+        Basket
+      </h1>
+      <div className={classNames(styles["basket__form"], styles[theme])}>
+        <div
+          className={`${styles["basket-modal__overlay"]}`}
           onClick={onClose}
-        >
-          x
-        </button>
+        ></div>
         <div>
-          {basket ? (
-            <div>
-              {basket.map((product, index) => (
-                <BasketItem key={index} product={product} />
-              ))}
-            </div>
-          ) : (
-            <div>Empty basket</div>
-          )}
+          <div>
+            {basket ? (
+              <div>
+                {result.map((item, index) => (
+                  <div key={index}>
+                    <div>{item.author}</div>
+                    <img src={item.url} width={300} />
+                    <div>{item.price}$</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div>Empty basket</div>
+            )}
+          </div>
         </div>
-      </Modal>
+      </div>
     </div>
   );
 };
diff --git a/my-app/src/Components/BasketModal/BasketModal.module.css b/my-app/src/Components/BasketModal/BasketModal.module.css
index ee9c1b7..2318d07 100644
--- a/my-app/src/Components/BasketModal/BasketModal.module.css
+++ b/my-app/src/Components/BasketModal/BasketModal.module.css
@@ -1,4 +1,37 @@
-.basket-modal__button-close {
+.basket__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.basket__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+/* .basket__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+} */
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}
+
+/* .basket-modal__button-close {
   position: absolute;
   top: 20px;
   right: 10px;
@@ -27,4 +60,4 @@
   height: 100%;
   background: rgba(114, 111, 111, 0.5);
   z-index: 1;
-}
+} */
diff --git a/my-app/src/Components/Header/Header.jsx b/my-app/src/Components/Header/Header.jsx
index 65f6b36..f2459af 100644
--- a/my-app/src/Components/Header/Header.jsx
+++ b/my-app/src/Components/Header/Header.jsx
@@ -69,9 +69,10 @@ export const Header = ({ setUser, user }) => {
                   styles.header__link,
                   styles["header__links--basket"]
                 )}
-                onClick={handleCartClick}
+                // onClick={handleCartClick}
               >
-                Basket
+                <NavLink to="/basket">Basket</NavLink>
+                {/* Basket */}
               </li>
             )}
             {!user && (
@@ -131,11 +132,11 @@ export const Header = ({ setUser, user }) => {
           )}
         </div>
       </div>
-      <BasketModal
+      {/* <BasketModal
         isOpen={isCartModalOpen}
         onClose={handleCloseCartModal}
         user={user}
-      />
+      /> */}
     </>
   );
 };
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
index 90d85a2..1f18386 100644
--- a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
+++ b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
@@ -4,17 +4,34 @@ import { ThemeContext } from "../../../providers/theme.tsx";
 import { useContext, useState, useEffect } from "react";
 import classnames from "classnames";
 import { db } from "../../../../firebase-config";
-import { doc, getDoc, setDoc } from "firebase/firestore";
+import {
+  collection,
+  doc,
+  getDoc,
+  onSnapshot,
+  setDoc,
+} from "firebase/firestore";
 
 export const PortfolioImage = ({ user }) => {
   const { imageId } = useParams();
   const { theme } = useContext(ThemeContext);
   const [photo, setPhoto] = useState(null);
-  // const { addToBasket } = useContext(BasketContext);
+  const [users, setUsers] = useState([]);
 
   const handleClick = () => {
     console.log("USER:", user);
-    // addToBasket(product);
+    //1.pobrac userów
+    //2. jak user istnieje to
+    //// Add a new document in collection "photos"
+    //pobieramy tablicę, dodajemy
+    // await setDoc(doc(db, "basket", user.uid, "photos"), {
+    //   id: id,
+    // });
+    //3.jak usera nie ma to
+    // Add a new document with a generated id
+    // const newUserRef = doc(collection(db, "basket", user.uid));
+    ///4. dodajemy dane to doc
+    // await setDoc(doc(db, "basket"), data); ---??? bo to arr?
   };
 
   useEffect(() => {
@@ -31,6 +48,25 @@ export const PortfolioImage = ({ user }) => {
     fetchData();
   }, [imageId]);
 
+  // useEffect(() => {
+  //   const fetchData = async () => {
+  //     const docRef = collection(db, "basket");
+  //     console.log("docRef", docRef);
+  //     const docSnap = await getDoc(docRef);
+
+  //     if (docSnap.exists()) {
+  //       console.log("docSnap", docSnap);
+  //       console.log("docSnapData", docSnap.data());
+  //       setUsers(docSnap.data());
+  //     } else {
+  //       console.log("No such document!");
+  //     }
+  //   };
+
+  //   fetchData();
+  // }, []);
+  // console.log("USERS", users);
+
   if (!photo) {
     return <div>Loading...</div>;
   }