Semen-Martsynovskyi · Semen-Martsynovskyi · Dec 3, 2023
diff --git a/src/components/AddProductToCart/AddProductToCart.tsx b/src/components/AddProductToCart/AddProductToCart.tsx
@@ -11,22 +11,50 @@ type AddProductToCartProps = {
 };
 
 export default function AddProductToCart({ product }: AddProductToCartProps) {
-  const { data = [], isFetching } = useCart();
+  const { data, isFetching } = useCart();
+  const cart = data?.data.cart;
+
   const { mutate: upsertCart } = useUpsertCart();
   const invalidateCart = useInvalidateCart();
-  const cartItem = data.find((i) => i.product.id === product.id);
+  const cartItems = cart?.cartItems ?? [];
+
+  const cartItem = cart?.cartItems.find((i) => i.product.id === product.id);
 
   const addProduct = () => {
-    upsertCart(
-      { product, count: cartItem ? cartItem.count + 1 : 1 },
-      { onSuccess: invalidateCart }
-    );
+    const updatedItemDto = {
+      product_id: product.id ?? "",
+      count: cartItem ? cartItem.count + 1 : 1,
+    };
+    upsertCart([
+      ...cartItems
+        .filter((ci) => ci.product.id !== product.id)
+        .map((ci) => ({
+          product_id: ci.product.id ?? "",
+          count: ci.count,
+        })),
+      updatedItemDto,
+    ]),
+      {
+        onSuccess: invalidateCart,
+      };
   };
 
   const removeProduct = () => {
     if (cartItem) {
       upsertCart(
-        { ...cartItem, count: cartItem.count - 1 },
+        [
+          ...cartItems
+            .filter((ci) => ci.product.id !== product.id)
+            .map((ci) => ({
+              product_id: ci.product.id ?? "",
+              count: ci.count,
+            })),
+          {
+            product_id: cartItem.product.id ?? "",
+            count: cartItem.count - 1,
+          },
+        ],
+
         { onSuccess: invalidateCart }
       );
     }

diff --git a/src/components/MainLayout/components/Cart.tsx b/src/components/MainLayout/components/Cart.tsx
@@ -5,8 +5,9 @@ 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 cart = data?.data.cart;
+  const badgeContent = cart?.cartItems.length || undefined;
 
   return (
     <IconButton color="inherit" component={Link} to="/cart" size="large">

diff --git a/src/components/pages/PageCart/PageCart.tsx b/src/components/pages/PageCart/PageCart.tsx
@@ -43,23 +43,24 @@ 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 cart = data?.data.cart;
   const [address, setAddress] = useState<Address>(initialAddressValues);
 
-  const isCartEmpty = data.length === 0;
+  const isCartEmpty = cart?.cartItems.length === 0;
 
   const handleNext = () => {
     if (activeStep !== CartStep.ReviewOrder) {
       setActiveStep((step) => step + 1);
       return;
     }
     const values = {
-      items: data.map((i) => ({
+      items: cart?.cartItems.map((i) => ({
         productId: i.product.id,
         count: i.count,
       })),
@@ -100,7 +101,7 @@ export default function PageCart() {
       </Stepper>
       {isCartEmpty && <CartIsEmpty />}
       {!isCartEmpty && activeStep === CartStep.ReviewCart && (
-        <ReviewCart items={data} />
+        <ReviewCart items={cart?.cartItems ?? []} />
       )}
       {activeStep === CartStep.Address && (
         <AddressForm
@@ -110,7 +111,7 @@ export default function PageCart() {
         />
       )}
       {activeStep === CartStep.ReviewOrder && (
-        <ReviewOrder address={address} items={data} />
+        <ReviewOrder address={address} items={cart?.cartItems ?? []} />
       )}
       {activeStep === CartStep.Success && <Success />}
       {!isCartEmpty &&

diff --git a/src/constants/apiPaths.ts b/src/constants/apiPaths.ts
@@ -3,7 +3,7 @@ const API_PATHS = {
   order: import.meta.env.VITE_PRODUCT_API_URL,
   import: import.meta.env.VITE_IMPORT_API_URL,
   bff: import.meta.env.VITE_PRODUCT_API_URL,
-  cart: import.meta.env.VITE_PRODUCT_API_URL,
+  cart: "https://k3ghjzwcs0.execute-api.us-east-1.amazonaws.com/dev/api",
 };
 
 export default API_PATHS;
diff --git 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, cart } from "~/mocks/data";
-import { CartItem } from "~/models/CartItem";
+import { availableProducts, orders } from "~/mocks/data";
 import { Order } from "~/models/Order";
 import { AvailableProduct } from "~/models/Product";
 
@@ -19,12 +18,6 @@ export const handlers = [
       ctx.json<AvailableProduct[]>(availableProducts)
     );
   }),
-  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));
   }),

diff --git a/src/models/Cart.ts b/src/models/Cart.ts
@@ -0,0 +1,13 @@
+import { CartItem } from "./CartItem";
+
+export type Cart = {
+  cartItems: CartItem[];
+};
+
+export type CartApiResponse = {
+  data: {
+    cart: Cart;
+  };
+  statusCode: number;
+  message: string;
+};
diff --git a/src/models/CartItem.ts b/src/models/CartItem.ts
@@ -4,3 +4,8 @@ export type CartItem = {
   product: Product;
   count: number;
 };
+
+export type CartItemDto = {
+  product_id: string;
+  count: number;
+};
diff --git a/src/queries/cart.ts b/src/queries/cart.ts
@@ -2,22 +2,26 @@ 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 { Cart, CartApiResponse } from "~/models/Cart";
+import { CartItemDto } from "~/models/CartItem";
 
 export function useCart() {
-  return useQuery<CartItem[], AxiosError>("cart", async () => {
-    const res = await axios.get<CartItem[]>(`${API_PATHS.cart}/profile/cart`, {
-      headers: {
-        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
-      },
-    });
+  return useQuery<CartApiResponse, AxiosError>("cart", async () => {
+    const res = await axios.get<CartApiResponse>(
+      `${API_PATHS.cart}/profile/cart`,
+      {
+        headers: {
+          Authorization: `Basic ${localStorage.getItem("basic_token")}`,
+        },
+      }
+    );
     return res.data;
   });
 }
 
 export function useCartData() {
   const queryClient = useQueryClient();
-  return queryClient.getQueryData<CartItem[]>("cart");
+  return queryClient.getQueryData<CartApiResponse>("cart");
 }
 
 export function useInvalidateCart() {
@@ -29,10 +33,10 @@ export function useInvalidateCart() {
 }
 
 export function useUpsertCart() {
-  return useMutation((values: CartItem) =>
-    axios.put<CartItem[]>(`${API_PATHS.cart}/profile/cart`, values, {
+  return useMutation((values: CartItemDto[]) =>
+    axios.put<Cart>(`${API_PATHS.cart}/profile/cart`, values, {
       headers: {
-        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+        Authorization: `Basic ${localStorage.getItem("basic_token")}`,
       },
     })
   );

diff --git a/src/queries/orders.ts b/src/queries/orders.ts
@@ -26,7 +26,7 @@ export function useUpdateOrderStatus() {
       const { id, ...data } = values;
       return axios.put(`${API_PATHS.order}/order/${id}/status`, data, {
         headers: {
-          Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+          Authorization: `Basic ${localStorage.getItem("basic_token")}`,
         },
       });
     }
@@ -37,7 +37,7 @@ export function useSubmitOrder() {
   return useMutation((values: Omit<Order, "id">) => {
     return axios.put<Omit<Order, "id">>(`${API_PATHS.order}/order`, values, {
       headers: {
-        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+        Authorization: `Basic ${localStorage.getItem("basic_token")}`,
       },
     });
   });
@@ -56,7 +56,7 @@ export function useDeleteOrder() {
   return useMutation((id: string) =>
     axios.delete(`${API_PATHS.order}/order/${id}`, {
       headers: {
-        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+        Authorization: `Basic ${localStorage.getItem("basic_token")}`,
       },
     })
   );

diff --git a/src/queries/products.ts b/src/queries/products.ts
@@ -50,7 +50,7 @@ export function useUpsertAvailableProduct() {
   return useMutation((values: AvailableProduct) =>
     axios.put<AvailableProduct>(`${API_PATHS.bff}/product`, values, {
       headers: {
-        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+        Authorization: `Basic ${localStorage.getItem("basic_token")}`,
       },
     })
   );
@@ -60,7 +60,7 @@ export function useDeleteAvailableProduct() {
   return useMutation((id: string) =>
     axios.delete(`${API_PATHS.bff}/product/${id}`, {
       headers: {
-        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+        Authorization: `Basic ${localStorage.getItem("basic_token")}`,
       },
     })
   );