initial commit

src/hooks/usePictarineApi.tsx

@@ -0,0 +1,153 @@
+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
+	}
+}