change PortfolioImage by adding useEffect

infoshareacademy · Feb 25, 2024 · 83e6b09 · 83e6b09
1 parent d2acde0
commit 83e6b09
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 15 deletions.
diff --git a/my-app/src/Components/Portfolio/Portfolio.tsx b/my-app/src/Components/Portfolio/Portfolio.tsx
@@ -2,17 +2,15 @@ import styles from "./Portfolio.module.css";
 import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { ThemeContext } from "../../providers/theme.tsx";
-import { PortfolioDataInterface } from "./Portfolio.types";
 import { collection, onSnapshot } from 'firebase/firestore';
 import { db } from "../../../firebase-config";
 
+
 export const Portfolio = () => {
   const [_, setImageId] = useState<number | null>(null);
   const { theme } = useContext(ThemeContext);
-
   const [portfolioData, setPortfolioData] = useState(null);
 
-
   const getData = () => {
     const photosCollection = collection(db, "photos")
     onSnapshot(photosCollection, res => {

diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
@@ -1,26 +1,33 @@
 import { useParams } from "react-router-dom";
-import portfolioData from "../../../../public/photos.json";
 import styles from "./PortfolioImage.module.css";
 import { ThemeContext } from "../../../providers/theme.tsx";
-import { useContext } from "react";
+import { useContext, useState, useEffect } from "react";
 import classnames from "classnames";
 import { db } from "../../../../firebase-config";
 import { doc, getDoc } from "firebase/firestore";
-import { collection } from "firebase/firestore";
 
 export const PortfolioImage = () => {
   const { imageId } = useParams();
+  const { theme } = useContext(ThemeContext);
+  const [photo, setPhoto] = useState(null);
 
-  const docRef = doc(db, "photos", imageId);
-  const docSnap = getDoc(docRef);
+  useEffect(() => {
+    const fetchData = async () => {
+      const docRef = doc(db, "photos", imageId);
+      const docSnap = await getDoc(docRef);
+      if (docSnap.exists()) {
+        setPhoto(docSnap.data());
+      } else {
+        console.log("No such document!");
+      }
+    };
 
-  if (docSnap.exists()) {
-    console.log("Document data:", docSnap.data());
-  } else {
-    console.log("No such document!");
-  }
+    fetchData();
+  }, [imageId]);
 
-  const { theme } = useContext(ThemeContext);
+  if (!photo) {
+    return <div>Loading...</div>;
+  }
 
   return (
     <div
@@ -34,7 +41,11 @@ export const PortfolioImage = () => {
         </p>
         <h3>Price: {photo.price}$</h3>
       </div>
-      <button>Add to basket</button>
+      <button
+        className={classnames(styles["portfolio__input--buy"], styles[theme])}
+      >
+        {photo.amount ? "Add to basket" : "Out of stock"}
+      </button>
     </div>
   );
 };
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css
@@ -11,6 +11,17 @@
   border-radius: 35px;
 }
 
+.portfolio__input--buy {
+  align-self: center;
+  padding: 2px 20px;
+  margin: 20px 20px;
+  padding: 20px 30px;
+  border-radius: 20px;
+  border: none;
+  font-size: 1rem;
+  transition: 0.4s;
+}
+
 .light {
   background: var(--box-light-color-light);
   color: var(--main-text-color-light);
@@ -20,3 +31,23 @@
   background: var(--box-light-color-dark);
   color: var(--main-text-color-dark);
 }
+
+.portfolio__input--buy.light {
+  color: var(--dark-text-color-light);
+  background-color: var(--box-dark-color-light);
+}
+
+.portfolio__input--buy.light:hover {
+  color: var(--box-light-color-light);
+  background-color: var(--dark-hover-color-light);
+}
+
+.portfolio__input--buy.dark {
+  color: var(--dark-text-color-dark);
+  background-color: var(--box-dark-color-dark);
+}
+
+.portfolio__input--buy.dark:hover {
+  color: var(--box-light-color-dark);
+  background-color: var(--dark-hover-color-dark);
+}