Added grouping basket item by categpry

coderkhalide · coderkhalide · commit df8782b4a137 · 2021-05-26T18:49:27.000+06:00
diff --git a/firebase.js b/firebase.js
@@ -1,7 +1,12 @@
 import firebase from 'firebase'
 
 const firebaseConfig = {
-    // you firebase configs
+    apiKey: "AIzaSyAbhucudE4NX2f0DOFdl3FABGKBa2urhjU",
+    authDomain: "amaz-clone-ks.firebaseapp.com",
+    projectId: "amaz-clone-ks",
+    storageBucket: "amaz-clone-ks.appspot.com",
+    messagingSenderId: "379541826028",
+    appId: "1:379541826028:web:4848bdf4e86000949a38c9"
 }
 
 const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();
diff --git a/src/components/Product.js b/src/components/Product.js
@@ -12,7 +12,7 @@ import {
 } from '@heroicons/react/outline'
 import QuickView from "./QuickView";
 
-function Product({id, title, price, description, image, shipping, colors, company, setShowCart, products}) {
+function Product({id, title, price, category, description, image, shipping, colors, company, setShowCart, products}) {
     const dispatch = useDispatch()
     const MAX_RATING = 5
     const MIN_RATING = 1
@@ -23,7 +23,7 @@ function Product({id, title, price, description, image, shipping, colors, compan
     const [added, setAdded] = useState(false)
 
     const addItemToBasket = () => {
-        const product = {id, title, price, description, image, shipping, colors, quantity: 1}
+        const product = {id, title, price, category, description, image, shipping, colors, quantity: 1}
         
         dispatch(addToBasket(product))
         setShowCart(true)
@@ -72,7 +72,7 @@ function Product({id, title, price, description, image, shipping, colors, compan
                             <p className="text-xs text-gray-500">Free Next-day delivery</p>
                         </div>
                     )}
-                    <button title="Please Click MEEEE" onClick={addItemToBasket} className="mt-auto button">{added ? 'Added' : 'Add to Busket'}</button>
+                    <button title="Add to cart" onClick={addItemToBasket} className="mt-auto button">{added ? 'Added' : 'Add to Busket'}</button>
                 </div>
                 </>
             </Fade>
diff --git a/src/pages/checkout.js b/src/pages/checkout.js
@@ -8,6 +8,7 @@ import { useSession } from "next-auth/client"
 import { loadStripe } from '@stripe/stripe-js';
 import axios from 'axios'
 import Head from "next/head"
+import { useEffect, useState } from "react"
 
 const stripePromise = loadStripe(process.env.stripe_public_key);
 
@@ -16,7 +17,7 @@ function Checkout({products}) {
     const items = useSelector(selectItems)
     const totalPrice = useSelector(selectTotal)
     const selectTotalItem = useSelector(selectTotalItems)
-
+    const [categorys, setCategorys] = useState([])
 
     const createCheckoutSession = async () => {
         const stripe = await stripePromise
@@ -36,6 +37,12 @@ function Checkout({products}) {
         if (result.error) alert(result.error.message)
     }
 
+    useEffect(() => {
+        const allCategories = items.map(item => item.category)
+        const unique = [...new Set(allCategories)]
+        setCategorys(unique)
+    }, [items])
+
     return (
         <>
         <Head>
@@ -54,9 +61,20 @@ function Checkout({products}) {
                             {!!items.length ? "Your Shopping Basket" : "Your Busket is emty"}
                         </h1>
 
-                        {!!items.length && items.map(item => (
-                            <CheckoutProduct key={item.id} {...item} />
-                        ))}
+                        <div className="mb-5">
+                            {!!categorys.length && categorys.map(category => (
+                                <>
+                                <h1 className="text-xl pb-4 font-medium">
+                                    {category}
+                                </h1>
+                                <div className="mb-14">
+                                    {!!items.length && items.filter(item => item.category === category).map(item => 
+                                        <CheckoutProduct key={item.id} {...item} />
+                                    )}
+                                </div>
+                                </>
+                            ))}
+                        </div>
                     </div>
 
                 </div>
