show-to-cart

mohammadpy8 · Aug 28, 2023 · b46cb72 · b46cb72
1 parent bb047b1
commit b46cb72
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 36 deletions.
diff --git a/src/Pages/Cart.tsx b/src/Pages/Cart.tsx
@@ -1,47 +1,59 @@
-import React, { useContext } from "react";
-import "./Cart.css";
-import { AiFillStar, AiOutlineDelete, AiOutlineStar } from "react-icons/ai";
-export default function Cart() {
+import React, { useContext } from 'react'
+import './Cart.css'
+import { AiFillStar, AiOutlineDelete, AiOutlineStar } from 'react-icons/ai'
+import { CartContext } from '../context/CartContextProvider'
+import { Produts } from '../types/products.types'
+
+const Cart: React.FC<Produts> = () => {
+  const CartShop = useContext(CartContext)
+
+  const { removeAll, removeProduts } = CartShop
+
   return (
     <>
-      {true ? ( // if shoppping cart is not empty
+      {CartShop.userCart.length !== 0 ? ( // if shoppping cart is not empty
         <>
           <section className="cart-topbar">
             <p className="title">All Products In Basket:</p>
-            <button>
+            <button onClick={() => removeAll()}>
               Remove All Product <AiOutlineDelete className="delete-icon" />
             </button>
           </section>
           <main className="card-index">
-            <div className="card">
-              <img
-                src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
-                alt=""
-              />
-              <main>
-                <p>Test Title ...</p>
-                <div className="card-details">
-                  <div>
-                    <AiFillStar style={{ color: "orange" }} />
-                    <AiFillStar style={{ color: "orange" }} />
-                    <AiFillStar style={{ color: "orange" }} />
-                    <AiFillStar style={{ color: "orange" }} />
-                    <AiFillStar style={{ color: "orange" }} />
-
-                    <AiOutlineStar style={{ color: "orange" }} />
-                    <AiOutlineStar style={{ color: "orange" }} />
-                    <AiOutlineStar style={{ color: "orange" }} />
-                    <AiOutlineStar style={{ color: "orange" }} />
-                    <AiOutlineStar style={{ color: "orange" }} />
-                  </div>
-                  <p>111$</p>
-                </div>
-                <div className="product-count">
-                  <p>Count: 22</p>
+            {
+              CartShop.userCart.map(product => {
+                const { id, image, title, rating: { rate }, count, price } = product;
+                return (
+                  <div className="card">
+                  <img src={image} alt="products" />
+                  <main>
+                    <p>{title.slice(0, 15)}</p>
+                    <div className="card-details">
+                      <div>
+                        {Array(Math.ceil(rate))
+                          .fill(0)
+                          .map(() => (
+                            <AiFillStar style={{ color: 'orange' }} />
+                          ))}
+                        {Array(5 - Math.ceil(rate))
+                          .fill(0)
+                          .map(() => (
+                            <AiOutlineStar style={{ color: 'orange' }} />
+                          ))}
+                      </div>
+                      <p>{price}$</p>
+                    </div>
+                    <div className="product-count">
+                      <p>Count: {count}</p>
+                    </div>
+                    <button onClick={() => removeProduts(id)}>
+                      Remove From Basket
+                    </button>
+                  </main>
                 </div>
-                <button>Remove From Basket</button>
-              </main>
-            </div>
+                )
+              })
+            }
           </main>
         </>
       ) : (
@@ -51,5 +63,7 @@ export default function Cart() {
         </div>
       )}
     </>
-  );
+  )
 }
+
+export default Cart
diff --git a/src/components/cart/Card.tsx b/src/components/cart/Card.tsx
@@ -21,7 +21,7 @@ const Card: React.FC<Produts> = ({ id, title, image, price, rating: { rate } })
             icon: "success",
             buttons: ["اوکی", "رفتن به سبد خرید"]
         })
-            .then(result => {
+            .th4en(result => {
                 console.log(result);
                 if (result) {
                     navigate("/cart");