Task 08

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(

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 (
     <IconButton color="inherit" component={Link} to="/cart" size="large">

src/components/pages/PageCart/PageCart.tsx

@@ -43,23 +43,23 @@ 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<CartStep>(
     CartStep.ReviewCart
   );
   const [address, setAddress] = useState<Address>(initialAddressValues);
 
-  const isCartEmpty = data.length === 0;
+  const isCartEmpty = data?.total === 0;
 
   const handleNext = () => {
     if (activeStep !== CartStep.ReviewOrder) {
       setActiveStep((step) => step + 1);
       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() {
       </Stepper>
       {isCartEmpty && <CartIsEmpty />}
       {!isCartEmpty && activeStep === CartStep.ReviewCart && (
-        <ReviewCart items={data} />
+        <ReviewCart items={data?.cart.items ?? []} />
       )}
       {activeStep === CartStep.Address && (
         <AddressForm
@@ -110,7 +110,7 @@ export default function PageCart() {
         />
       )}
       {activeStep === CartStep.ReviewOrder && (
-        <ReviewOrder address={address} items={data} />
+        <ReviewOrder address={address} items={data?.cart.items ?? []} />
       )}
       {activeStep === CartStep.Success && <Success />}
       {!isCartEmpty &&

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;

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<AvailableProduct>(product)
     );
   }),
-  rest.get(`${API_PATHS.cart}/profile/cart`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(), ctx.json<CartItem[]>(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<Order[]>(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<CartItem[]>(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<Order[]>(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));
+  // }),
 ];

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;
+};

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<CartItem[], AxiosError>("cart", async () => {
-    const res = await axios.get<CartItem[]>(`${API_PATHS.cart}/profile/cart`, {
+  return useQuery<CartRespose, AxiosError>("cart", async () => {
+    const res = await axios.get<CartRespose>(`${API_PATHS.cart}/profile/cart`, {
       headers: {
         Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
       },