154 lines
3.4 KiB
TypeScript
154 lines
3.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import type { Product, ProductResponse } from "../types";
|
|
import type { CartSession } from "../types/cart";
|
|
|
|
const apiEndpoint = 'https://web-ecommerce.web-055.workers.dev';
|
|
|
|
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uSWQiOiIyZWFmYTE0NS0xMWUwLTQ2ZDctODI3ZS03ZjczNzAzODJjNjUiLCJleHAiOjE5MjE4Mjk2MTR9.1vEBPmjEBGltJk5TYLjZLBtHasENWLFb4VwAf-hsgiE";
|
|
|
|
export const usePictarineApi = () => {
|
|
|
|
const [products, setProducts] = useState<Product[] | undefined>(undefined);
|
|
const [productsLoading, setProductsLoading] = useState<boolean>(false);
|
|
const [productsError, setProductsError] = useState<Error | undefined>(undefined);
|
|
|
|
const [cart, setCart] = useState<CartSession | undefined>(undefined)
|
|
const [cartLoading, setCartLoading] = useState<boolean>(false)
|
|
const [cartError, setCartError] = useState<Error | undefined>(undefined)
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
|
|
try {
|
|
setProductsLoading(true);
|
|
setProductsError(undefined);
|
|
const response = await fetch(`${apiEndpoint}/products`);
|
|
const json = await response.json() as ProductResponse;
|
|
setProductsLoading(false);
|
|
setProducts(json.products);
|
|
} catch(error) {
|
|
setProductsError(error as Error);
|
|
}
|
|
|
|
})()
|
|
}, [])
|
|
|
|
const reloadCart = async () => {
|
|
|
|
try {
|
|
setCartLoading(true);
|
|
setCartError(undefined);
|
|
const response = await fetch(`${apiEndpoint}/cart`, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`
|
|
}});
|
|
const json = await response.json() as CartSession;
|
|
setCartLoading(false);
|
|
setCart(json);
|
|
} catch(error) {
|
|
setCartError(error as Error);
|
|
}
|
|
|
|
}
|
|
|
|
useEffect( () => {
|
|
reloadCart();
|
|
}, [])
|
|
|
|
const addToCart = async (productId: string, quantity: number) => {
|
|
|
|
try {
|
|
setCartLoading(true);
|
|
await fetch(`${apiEndpoint}/cart/add`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({
|
|
productId,
|
|
quantity
|
|
})
|
|
})
|
|
reloadCart();
|
|
} catch(error) {
|
|
setCartError(error as Error);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const updateCartQuantity = async (productId: string, quantity: number) => {
|
|
|
|
try {
|
|
setCartLoading(true);
|
|
await fetch(`${apiEndpoint}/cart/update`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({
|
|
productId,
|
|
quantity
|
|
})
|
|
})
|
|
reloadCart();
|
|
} catch(error) {
|
|
setCartError(error as Error);
|
|
}
|
|
|
|
}
|
|
|
|
const removeItemFromCart = async (productId: string) => {
|
|
try {
|
|
setCartLoading(true);
|
|
await fetch(`${apiEndpoint}/cart/remove`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({
|
|
productId,
|
|
})
|
|
})
|
|
reloadCart();
|
|
} catch(error) {
|
|
setCartError(error as Error);
|
|
}
|
|
|
|
}
|
|
|
|
const clearCart = async () => {
|
|
try {
|
|
setCartLoading(true);
|
|
await fetch(`${apiEndpoint}/cart/clear`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
})
|
|
reloadCart();
|
|
} catch(error) {
|
|
setCartError(error as Error);
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
|
products,
|
|
productsLoading,
|
|
productsError,
|
|
cart,
|
|
cartError,
|
|
cartLoading,
|
|
addToCart,
|
|
updateCartQuantity,
|
|
removeItemFromCart,
|
|
clearCart
|
|
}
|
|
}
|