https://github.com/erhantezer/cart-reducer
https://github.com/erhantezer/cart-reducer
api-data context html-css-javascript loading mock-data reactjs reducer svg-images vitejs
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/erhantezer/cart-reducer
- Owner: erhantezer
- Created: 2023-04-20T20:45:53.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T11:11:10.000Z (about 3 years ago)
- Last Synced: 2025-06-30T15:51:30.152Z (12 months ago)
- Topics: api-data, context, html-css-javascript, loading, mock-data, reactjs, reducer, svg-images, vitejs
- Language: JavaScript
- Homepage: https://cart-reducer-xi.vercel.app
- Size: 78.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CART
## App.jsx
```js
import Home from "./pages/Home";
function App() {
return (
<>
>
)
}
export default App;
```
## Home:jsx
```js
import Navbar from '../components/Navbar';
import CarContainer from '../components/cart/CarContainer';
import { useGlobalContext } from '../context';
const Home = () => {
const { loading } = useGlobalContext();
return (
<>
{loading ?
(
Loading...
) : (
)
}
>
)
}
export default Home;
```
## Navbar.jsx
```js
import { useGlobalContext } from "../context";
const Navbar = () => {
const {amount} = useGlobalContext()
return (
useReducer
{amount}
)
}
export default Navbar;
```
## CartContainer.jsx
```js
import { useGlobalContext } from "../../context"
import CartItem from "./CartItem"
const CarContainer = () => {
const { cart, total, clearCart, fetchData } = useGlobalContext()
if (cart.length === 0) {
return (
your bag
is currently empty
fetchData()}>
reloaded
)
}
return (
your bag
{cart.map((item) => {
return
})}
total ${total}
clearCart()}>
clear cart
)
}
export default CarContainer
```
##
```js
import { useGlobalContext } from "../../context"
const CartItem = ({ id, img, title, price, amount }) => {
const {remove, increase, decrease, toggleAmount} = useGlobalContext();
return (
{title}
${price}
remove(id)}>
remove
toggleAmount(id, 'inc')}>
{amount}
toggleAmount(id, 'dec')}>
)
}
export default CartItem;
```
## context.jsx
```js
import { createContext, useContext, useEffect, useReducer } from "react";
import reducer from './reducer';
// import cartItems from "./helper/data";
import axios from "axios";
const AppContext = createContext();
export const useGlobalContext = () => {
return useContext(AppContext);
};
const initialState = {
loading: false,
cart: [],
total: 0,
amount: 0,
}
const url = 'https://course-api.com/react-useReducer-cart-project';
export const AppProvider = ({ children }) => {
// const [loading, setLoading] = useState(false);
const [state, dispatch] = useReducer(reducer, initialState);
const clearCart = () => {
dispatch({ type: "CLEAR_CART" })
};
const remove = (id) => {
dispatch({ type: "REMOVE_CART", payload: id })
};
const increase = (id) => {
dispatch({ type: "INCREASE", payload: id })
};
const decrease = (id) => {
dispatch({ type: "DECREASE", payload: id })
};
const toggleAmount = (id, type) => {
dispatch({ type: "TOGGLE_AMOUNT", payload: { id, type } })
};
const fetchData = async () => {
dispatch({ type: "LOADING" });
const { data } = await axios(url)
dispatch({ type: "DISPLAY_ITEMS", payload: data })
};
useEffect(() => {
fetchData();
}, [])
useEffect(() => {
dispatch({ type: "GET_TOTALS" })
}, [state.cart]);
return (
{children}
)
};
```
## reducer.jsx
```js
export default (state, action) => {
if (action.type === "LOADING") {
return { ...state, loading: true }
};
if (action.type === "CLEAR_CART") {
return { ...state, cart:[] }
};
if (action.type === 'REMOVE_CART') {
return { ...state, cart: state.cart.filter((cartItem) => cartItem.id !== action.payload)}
};
if (action.type === 'DISPLAY_ITEMS') {
return { ...state, cart: action.payload, loading: false}
};
if (action.type === 'GET_TOTALS') {
let { total, amount } = state.cart.reduce(
(cartTotal, cartItem) => {
const { price, amount } = cartItem
const itemTotal = price * amount
cartTotal.total += itemTotal
cartTotal.amount += amount
return cartTotal
},
{
total: 0,
amount: 0,
}
)
total = parseFloat(total.toFixed(2))
return { ...state, total, amount }
}
if (action.type === 'INCREASE') {
let tempCart = state.cart.map((cartItem) => {
if (cartItem.id === action.payload) {
return { ...cartItem, amount: cartItem.amount + 1 }
}
return cartItem
})
return { ...state, cart: tempCart }
}
if (action.type === 'DECREASE') {
let tempCart = state.cart
.map((cartItem) => {
if (cartItem.id === action.payload) {
return { ...cartItem, amount: cartItem.amount - 1 }
}
return cartItem
})
.filter((cartItem) => cartItem.amount !== 0)
return { ...state, cart: tempCart }
}
if (action.type === 'TOGGLE_AMOUNT') {
let tempCart = state.cart
.map((cartItem) => {
if (cartItem.id === action.payload.id) {
if (action.payload.type === 'inc') {
return { ...cartItem, amount: cartItem.amount + 1 }
}
if (action.payload.type === 'dec') {
return { ...cartItem, amount: cartItem.amount - 1 }
}
}
return cartItem
})
.filter((cartItem) => cartItem.amount !== 0)
return { ...state, cart: tempCart }
}
throw new Error('no matching action type')
}
```
```md
│ App.jsx
│ context.jsx
│ index.css
│ main.jsx
│ reducer.jsx
│
├───assets
│ react.svg
│
├───components
│ │ Navbar.jsx
│ │
│ └───cart
│ CarContainer.jsx
│ CartItem.jsx
│
├───helper
│ data.jsx
│
└───pages
Home.jsx
```