Skip to content

Commit

Permalink
implement solution of showing items at basket
Browse files Browse the repository at this point in the history
  • Loading branch information
@HalynaRiabokonenko
HalynaRiabokonenko committed Mar 3, 2024
1 parent ce9b206 commit f7d1e00
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 68 deletions.
62 changes: 40 additions & 22 deletions my-app/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -22,6 +23,7 @@ function App() {
];

const [user, setUser] = useState(null);

onAuthStateChanged(auth, (res) => {
setUser(res);
});
Expand All @@ -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 />
Expand Down
100 changes: 63 additions & 37 deletions my-app/src/Components/BasketModal/BasketModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -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>
);
};
37 changes: 35 additions & 2 deletions my-app/src/Components/BasketModal/BasketModal.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -27,4 +60,4 @@
height: 100%;
background: rgba(114, 111, 111, 0.5);
z-index: 1;
}
} */
9 changes: 5 additions & 4 deletions my-app/src/Components/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down Expand Up @@ -131,11 +132,11 @@ export const Header = ({ setUser, user }) => {
)}
</div>
</div>
<BasketModal
{/* <BasketModal
isOpen={isCartModalOpen}
onClose={handleCloseCartModal}
user={user}
/>
/> */}
</>
);
};
42 changes: 39 additions & 3 deletions my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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>;
}
Expand Down

0 comments on commit f7d1e00

Please sign in to comment.