fix the signup bug relates #74

client/src/Components/Cart/index.jsx

@@ -3,6 +3,7 @@ import { useNavigate, useOutletContext } from 'react-router-dom';
 import '../../global_style.css';
 import './style.css';
 import CartItem from '../CartItem';
+import EmptyCart from '../CartItem/EmptyCart';
 
 const getCart = () => fetch('/api/v1/cart').then((data) => data.json());
 
@@ -25,9 +26,18 @@ function Cart() {
   return (
     <main className="wrapper">
       <section className="content">
-        {cartItem.map((item) => (
-          <CartItem key={item.id} data={item} />
-        ))}
+        {cartItem.length ? (
+          cartItem.map((item) => (
+            <CartItem
+              key={item.id}
+              data={item}
+              id={item.id}
+              setCartItem={setCartItem}
+            />
+          ))
+        ) : (
+          <EmptyCart />
+        )}
       </section>
     </main>
   );

client/src/Components/Cart/style.css

@@ -1,9 +1,23 @@
 .wrapper {
-    padding: 0 121px;
+    padding: 0 120px;
     background-color: var(--bg-dark-gray);
 }
 
 .content {
     min-height: 100vh;
     padding-top: 44px;
+    display: flex;
+    flex-direction: column;
+}
+
+@media only screen and (max-width: 720px)  {
+    .wrapper {
+        padding: 0 64px;
+    }
+}
+
+@media only screen and (max-width: 420px)  {
+    .wrapper {
+        padding: 0 24px;
+    }
 }

client/src/Components/CartItem/EmptyCart.jsx

@@ -0,0 +1,17 @@
+function EmptyCart() {
+  return (
+    <div className="cart__item">
+      <div className="details__box">
+        <div>
+          <h3>Waiting for you to start shopping!</h3>
+          <p>
+            you should add some items to your cart then you will be able to see
+            them here
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EmptyCart;

client/src/Components/CartItem/index.jsx

@@ -8,7 +8,22 @@ import { useState, useEffect } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-function CartItem({ data }) {
+const getCart = () => fetch('/api/v1/cart').then((data) => data.json());
+
+const deleteCart = ({ id, setCartItem }) => {
+  fetch(`/api/v1/cart/${id}`, {
+    method: 'delete',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((res) => res.json())
+    .then(() => getCart())
+    .then((data) => {
+      setCartItem(data);
+    });
+};
+function CartItem({ data, setCartItem }) {
   const [state, setState] = useState(data);
   const notify = () => toast('saved successfully!');
   const { image, name, timeadded, price, quantity, id } = state;
@@ -34,6 +49,10 @@ function CartItem({ data }) {
     }
   }, []);
 
+  const handleDelete = () => {
+    deleteCart({ id, userId: data.userId, setCartItem });
+  };
+
   const handleSubmit = () => {
     fetch('/api/v1/cart', {
       method: 'PATCH',
@@ -44,8 +63,7 @@ function CartItem({ data }) {
         productId: id,
         q: quantity,
       }),
-    }).then(() => notify);
-    // notify();
+    }).then(() => notify());
   };
 
   return (
@@ -72,7 +90,7 @@ function CartItem({ data }) {
         </p>
       </div>
 
-      <div className="img__counter">
+      <div className="img__counter buttons_container">
         <div className="control">
           <p>${price * quantity}</p>
           <div>
@@ -86,7 +104,7 @@ function CartItem({ data }) {
               onClick={() => handleQuantity('-')}
             />
           </div>
-          <RiDeleteBinFill className="delete__btn" />
+          <RiDeleteBinFill className="delete__btn" onClick={handleDelete} />
         </div>
 
         <div className="save__btn">
@@ -95,7 +113,18 @@ function CartItem({ data }) {
           </button>
         </div>
       </div>
-      <ToastContainer />
+      <ToastContainer
+        position="top-center"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        toastStyle={{ backgroundColor: 'black', color: '#14a44d' }}
+      />
     </div>
   );
 }

client/src/Components/CartItem/style.css

@@ -1,15 +1,15 @@
 .cart__item {
-    height: 300px;
+    min-height: 300px;
     background-color: var(--bg-light-gray);
     border-radius: 26px;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    margin: 0 121px;
     margin-bottom: 18px;
     display: flex;
-    justify-content: center;
-    gap: 2rem;
+    flex-direction: row;
     padding: 2rem;
     transition: 0.3s;
+    width: 100%;
+    position: relative;
 }
 
 .img__counter {
@@ -18,19 +18,28 @@
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
+    margin-right: 24px;
 }
 .img__counter img{
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 200px;
 }
 
 .details__box {
-    width: 50%;
+    flex: 1;
     display: flex;
+    margin-right: 24px;
     flex-direction: column;
     justify-content: space-around;
 }
 
+.details__box div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
 .details__box div h3{
     margin-bottom: 20px;
 }
@@ -54,6 +63,9 @@
     color: var(--danger-color);
     font-size: 2rem;
     cursor: pointer;
+    position: absolute;
+    top: 24px;
+    right: 24px;
 }
 
 .btn {
@@ -73,9 +85,60 @@
     outline: none;
     border: none;
     font-size: 1rem;
+    border-radius: 12px;
+    transition: .3s;
 }
 
 .save__btn button:hover {
-    color: var(--success-color);
-    background-color: var(--bg-light-gray);
-}
+    color: var(--bg-light-gray);
+    background-color: var(--success-color);
+}
+
+
+@media only screen and (max-width: 720px)  {
+    .cart__item {
+        background-color: var(--bg-light-gray);
+        border-radius: 26px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        margin-bottom: 18px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 2rem;
+        transition: 0.3s;
+    }
+
+    .details__box div {
+        align-items: center;
+    }
+    .details__box div p {
+        text-align: center;
+        margin-bottom: 0;
+        margin-top: 0;
+    }
+    .details__box div h3 {
+        margin-bottom: 12px;
+    }
+    .details__box  p {
+        text-align: center;
+        margin: 12px 0 24px 0;
+    }
+    .buttons_container {
+        width: 80%;
+    }
+    .save__btn {
+        margin-top: 1rem;
+        width: 100%;
+    }
+    .save__btn button {
+        width: 100%;
+        border-radius: 12px;
+    }
+} 
+
+
+@media only screen and (max-width: 420px)  {
+    .cart__item {
+        padding: 1rem;
+    }
+} 

client/src/Components/ProductCard/index.jsx

@@ -5,28 +5,37 @@ import './style.css';
 
 import { BsCartPlus, BsCartFill, BsQuestionCircleFill } from 'react-icons/bs';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import NotFound from './broken1.png';
 
 /// products user => token => id // cart // products => {incart: true}
 export default function ProductCart(props) {
-  const { productData } = props;
+  const { productData, user } = props;
+  console.log('dkjfhhhhhhhhhhhhhhhhhh', productData);
   const [inCart, setInCart] = useState(productData.inCart);
+  const navigate = useNavigate();
+  console.log(user);
   const iconStyle = {
-    color: '#6fa5a3',
+    color: '#20d1cb',
     fontSize: '2rem',
   };
   const addToCart = () => {
-    fetch(`/api/v1/cart`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        productId: productData.id,
-      }),
-    })
-      .then((res) => res.json())
-      .then(console.log)
-      .then(() => setInCart(true));
+    if (user.loggedIn) {
+      fetch(`/api/v1/cart`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          productId: productData.id,
+        }),
+      })
+        .then((res) => res.json())
+        .then(console.log)
+        .then(() => setInCart(true));
+    } else {
+      navigate('/login');
+    }
   };
   const removeFromCart = () => {
     fetch(`/api/v1/cart/${productData.id}`, {
@@ -36,18 +45,23 @@ export default function ProductCart(props) {
       },
     })
       .then((res) => res.json())
-      .then(console.log)
       .then(() => {
         setInCart(false);
       });
   };
-
+  const viewProduct = () => {
+    navigate(`/products/${productData.id}`);
+  };
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div className="card-container">
       <img
         className="product-image"
-        src={productData.image}
+        src={productData.image || NotFound}
         alt={productData.name}
+        onError={(e) => {
+          e.target.src = NotFound;
+        }}
       />
       <div className="card-category">
         <p>{productData.category_name}</p>
@@ -69,7 +83,10 @@ export default function ProductCart(props) {
           <h3 className="price">{productData.price}$</h3>
         </div>
         <div className="cart-icon">
-          <BsQuestionCircleFill style={iconStyle} />
+          <BsQuestionCircleFill
+            style={iconStyle}
+            onClick={() => viewProduct()}
+          />
         </div>
       </div>
     </div>