category - list switch

harinarayanan-kp · Nov 8, 2023 · 72815c7 · 72815c7
1 parent 0652e4b
commit 72815c7
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 50 deletions.
diff --git a/trek/.firebase/hosting.YnVpbGQ.cache b/trek/.firebase/hosting.YnVpbGQ.cache
@@ -1,16 +1,16 @@
-asset-manifest.json,1699358501752,c2fbea7800febf077ebcbd146c7af1972ee69480511c5cf7d0bc2216279bc090
 404.html,1699358063816,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa
-index.html,1699358501752,aa1becc8efab82bedea3153ecd87133ae7865d6db76b283faf31d9fed9f8517f
 favicon.png,1699356545484,fbd670fca37d573c594ded57683a08ba4100642196c8528a372faa3aa2a218ae
-static/css/main.55259059.css,1699358501760,3589863ee7c5659146616d029b1650d67f6ac4d1ccb5799c2bb86e60578d6ee2
-static/js/787.fa4747b5.chunk.js,1699358501760,84236de82cc3132705d91246886b5685787117d1085466bd3423c0dc82a71a05
-static/css/main.55259059.css.map,1699358501760,08361cac519231c22afa6925fb502047758f398c18d029a590edc7c696725bed
 logo192.png,1699103015724,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
-manifest.json,1699103015405,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 logo512.png,1699103015793,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+manifest.json,1699103015405,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 robots.txt,1699103015914,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-static/js/787.fa4747b5.chunk.js.map,1699358501760,c92d6be8c969eccaf38447c6cd0db2541fa63e03e4b1dfad781f1cd76b0a6c46
-static/media/cart-shopping-svgrepo-com.735bc8ae1f1c71ef56f6cb39ffc139f8.svg,1699358501760,c6fdc2a753673188d6fedb292b94f9f6f447ec2a4252ae8a0545d27d7fe3c90b
-static/js/main.8c66784c.js.LICENSE.txt,1699358501760,c8c211141fd38b84d577981c40f83129a8fed7b8604ce68aabd5d264cee43ada
-static/js/main.8c66784c.js,1699358501761,febd4632d4b0ecb0f621b2c63fb6fe8dbbdaea93d378716bc75ddf784095139d
-static/js/main.8c66784c.js.map,1699358501761,331e92ba0dd2ed2a3ed3903ac78fd902d26b10a41bd844f7905c570e46f78cb1
+index.html,1699446589849,c4174683d5925ffb24eca57b41133da21d5f37ac87cf8a60a46a985f41285c25
+asset-manifest.json,1699446589849,c9e1c8d92527d9f282273c18da34275e33177c277bbcee37bdf3f24f760e243a
+static/js/787.fa4747b5.chunk.js,1699446589860,84236de82cc3132705d91246886b5685787117d1085466bd3423c0dc82a71a05
+static/css/main.c0892d93.css,1699446589860,81fe8e6bfd2b95aa9f3c38a27f832fd99f8a2711d08e2c79fc93a52c6d82c621
+static/css/main.c0892d93.css.map,1699446589860,d6074fbcc02963256576479e74b71a5a5ae041528f6db11bcc2fe3e9ecfe7e95
+static/js/main.a710ec0b.js.LICENSE.txt,1699446589860,c8c211141fd38b84d577981c40f83129a8fed7b8604ce68aabd5d264cee43ada
+static/media/cart-shopping-svgrepo-com.735bc8ae1f1c71ef56f6cb39ffc139f8.svg,1699446589860,c6fdc2a753673188d6fedb292b94f9f6f447ec2a4252ae8a0545d27d7fe3c90b
+static/js/787.fa4747b5.chunk.js.map,1699446589860,c92d6be8c969eccaf38447c6cd0db2541fa63e03e4b1dfad781f1cd76b0a6c46
+static/js/main.a710ec0b.js,1699446589860,eb9f0c388660d85d68f3d04caa92ea4ec299169d598e084ddd96c87b404f1e6d
+static/js/main.a710ec0b.js.map,1699446589862,8654b8addfda257ca8fd41765a489819f3526c5c4f41b1f51eb5b849fdd4bcf5
diff --git a/trek/firebase.json b/trek/firebase.json
@@ -5,6 +5,12 @@
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
     ]
   }
 }
