Fix conf

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon server/index.js",
     "start": "cross-env NODE_ENV=production node server/index.js",
-    "build": "node server/database/config/build.js",
-    "seed": "node server/database/config/seed.js"
+    "build": "cross-env NODE_ENV=production npm i && cd public/ && npm i && npm run build",
+    "seed": "cross-env NODE_ENV=production node server/database/config/seed.js"
   },
   "dependencies": {
     "bcrypt": "^5.1.0",

public/src/Components/Cart/Cart.jsx

@@ -1,97 +1,101 @@
 import { useState, useEffect } from 'react';
 import './cart.css';
 import CartItem from './CartItem';
-import { Link ,NavLink } from 'react-router-dom';
-
-
-const data = [
-  {
-  id: '1',
-  image: './images/product-03.jpg',
-  name: 'IPhone',
-  category: 'Mobile',
-  price: 350,
-  totalPrice: 350,
-  quantity: 1,
-  },
-  {
-    id: '2',
-    image: './images/product-03.jpg',
-    name: 'IPhone1',
-    category: 'Mobile1',
-    price: 250,
-    totalPrice: 250,
-  quantity: 1,
-
-    },
-    {
-      id: '3',
-      image: './images/product-03.jpg',
-      name: 'IPhone2',
-      category: 'Mobile2',
-      price: 220,
-      totalPrice: 220,
-  quantity: 1,
-
-    },
-]
+import { NavLink } from 'react-router-dom';
+import axios from 'axios';
 
 const Cart = () => {
-
-
- const [cardsItems, setCardsItems] = useState([]);
-
-
- useEffect(() => {
-  setCardsItems(data)
- }, [])
-
-const removeItem = ({id}) => {
-  const result = cardsItems.filter(item => item.id !== id);
-  setCardsItems(result)
-}
-
-const handleAdd = ({id}) => {
-  const result = cardsItems.map(item => {
-    if(item.id === id) {
-      return {...item, quantity: item.quantity + 1, totalPrice: item.totalPrice+item.price}
-    }else {
-      return item
-    }
-  });
-  setCardsItems(result)
-}
-const handleSubtract = ({id}) => {
-  const selectedItem = cardsItems.find(item => item.id === id);
-  if(selectedItem.quantity === 1) {
-    return removeItem({id})
-  }
-  const result = cardsItems.map(item => {
-    if(item.id === id) {
-      return {...item, quantity: item.quantity - 1,  totalPrice: item.totalPrice-item.price}
-    }else {
-      return item
+  const [cardsItems, setCardsItems] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get('/api/v1/cart')
+      .then((res) => {
+        if (res.status === 200) {
+          setCardsItems(res.data);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  const removeItem = ({ id }) => {
+    axios.post(`/api/v1/cart/delete/${id}`).then((res) => {
+      console.log(res);
+      if (res.status === 200) {
+        const result = cardsItems.filter((item) => item.id !== id);
+        setCardsItems(result);
+      } else {
+        console.log('error');
+      }
+    });
+  };
+
+  const handleAdd = ({ id }) => {
+    axios.post(`/api/v1/cart/increase/${id}`).then((res) => {
+      console.log(res);
+      if (res.status === 200) {
+        const result = cardsItems.map((item) => {
+          if (item.id === id) {
+            return {
+              ...item,
+              quantity: item.quantity + 1,
+              price: +item.price + item.price,
+            };
+          } else {
+            return item;
+          }
+        });
+        setCardsItems(result);
+      } else {
+        console.log('error');
+      }
+    });
+  };
+  const handleSubtract = ({ id }) => {
+    const selectedItem = cardsItems.find((item) => item.id === id);
+    if (selectedItem.quantity === 1) {
+      return removeItem({ id });
     }
-  });
-  setCardsItems(result)
-}
-
-
-
- const handleItemsNumber = () => {
-  const totalItems = cardsItems.reduce((sum, currentValue) => {
-    return sum + currentValue.quantity
-  }, 0)
-  return totalItems
- }
-
- const handleTotalPrice = () => {
-  const totalItems = cardsItems.reduce((sum, currentValue) => {
-    return sum + currentValue.totalPrice
-  }, 0)
-  return totalItems
- }
-
+    axios.post(`/api/v1/cart/decrease/${id}`).then((res) => {
+      console.log(res);
+      if (res.status === 200) {
+        const selectedItem = cardsItems.find((item) => item.id === id);
+        if (selectedItem.quantity === 1) {
+          return removeItem({ id });
+        }
+        const result = cardsItems.map((item) => {
+          if (item.id === id) {
+            return {
+              ...item,
+              quantity: item.quantity - 1,
+              totalPrice: +item.price * +item.quantity - +item.price,
+            };
+          } else {
+            return item;
+          }
+        });
+        setCardsItems(result);
+      } else {
+        console.log('error');
+      }
+    });
+  };
+
+  const handleItemsNumber = () => {
+    const totalItems = cardsItems.reduce((sum, currentValue) => {
+      return sum + currentValue.quantity;
+    }, 0);
+    return totalItems;
+  };
+
+  const handleTotalPrice = () => {
+    const totalItems = cardsItems.reduce((sum, currentValue) => {
+      return sum + currentValue.price * currentValue.quantity;
+    }, 0);
+    return totalItems;
+  };
 
   return (
     <div>
@@ -111,9 +115,16 @@ const handleSubtract = ({id}) => {
             </div>
 
             <div className="product-cart-info">
-              {cardsItems.map(item =>  <CartItem handleSubtract={handleSubtract} handleAdd={handleAdd} removeItem={removeItem} key={item.id}  {...item}/>)}
-
-
+              {cardsItems.map((item) => (
+                <CartItem
+                  handleSubtract={handleSubtract}
+                  handleAdd={handleAdd}
+                  removeItem={removeItem}
+                  key={item.id}
+                  {...item}
+                  totalPrice={+item.price * +item.quantity}
+                />
+              ))}
             </div>
           </div>
           <NavLink to="/product" className="continue-shop">
@@ -144,4 +155,4 @@ const handleSubtract = ({id}) => {
   );
 };
 
-export default Cart;
+export default Cart;

public/src/Components/Cart/CartItem.jsx

@@ -1,36 +1,64 @@
-const CartItem = ({name, category, totalPrice, id, quantity, removeItem, handleAdd, handleSubtract}) => {
-    return <>
-          <div className="product-details">
-            <img
-              src="./images/product-03.jpg"
-              alt=""
-              className="product-cart-img"
-            />
+const CartItem = ({
+  name,
+  category,
+  totalPrice,
+  id,
+  quantity,
+  removeItem,
+  handleAdd,
+  handleSubtract,
+}) => {
+  return (
+    <>
+      <div className="product-details">
+        <img
+          src="./images/product-03.jpg"
+          alt=""
+          className="product-cart-img"
+        />
 
-            <div className="item-details">
-              <h3>{name}</h3>
-              <span>{category}</span>
-              {/* suppose to be button */}
-              <div className="remove_button" onClick={() => {
-                removeItem({id})
-              }}>Remove</div> 
-            </div>
+        <div className="item-details">
+          <h3>{name}</h3>
+          <span>{category}</span>
+          {/* suppose to be button */}
+          <div
+            className="remove_button"
+            onClick={() => {
+              removeItem({ id });
+            }}
+          >
+            Remove
           </div>
+        </div>
+      </div>
 
-          <div className="quantity">
-            <button className="dec" style={{color: 'red', fontSize: 24}} onClick={() => {
-              handleSubtract({id})
-            }}>-</button>
-            <span className="quantity-num">{quantity}</span>
-            <button className="inc" style={{color: 'red'}} onClick={() => {
-              handleAdd({id})
-            }}>+</button>
-          </div>
+      <div className="quantity">
+        <button
+          className="dec"
+          style={{ color: 'red', fontSize: 24 }}
+          onClick={() => {
+            handleSubtract({ id });
+          }}
+        >
+          -
+        </button>
+        <span className="quantity-num">{quantity}</span>
+        <button
+          className="inc"
+          style={{ color: 'red' }}
+          onClick={() => {
+            handleAdd({ id });
+          }}
+        >
+          +
+        </button>
+      </div>
 
-          <div className="price">
-            <h3>${totalPrice}</h3>
-      </div>  
+      <div className="price">
+        <h3>${totalPrice}</h3>
+      </div>
     </>
-}
+  );
+};
 
 export default CartItem;