wishlist feature is added with toggle functionality (#94)

Co-authored-by: Rishi Mondal <[email protected]>
MAVRICK-1 · May 13, 2024 · 5057f67 · 5057f67
1 parent a5044a9
commit 5057f67
Show file tree

Hide file tree

Showing 10 changed files with 2,465 additions and 1,424 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -21,6 +21,7 @@ import NotFound from "./pages/NotFound";
 import DetailsPage from "./pages/Details";
 import axios from "axios";
 import Cart from "./pages/cart";
+import Wishlist from "./pages/wishList";
 import SignIn from "./pages/SignIn";
 import SignUp from "./pages/SignUp";
 import Loader from "./assets/images/loading.gif";
@@ -38,6 +39,7 @@ function App() {
   const [productData, setProductData] = useState([]);
 
   const [cartItems, setCartItems] = useState([]);
+  const [wishlistItems, setWishlistItems] = useState([]);
 
   const [isLoading, setIsloading] = useState(true);
 
@@ -50,17 +52,18 @@ function App() {
   const [isLogin, setIsLogin] = useState();
   const [isOpenFilters, setIsopenFilters] = useState(false);
   const [data, setData] = useState([]);
-  const [cartCount,setCartCount] = useState(0)
+  const [cartCount, setCartCount] = useState(0);
+  const [wishlistCount, setWishlistCount] = useState(0);
 
-
-  useEffect(()=>{
-    fetchCartProducts()
-  },[isLogin])
+  useEffect(() => {
+    fetchCartProducts();
+    fetchWishlistProducts();
+  }, [isLogin]);
 
   const fetchCartProducts = async () => {
     try {
-      const cartRef = doc(db, 'carts', localStorage.getItem("uid"));
-      const productsCollectionRef = collection(cartRef, 'products');
+      const cartRef = doc(db, "carts", localStorage.getItem("uid"));
+      const productsCollectionRef = collection(cartRef, "products");
       const querySnapshot = await getDocs(productsCollectionRef);
       const products = [];
       querySnapshot.forEach((doc) => {
@@ -69,10 +72,28 @@ function App() {
       setCartItems(products);
       setCartCount(products.length); // Set the product count
     } catch (error) {
-      console.error('Error fetching cart products:', error);
+      console.error("Error fetching cart products:", error);
     }
   };
 
+  const fetchWishlistProducts = async () => {
+    console.log("fetchWishlistProducts");
+    try {
+      const wishlistRef = doc(db, "wishlists", localStorage.getItem("uid"));
+      const productsCollectionRef = collection(wishlistRef, "products");
+      const querySnapshot = await getDocs(productsCollectionRef);
+      console.log(querySnapshot);
+      const products = [];
+      querySnapshot.forEach((doc) => {
+        products.push({ id: doc.id, ...doc.data() });
+      });
+      console.log(products);
+      setWishlistItems(products);
+      setWishlistCount(products.length); // Set the product count
+    } catch (error) {
+      console.error("Error fetching wishlist products:", error);
+    }
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -210,7 +231,10 @@ function App() {
     setIsopenNavigation,
     cartCount,
     setCartCount,
-    fetchCartProducts
+    wishlistCount,
+    setWishlistCount,
+    fetchCartProducts,
+    fetchWishlistProducts,
   };
 
   return data && data.productData ? (
@@ -247,6 +271,7 @@ function App() {
             element={<DetailsPage data={data.productData} />}
           />
           <Route exact={true} path="/cart" element={<Cart />} />
+          <Route exact={true} path="/wishlist" element={<Wishlist />} />
 
           {/* sign in , signup Protection */}
           {isLogin === null && (

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -38,10 +38,12 @@ const Header = (props) => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const [isopenSearch, setOpenSearch] = useState(false);
   const [isOpenNav, setIsOpenNav] = useState(false);
-  const {cartCount, setCartCount} = useContext(MyContext);
+  const { cartCount, setCartCount } = useContext(MyContext);
+  const { wishlistCount, setWishlistCount } = useContext(MyContext);
+
   const headerRef = useRef();
   const searchInput = useRef();
-  const [profile,setProfile] = useState("")
+  const [profile, setProfile] = useState("");
 
   const context = useContext(MyContext);
   const history = useNavigate();
@@ -67,9 +69,9 @@ const Header = (props) => {
     getCountry("https://countriesnow.space/api/v0.1/countries/");
   }, []);
 
-  useEffect(()=>{
-    setProfile(localStorage.getItem("userImage"))
-  },[context.isLogin])
+  useEffect(() => {
+    setProfile(localStorage.getItem("userImage"));
+  }, [context.isLogin]);
   const getCountry = async (url) => {
     try {
       await axios.get(url).then((res) => {
@@ -101,7 +103,7 @@ const Header = (props) => {
 
   const signOut = () => {
     context.signOut();
-    localStorage.setItem("userImage","")
+    localStorage.setItem("userImage", "");
     history("/");
   };
 
@@ -162,7 +164,29 @@ const Header = (props) => {
                       <div
                         onClick={() => setisOpenAccDropDown(!isOpenAccDropDown)}
                       >
-                        {profile!=""?<img src={profile} alt="" style={{width:"65%", height:"65%", borderRadius:"50%",marginLeft:"15%"}} />:<img src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png" alt="" style={{width:"50px", height:"50px", borderRadius:"50%",marginLeft:"13%"}} />}
+                        {profile != "" ? (
+                          <img
+                            src={profile}
+                            alt=""
+                            style={{
+                              width: "65%",
+                              height: "65%",
+                              borderRadius: "50%",
+                              marginLeft: "15%",
+                            }}
+                          />
+                        ) : (
+                          <img
+                            src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png"
+                            alt=""
+                            style={{
+                              width: "50px",
+                              height: "50px",
+                              borderRadius: "50%",
+                              marginLeft: "13%",
+                            }}
+                          />
+                        )}
                       </div>
                     )}
                   </div>
@@ -223,39 +247,44 @@ const Header = (props) => {
                     <ul className="list list-inline mb-0 headerTabs">
                       <li className="list-inline-item">
                         <span>
-                        <Link to={"/wishlist"} style={{ textDecoration: "none" }}>                      
+                          <Link
+                            to={"/wishlist"}
+                            style={{ textDecoration: "none" }}
+                          >
                             {" "}
-                          <img src={IconCompare} />
-                          <span className="badge bg-success rounded-circle">
-                            3
-                          </span>
-                          Compare
-                        </Link>
+                            <img src={IconCompare} />
+                            <span className="badge bg-success rounded-circle">
+                              3
+                            </span>
+                            Compare
+                          </Link>
                         </span>
                       </li>
                       <li className="list-inline-item">
                         <span>
-                        <Link to={"/wishlist"} style={{ textDecoration: "none" }}>                      
+                          <Link
+                            to={"/wishlist"}
+                            style={{ textDecoration: "none" }}
+                          >
                             {" "}
-                          <img src={IconHeart} />
-                          <span className="badge bg-success rounded-circle">
-                            3
-                          </span>
-                          Wishlist
-                        </Link>
+                            <img src={IconHeart} />
+                            <span className="badge bg-success rounded-circle">
+                              {wishlistCount}
+                            </span>
+                            Wishlist
+                          </Link>
                         </span>
                       </li>
                       <li className="list-inline-item">
                         <span>
-                          <Link to={"/cart"} style={{ textDecoration: "none" }}>                      
+                          <Link to={"/cart"} style={{ textDecoration: "none" }}>
                             {" "}
                             <img src={IconCart} />
                             <span className="badge bg-success rounded-circle">
-                              {cartCount}  
+                              {cartCount}
                             </span>
                             Cart
                           </Link>
-
                         </span>
                       </li>
 
@@ -264,8 +293,29 @@ const Header = (props) => {
                           <span
                             onClick={() => setisOpenDropDown(!isOpenDropDown)}
                           >
-
-                            {profile!=""?<img src={profile} alt="" style={{width:"65%", height:"65%", borderRadius:"50%",marginLeft:"18%"}} />:<img src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png" alt="" style={{width:"50px", height:"50px", borderRadius:"50%",marginLeft:"18%"}} />}
+                            {profile != "" ? (
+                              <img
+                                src={profile}
+                                alt=""
+                                style={{
+                                  width: "65%",
+                                  height: "65%",
+                                  borderRadius: "50%",
+                                  marginLeft: "18%",
+                                }}
+                              />
+                            ) : (
+                              <img
+                                src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png"
+                                alt=""
+                                style={{
+                                  width: "50px",
+                                  height: "50px",
+                                  borderRadius: "50%",
+                                  marginLeft: "18%",
+                                }}
+                              />
+                            )}
                           </span>
 
                           {isOpenDropDown !== false && (