done cart reducer

Author: latifii

13-cart/src/App.js

@@ -1,6 +1,17 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import CartContainer from './components/CartContainer'
+import Navbar from './components/Navbar'
+import { calculateTotals } from './features/cart/cartSlice'
 
 function App() {
+  const dispatch = useDispatch()
+  const { cartItems } = useSelector((store) => store.cart)
+
+  useEffect(() => {
+    dispatch(calculateTotals())
+  }, [cartItems])
+
   // if (loading) {
   //   return (
   //     <div className='loading'>
@@ -10,7 +21,8 @@ function App() {
   // }
   return (
     <main>
-      <p>hiii</p>
+      <Navbar />
+      <CartContainer />
     </main>
   )
 }

13-cart/src/CartContainer.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { clearCart } from '../features/cart/cartSlice'
+import CartItem from './CartItem'
+
+const CartContainer = () => {
+  const { cartItems, total, amount } = useSelector((store) => store.cart)
+  const dispatch = useDispatch()
+
+  if (amount < 1) {
+    return (
+      <section className='cart'>
+        <header>
+          <h2>your bag</h2>
+          <h4 className='empty-cart'>is currently empty</h4>
+        </header>
+      </section>
+    )
+  }
+
+  return (
+    <section className='cart'>
+      <header>
+        <h2>your bag</h2>
+      </header>
+      <div>
+        {cartItems.map((item) => {
+          return <CartItem key={item.id} {...item} />
+        })}
+      </div>
+      <footer>
+        <hr />
+        <div className='cart-total'>
+          <h4>
+            total <span>${total.toFixed(2)}</span>
+          </h4>
+        </div>
+        <button className='btn clear-btn' onClick={() => dispatch(clearCart())}>
+          clear cart
+        </button>
+      </footer>
+    </section>
+  )
+}
+
+export default CartContainer

13-cart/src/CartItem.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { removeItem, increase, decrease } from '../features/cart/cartSlice'
+import { ChevronDown, ChevronUp } from '../icons'
+
+const CartItem = ({ title, price, img, amount, id }) => {
+  const dispatch = useDispatch()
+
+  return (
+    <article className='cart-item'>
+      <img src={img} alt={title} />
+      <div>
+        <h4>{title}</h4>
+        <h4 className='item-price'>${price}</h4>
+        <button className='remove-btn' onClick={() => dispatch(removeItem(id))}>
+          remove
+        </button>
+      </div>
+      <div>
+        <button
+          className='amount-btn'
+          onClick={() => dispatch(increase({ id }))}
+        >
+          <ChevronUp />
+        </button>
+        <p className='amount'>{amount}</p>
+        <button
+          className='amount-btn'
+          onClick={() => {
+            if (amount === 1) {
+              dispatch(removeItem(id))
+              return
+            }
+            dispatch(decrease({ id }))
+          }}
+        >
+          <ChevronDown />
+        </button>
+      </div>
+    </article>
+  )
+}
+
+export default CartItem

13-cart/src/Navbar.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { CartIcon } from '../icons'
+
+const Navbar = () => {
+  const { amount } = useSelector((store) => store.cart)
+
+  return (
+    <nav>
+      <div className='nav-center'>
+        <h3>Shopping</h3>
+        <div className='nav-container'>
+          <CartIcon />
+          <div className='amount-container'>
+            <p className='total-amount'>{amount}</p>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

13-cart/src/components/CartContainer.js

@@ -1,10 +1,11 @@
+// eslint-disable-next-line import/no-anonymous-default-export
 export default [
   {
     id: 1,
     title: 'Samsung Galaxy S7',
     price: 599.99,
     img: 'https://dl.airtable.com/.attachments/91ee456448cef47deec553a2ea3fa8ad/b08bec68/phone-2_ohtt5s.png',
-    amount: 1,
+    amount: 4,
   },
   {
     id: 2,
@@ -20,4 +21,4 @@ export default [
     img: 'https://dl.airtable.com/.attachments/bae9208dc34f35128749ecda5b999e84/337c285d/phone-3_h2s6fo.png',
     amount: 1,
   },
-];
+]

13-cart/src/components/CartItem.js

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit'
 import data from '../../data'
 
 const initialState = {
-  cartItems: [],
+  cartItems: data,
   amount: 4,
   total: 0,
   isLoading: true,
@@ -11,7 +11,40 @@ const initialState = {
 const cartSlice = createSlice({
   name: 'cart',
   initialState,
-  reducers: {},
+  reducers: {
+    clearCart: (state) => {
+      state.cartItems = []
+    },
+
+    removeItem: (state, action) => {
+      state.cartItems = state.cartItems.filter(
+        (item) => item.id !== action.payload
+      )
+    },
+
+    increase: (state, { payload }) => {
+      const cartItem = state.cartItems.find((item) => item.id === payload.id)
+      cartItem.amount = cartItem.amount + 1
+    },
+
+    decrease: (state, { payload }) => {
+      const cartItem = state.cartItems.find((item) => item.id === payload.id)
+      cartItem.amount = cartItem.amount - 1
+    },
+
+    calculateTotals: (state) => {
+      let amount = 0
+      let total = 0
+      state.cartItems.forEach((item) => {
+        amount += item.amount
+        total += item.amount * item.price
+      })
+      state.amount = amount
+      state.total = total
+    },
+  },
 })
 
+export const { clearCart, removeItem, increase, decrease, calculateTotals } =
+  cartSlice.actions
 export default cartSlice.reducer