diff --git a/src/components/AddProductToCart/AddProductToCart.tsx b/src/components/AddProductToCart/AddProductToCart.tsx index c3b3b5262..32958439f 100755 --- a/src/components/AddProductToCart/AddProductToCart.tsx +++ b/src/components/AddProductToCart/AddProductToCart.tsx @@ -11,10 +11,10 @@ type AddProductToCartProps = { }; export default function AddProductToCart({ product }: AddProductToCartProps) { - const { data = [], isFetching } = useCart(); + const { data, isFetching } = useCart(); const { mutate: upsertCart } = useUpsertCart(); const invalidateCart = useInvalidateCart(); - const cartItem = data.find((i) => i.product.id === product.id); + const cartItem = data?.cart.items.find((i) => i.product.id === product.id); const addProduct = () => { upsertCart( diff --git a/src/components/MainLayout/components/Cart.tsx b/src/components/MainLayout/components/Cart.tsx index e0aba0d70..f5561d1d4 100755 --- a/src/components/MainLayout/components/Cart.tsx +++ b/src/components/MainLayout/components/Cart.tsx @@ -5,8 +5,11 @@ import { Link } from "react-router-dom"; import { useCart } from "~/queries/cart"; export default function Cart() { - const { data = [] } = useCart(); - const badgeContent = data.length || undefined; + const { data } = useCart(); + const badgeContent = data?.cart.items.reduce( + (acc, item) => acc + item.count, + 0 + ); return ( diff --git a/src/components/pages/PageCart/PageCart.tsx b/src/components/pages/PageCart/PageCart.tsx index 12e201c91..dbb939590 100755 --- a/src/components/pages/PageCart/PageCart.tsx +++ b/src/components/pages/PageCart/PageCart.tsx @@ -43,7 +43,7 @@ const Success = () => ( const steps = ["Review your cart", "Shipping address", "Review your order"]; export default function PageCart() { - const { data = [] } = useCart(); + const { data } = useCart(); const { mutate: submitOrder } = useSubmitOrder(); const invalidateCart = useInvalidateCart(); const [activeStep, setActiveStep] = React.useState( @@ -51,7 +51,7 @@ export default function PageCart() { ); const [address, setAddress] = useState
(initialAddressValues); - const isCartEmpty = data.length === 0; + const isCartEmpty = data?.total === 0; const handleNext = () => { if (activeStep !== CartStep.ReviewOrder) { @@ -59,7 +59,7 @@ export default function PageCart() { return; } const values = { - items: data.map((i) => ({ + items: data?.cart.items.map((i) => ({ productId: i.product.id, count: i.count, })), @@ -100,7 +100,7 @@ export default function PageCart() { {isCartEmpty && } {!isCartEmpty && activeStep === CartStep.ReviewCart && ( - + )} {activeStep === CartStep.Address && ( )} {activeStep === CartStep.ReviewOrder && ( - + )} {activeStep === CartStep.Success && } {!isCartEmpty && diff --git a/src/constants/apiPaths.ts b/src/constants/apiPaths.ts index 58ebab3d6..419cc4cfc 100755 --- a/src/constants/apiPaths.ts +++ b/src/constants/apiPaths.ts @@ -2,10 +2,12 @@ const prefix = import.meta.env.VITE_API_PREFIX || ".execute-api2"; const API_PATHS = { product: "https://6jeal9ve0d.execute-api.us-east-1.amazonaws.com/prod", - order: `https://${prefix}.eu-west-1.amazonaws.com/dev`, + order: `https://gmee5dd5ja.execute-api.us-east-1.amazonaws.com/prod/api`, + // order: "http://localhost:4000/api", import: "https://i6gsu0m0sg.execute-api.us-east-1.amazonaws.com/prod", bff: `https://${prefix}.eu-west-1.amazonaws.com/dev`, - cart: `https://${prefix}.eu-west-1.amazonaws.com/dev`, + cart: `https://gmee5dd5ja.execute-api.us-east-1.amazonaws.com/prod/api`, + // cart: "http://localhost:4000/api", }; export default API_PATHS; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index f9b51ea8d..189687820 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,7 +1,6 @@ import { rest } from "msw"; import API_PATHS from "~/constants/apiPaths"; -import { availableProducts, orders, products, cart } from "~/mocks/data"; -import { CartItem } from "~/models/CartItem"; +import { availableProducts, orders, products } from "~/mocks/data"; import { Order } from "~/models/Order"; import { AvailableProduct, Product } from "~/models/Product"; @@ -33,29 +32,29 @@ export const handlers = [ ctx.json(product) ); }), - rest.get(`${API_PATHS.cart}/profile/cart`, (req, res, ctx) => { - return res(ctx.status(200), ctx.delay(), ctx.json(cart)); - }), - rest.put(`${API_PATHS.cart}/profile/cart`, (req, res, ctx) => { - return res(ctx.status(200)); - }), - rest.get(`${API_PATHS.order}/order`, (req, res, ctx) => { - return res(ctx.status(200), ctx.delay(), ctx.json(orders)); - }), - rest.put(`${API_PATHS.order}/order`, (req, res, ctx) => { - return res(ctx.status(200)); - }), - rest.get(`${API_PATHS.order}/order/:id`, (req, res, ctx) => { - const order = orders.find((p) => p.id === req.params.id); - if (!order) { - return res(ctx.status(404)); - } - return res(ctx.status(200), ctx.delay(), ctx.json(order)); - }), - rest.delete(`${API_PATHS.order}/order/:id`, (req, res, ctx) => { - return res(ctx.status(200)); - }), - rest.put(`${API_PATHS.order}/order/:id/status`, (req, res, ctx) => { - return res(ctx.status(200)); - }), + // rest.get(`${API_PATHS.cart}/profile/cart`, (req, res, ctx) => { + // return res(ctx.status(200), ctx.delay(), ctx.json(cart)); + // }), + // rest.put(`${API_PATHS.cart}/profile/cart`, (req, res, ctx) => { + // return res(ctx.status(200)); + // }), + // rest.get(`${API_PATHS.order}/order`, (req, res, ctx) => { + // return res(ctx.status(200), ctx.delay(), ctx.json(orders)); + // }), + // rest.put(`${API_PATHS.order}/order`, (req, res, ctx) => { + // return res(ctx.status(200)); + // }), + // rest.get(`${API_PATHS.order}/order/:id`, (req, res, ctx) => { + // const order = orders.find((p) => p.id === req.params.id); + // if (!order) { + // return res(ctx.status(404)); + // } + // return res(ctx.status(200), ctx.delay(), ctx.json(order)); + // }), + // rest.delete(`${API_PATHS.order}/order/:id`, (req, res, ctx) => { + // return res(ctx.status(200)); + // }), + // rest.put(`${API_PATHS.order}/order/:id/status`, (req, res, ctx) => { + // return res(ctx.status(200)); + // }), ]; diff --git a/src/models/CartItem.ts b/src/models/CartItem.ts index b57286050..a05ef321a 100755 --- a/src/models/CartItem.ts +++ b/src/models/CartItem.ts @@ -4,3 +4,16 @@ export type CartItem = { product: Product; count: number; }; + +export type CartRespose = { + cart: { + id: string; + user_id: string; + status: string; + created_at: string; + updated_at: string; + + items: CartItem[]; + }; + total: number; +}; diff --git a/src/queries/cart.ts b/src/queries/cart.ts index 7e9b63728..b20c6b3fe 100644 --- a/src/queries/cart.ts +++ b/src/queries/cart.ts @@ -2,11 +2,11 @@ import axios, { AxiosError } from "axios"; import React from "react"; import { useQuery, useQueryClient, useMutation } from "react-query"; import API_PATHS from "~/constants/apiPaths"; -import { CartItem } from "~/models/CartItem"; +import { CartItem, CartRespose } from "~/models/CartItem"; export function useCart() { - return useQuery("cart", async () => { - const res = await axios.get(`${API_PATHS.cart}/profile/cart`, { + return useQuery("cart", async () => { + const res = await axios.get(`${API_PATHS.cart}/profile/cart`, { headers: { Authorization: `Basic ${localStorage.getItem("authorization_token")}`, },