diff --git a/trek/src/App.js b/trek/src/App.js
@@ -1,10 +1,10 @@
 import './App.css';
 import HomeScreen from './components/HomeScreen/HomeScreen';
+import { Route, Routes } from 'react-router-dom';
+
 
 import SignupPage from './components/Login/SignUp/LoginPage';
 import LoginPage from './components/Login/Login/LoginPage';
-
-import { Route, Routes } from 'react-router-dom';
 import MyAccount from './components/settings/MyAccount';
 import Cart from './components/CartScreen/Cart';
 import ProductDetails from './components/ProductDetails/ProductDetails';

diff --git a/trek/src/components/CartScreen/Cart.jsx b/trek/src/components/CartScreen/Cart.jsx
@@ -56,7 +56,7 @@ const Cart = () => {
           const productSnapshot = await getDoc(productDocRef);
           if (productSnapshot.exists()) {
             const productData = productSnapshot.data();
-            productDetails.push(productData);
+            productDetails.push({ id: productId, ...productData });
           }
         } catch (error) {
           console.error('Error fetching product:', error);
@@ -68,6 +68,31 @@ const Cart = () => {
 
     fetchProductDetails();
   }, [cartItems]);
+useEffect(()=>{
+
+}, [cartItems])
+  // Function to remove a product from the cart
+  const removeFromCart = async (productId) => {
+    try {
+      console.log('clicked')
+      const userCartRef = doc(db, 'carts', userId);
+      const productSnapshot = await getDoc(userCartRef);
+      if (productSnapshot.exists()) {
+        const productData = productSnapshot.data();
+        const updatedProducts = productData.products.filter((id) => id !== productId);
+
+        // Update the cart in Firestore with the updated product list
+        await db.collection('carts').doc(userId).update({
+          products: updatedProducts,
+        });
+
+        // Remove the product from the local state
+        setCartItems(updatedProducts);
+      }
+    } catch (error) {
+      console.error('Error removing product from cart:', error);
+    }
+  };
 
   if (!userId) {
     return <div>PLEASE LOGIN TO CONTINUE</div>;
@@ -78,29 +103,33 @@ const Cart = () => {
       <Navbar />
       <div className='ListContainer'>
         {products.map((product, index) => (
-          <ListTile key={index} product={product} />
+          <ListTile
+            key={index}
+            product={product}
+            onRemoveFromCart={() => removeFromCart(product.id)}
+          />
         ))}
       </div>
     </div>
   );
 };
 
