130 lines
No EOL
2.9 KiB
JavaScript
130 lines
No EOL
2.9 KiB
JavaScript
import { createContext, useContext, useState, useEffect } from 'react'
|
|
|
|
const AppContext = createContext()
|
|
|
|
export function AppProvider({ children }) {
|
|
const [user, setUser] = useState(null)
|
|
const [token, setToken] = useState(null)
|
|
const [cart, setCart] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
// Load user and token from localStorage on mount
|
|
useEffect(() => {
|
|
const storedToken = localStorage.getItem('token')
|
|
const storedUser = localStorage.getItem('user')
|
|
|
|
if (storedToken && storedUser) {
|
|
setToken(storedToken)
|
|
setUser(JSON.parse(storedUser))
|
|
}
|
|
|
|
const storedCart = localStorage.getItem('cart')
|
|
if (storedCart) {
|
|
setCart(JSON.parse(storedCart))
|
|
}
|
|
|
|
setLoading(false)
|
|
}, [])
|
|
|
|
// Save to localStorage whenever user, token, or cart changes
|
|
useEffect(() => {
|
|
if (user) {
|
|
localStorage.setItem('user', JSON.stringify(user))
|
|
} else {
|
|
localStorage.removeItem('user')
|
|
}
|
|
}, [user])
|
|
|
|
useEffect(() => {
|
|
if (token) {
|
|
localStorage.setItem('token', token)
|
|
} else {
|
|
localStorage.removeItem('token')
|
|
}
|
|
}, [token])
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('cart', JSON.stringify(cart))
|
|
}, [cart])
|
|
|
|
const login = (userData, authToken) => {
|
|
setUser(userData)
|
|
setToken(authToken)
|
|
}
|
|
|
|
const logout = () => {
|
|
setUser(null)
|
|
setToken(null)
|
|
setCart([])
|
|
}
|
|
|
|
const addToCart = (product) => {
|
|
setCart((prevCart) => {
|
|
const existingItem = prevCart.find((item) => item.id === product.id)
|
|
if (existingItem) {
|
|
return prevCart.map((item) =>
|
|
item.id === product.id
|
|
? { ...item, quantity: item.quantity + 1 }
|
|
: item
|
|
)
|
|
}
|
|
return [...prevCart, { ...product, quantity: 1 }]
|
|
})
|
|
}
|
|
|
|
const removeFromCart = (productId) => {
|
|
setCart((prevCart) => prevCart.filter((item) => item.id !== productId))
|
|
}
|
|
|
|
const updateCartQuantity = (productId, quantity) => {
|
|
if (quantity <= 0) {
|
|
removeFromCart(productId)
|
|
return
|
|
}
|
|
setCart((prevCart) =>
|
|
prevCart.map((item) =>
|
|
item.id === productId ? { ...item, quantity } : item
|
|
)
|
|
)
|
|
}
|
|
|
|
const clearCart = () => {
|
|
setCart([])
|
|
}
|
|
|
|
const cartTotal = cart.reduce(
|
|
(total, item) => total + item.price * item.quantity,
|
|
0
|
|
)
|
|
|
|
const cartItemCount = cart.reduce((total, item) => total + item.quantity, 0)
|
|
|
|
return (
|
|
<AppContext.Provider
|
|
value={{
|
|
user,
|
|
token,
|
|
cart,
|
|
loading,
|
|
login,
|
|
logout,
|
|
addToCart,
|
|
removeFromCart,
|
|
updateCartQuantity,
|
|
clearCart,
|
|
cartTotal,
|
|
cartItemCount,
|
|
}}
|
|
>
|
|
{children}
|
|
</AppContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useApp() {
|
|
const context = useContext(AppContext)
|
|
if (!context) {
|
|
throw new Error('useApp must be used within an AppProvider')
|
|
}
|
|
return context
|
|
} |