-export default Cart;
-
-const ListTile = ({ product }) => {
-  // Assuming `product` contains product details
+const ListTile = ({ product, onRemoveFromCart }) => {
   return (
     <div className='ListTile'>
       <div style={{ flexDirection: "row", display: "flex" }}>
-        <div className='ListImage'></div>
+        <img alt='' src={product.Image} className='ListImage'></img>
         <div className='details'>
           <div className='ListTitle'>{product.Title}</div>
-          <div className='ListDetails'>{product.Image}</div>
           <div className='ListPrice'>{product.Price}</div>
           <QuantityButton />
         </div>
       </div>
-      <div className='deletebutton'></div>
+      <button className='deletebutton' onClick={onRemoveFromCart}>
+        Remove from Cart
+      </button>
     </div>
   );
 };
+
+export default Cart;
diff --git a/trek/src/components/Navbar/Navbar.js b/trek/src/components/Navbar/Navbar.js
@@ -14,6 +14,8 @@ const Navbar = () => {
       <Outlet />
       <div className='navbarcenter'>
 
+
+
         <Link to="/list?category=men">
           <button>
             <h3>MEN</h3>

diff --git a/trek/src/components/Navbar/navbar.css b/trek/src/components/Navbar/navbar.css
@@ -10,7 +10,7 @@ h3 {
 }
 
 @media (max-width: 768px) {
-    .navbarcenter{
+    .navbarcenter {
         display: none;
     }
 }
@@ -58,7 +58,7 @@ h3 {
     font-weight: 600;
     line-height: normal;
     text-decoration: none;
-    
+
     margin: var(--margin-scale);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
     background-color: #9A9A9A;
@@ -69,4 +69,10 @@ h3 {
     align-items: center;
     justify-content: center;
     font-family: 'Inter', sans-serif;
+}
+
+@media (max-width: 768px) {
+    .navbarcenter {
+        display: none;
+    }
 }
diff --git a/trek/src/components/ProductDetails/ProductDetails.jsx b/trek/src/components/ProductDetails/ProductDetails.jsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { db, auth } from '../../config/firebase';
 import { doc, getDoc, updateDoc, arrayUnion, setDoc, collection } from 'firebase/firestore';
 import CartButton from '../HomeScreen/CartButton/CartButton';
+import Navbar from '../Navbar/Navbar';
 
 const ProductDetail = () => {
   const { productId } = useParams();
@@ -76,9 +77,10 @@ const ProductDetail = () => {
 
   return (
     <div>
+      <Navbar/>
       <h1>Product Details</h1>
       <h2>{product.Title}</h2>
-      <p>{product.Image}</p>
+      <img alt='error loading img' style={{height:"300px"}} src={product.Image}></img>
       <p>Price: ${product.Price}</p>
       <button onClick={handleAddToCart}>Add to Cart</button>
       <CartButton />

diff --git a/trek/src/components/listwindow/list.jsx b/trek/src/components/listwindow/list.jsx
@@ -1,19 +1,23 @@
-import React, { useEffect, useState } from 'react'
-import './list.css'
-import { db } from '../../config/firebase'
-import { getDocs, collection } from 'firebase/firestore'
+import React, { useEffect, useState } from 'react';
+import './list.css';
+import { db } from '../../config/firebase';
+import { getDocs, collection, query, where } from 'firebase/firestore';
 import { Link } from 'react-router-dom';
 import Navbar from '../Navbar/Navbar';
+import { useLocation } from 'react-router-dom'; // Import useLocation
 
 const List = () => {
     const [productList, setProductList] = useState([]);
-
-    const productCollectionRef = collection(db, 'products');
+    const location = useLocation(); // Use useLocation to get the current URL location
 
     useEffect(() => {
+        const categoryFilter = new URLSearchParams(location.search).get('category'); // Get the 'category' parameter from the URL
+        const productCollectionRef = collection(db, 'products');
+
         const getProductList = async () => {
             try {
-                const data = await getDocs(productCollectionRef);
+                const q = query(productCollectionRef, where('Category', '==', categoryFilter));
+                const data = await getDocs(q);
                 const filteredData = data.docs.map((doc) => ({
                     ...doc.data(),
                     id: doc.id,
@@ -24,28 +28,22 @@ const List = () => {
             }
         };
         getProductList();
-    }, [productCollectionRef]);
-
-    // const generateProductURL = (productId) => `/product/${productId}`;
+    }, [location.search]);
 
     return (
         <div>
-            <Navbar/>
+            <Navbar />
             {productList.map((product) => (
-            <Link to={`/product/${product.id}`} key={product.id} className='listcard'>
-                <img className='imgwrap' alt='img' src={product.Image}></img>
-                <div style={{ marginLeft: "10px" }}>
-                    <h1>
-                        {product.Title}
-                    </h1>
-                    <h1>
-                        {product.Price}
-                    </h1>
-                </div>
-            </Link>
+                <Link to={`/product/${product.id}`} key={product.id} className='listcard'>
+                    <img className='imgwrap' alt='img' src={product.Image}></img>
+                    <div style={{ marginLeft: "10px" }}>
+                        <h1>{product.Title}</h1>
+                        <h1>{product.Price}</h1>
+                    </div>
+                </Link>
             ))}
         </div>
-    )
-}
+    );
+};
 
-export default List
+export default List;
diff --git a/trek/src/components/loader/loader.css b/trek/src/components/loader/loader.css
@@ -0,0 +1,33 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    display: inline-block;
+    position: relative;
+  }
+  .loader::after,
+  .loader::before {
+    content: '';  
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 2px solid #FFF;
+    position: absolute;
+    left: 0;
+    top: 0;
+    animation: animloader 2s linear infinite;
+  }
+  .loader::after {
+    animation-delay: 1s;
+  }
+
+  @keyframes animloader {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
diff --git a/trek/src/components/loader/loader.jsx b/trek/src/components/loader/loader.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const loader = () => {
+  return (
+    <div className='loader'>
+
+    </div>
+  )
+}
+
+export default loader