be68f9fa-7beb-4f51-8889-17d515b99113

Committed 12 Jul 2024 08:59AM UTC coverage: 91.801% (+0.04%) from 91.763%

Build # be68f9fa-7beb-4f51-8889-17d515b99113

Build Type

Pull #46

circleci

Committed by

mpanoathos

Commit Message

feature(Clear cart) Clear the cart [#187364700]

Pull Request Pull Request #46: [#187364700] A buyer should be able to clear their cart

Run Details

548 of 672 branches covered (81.55%)

Branch coverage included in aggregate %.

18 of 18 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

1613 of 1682 relevant lines covered (95.9%)

11.04 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.05

/src/views/UserCart.tsx

import React, { useEffect, useState } from "react";
import SectionHeader from "../components/SectionHeader";
import CartProductCard from "../components/CartProductCard";
import Button from "../components/Button";
import useAxiosClient from "../hooks/AxiosInstance";
import { toast, ToastContainer } from "react-toastify";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { TbBasketX } from "react-icons/tb";
import { MdDelete } from "react-icons/md";
import { decrementCart, setCart, clearCart } from "../redux/cart";
import { ThreeDots } from "react-loader-spinner";

interface CartItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  images: string[];
}

interface CartResponse {
  items: CartItem[];
  totalQuantity: number;
  totalPrice: number;
}

const UserCart: React.FC = () => {
  const client = useAxiosClient();
  const notify = (message: string) => toast(message);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [cartItems, setCartItems] = useState<CartItem[]>([]);
  const [cartResponse, setCartResponse] = useState<CartResponse | null>(null);
  const { count } = useSelector((state: any) => state.cart);
  console.log("cartCount", count);

  const fetchCart = async () => {
    try {
      const response = await client.get(`/cart`);
      if (response.status === 200) {
        setCartResponse(response.data.cart);
        setCartItems(response.data.cart.items);
        dispatch(setCart(response.data.cart.items.length));
        console.log("data: ", response.data.cart.items);
      }
    } catch (err: any) {
      notify(err.response ? err.response.data.message : "Fetching cart failed");
    } finally {
      setIsLoading(false);
    }
  };

  const deleteItem = async (productId: string) => {
    try {
      const response = await client.delete(`/cart/products/${productId}`);
      if (response.status === 200) {
        notify(response.data.message);
        dispatch(decrementCart());
        fetchCart();
      }
    } catch (err: any) {
      notify(err.response ? err.response.data.message : "Failed to delete Item");
    }
  };

  const clearUserCart = async () => {
    try {
      const response = await client.delete("/cart/clear");
      if (response.status === 200) {
        notify(response.data.message);
        fetchCart();
        dispatch(clearCart());
      }
    } catch (err: any) {
      notify(err.response ? err.response.data.message : "Failed to clear cart");
    }
  };

  const updateQuantity = async (productId: string, newQuantity: number) => {
    try {
      const response = await client.patch(`/cart/products/${productId}`, {
        items: [
          {
            productId,
            quantity: newQuantity,
          },
        ],
      });
      if (response.status === 200) {
        notify(response.data.message);
        fetchCart();
      }
    } catch (err: any) {
      notify(err.response ? err.response.data.message : "Failed to update quantity");
    }
  };

  useEffect(() => {
    fetchCart();
  }, []);

  if (isLoading) {
    return (
      <div className="w-full text-black h-[60vh] mx-auto items-center justify-center flex flex-col gap-3">
        <p>Loading... </p>
        <ThreeDots visible={true} height="50" width="50" color="rgb(38 38 38)" radius="5" ariaLabel="three-dots-loading" />
      </div>
    );
  }

  if (cartItems.length === 0) {
    return (
      <div className="w-full h-[40vh] phone:h-[90vh] mx-auto items-center justify-center flex flex-col gap-10">
        <TbBasketX className="text-9xl text-black" />
        <p>No items in cart.</p>
        <div className="w-32">
          <Button value="Go Shopping" onClick={() => navigate("/")} />
        </div>
      </div>
    );
  }

  return (
    <div className="container m-3 tablet:m-5 flex flex-col space-x-2 items-start justify-start tablet:min-h-[100vh] tablet:px-10 w-full">
      <div className="flex flex-row items-center justify-between w-full">
        <SectionHeader title="My Cart" />
        <div>
          <Button value="Clear Cart" icon={<MdDelete className="text-red-500" />} onClick={clearUserCart} />
        </div>
      </div>

      <div className="content w-full flex items-start my-5 justify-between gap-3 flex-wrap">
        <div className="cart-items border mx-auto tablet:m-0 w-[100%] tablet:w-[60%] p-2 rounded-md flex flex-col gap-2 border-gray_100">
          {cartItems.map((item, index) => (
            <CartProductCard
              key={index}
              image={item.images[0]}
              name={item.name}
              price={item.price}
              quantity={item.quantity}
              id={item.productId}
              deleteItem={() => deleteItem(item.productId)}
              updateQuantity={(newQuantity: number) => updateQuantity(item.productId, newQuantity)}
            />
          ))}
        </div>

        {cartResponse && (
          <div className="cart-items border mx-auto tablet:m-0 w-[100%] tablet:w-[35%] p-2 rounded-md flex flex-col gap-2 border-gray_100">
            <div className="p-2 flex flex-col gap-2">
              <p className="font-semibold">Order Summary</p>
              <div className="flex gap-3 items-center justify-between">
                <p className="text-xs font-medium">Total Quantities</p>
                <p className="text-xs">{cartResponse.totalQuantity}</p>
              </div>
              <div className="flex gap-3 items-center justify-between">
                <p className="text-xs font-medium">Subtotal</p>
                <p className="text-xs">Rwf {cartResponse.totalPrice}</p>
              </div>

              <div className="flex gap-3 items-center justify-between">
                <p className="text-xs font-medium">Discount</p>
                <p className="text-xs">0.0</p>
              </div>

              <div className="flex gap-3 items-center justify-between">
                <p className="text-xs font-medium">Delivery fee</p>
                <p className="text-xs">0.0 Rwf</p>
              </div>
              <div className="flex my-2 items-center justify-between border border-gray"></div>

              <div className="flex gap-3 items-center justify-between">
                <p className="text-xs font-semibold">Total</p>
                <p className="text-xs">{cartResponse.totalPrice}</p>
              </div>
            </div>
            <Button value="Checkout" onClick={() => navigate("/checkout")} />
          </div>
        )}
      </div>

      <ToastContainer />
    </div>
  );
};

export default UserCart;

1	import React, { useEffect, useState } from "react";	2✔
2	import SectionHeader from "../components/SectionHeader";	2✔
3	import CartProductCard from "../components/CartProductCard";	2✔
4	import Button from "../components/Button";	2✔
5	import useAxiosClient from "../hooks/AxiosInstance";	2✔
6	import { toast, ToastContainer } from "react-toastify";	2✔
7	import { useNavigate } from "react-router-dom";	2✔
8	import { useDispatch, useSelector } from "react-redux";	2✔
9	import { TbBasketX } from "react-icons/tb";	2✔
10	import { MdDelete } from "react-icons/md";	2✔
11	import { decrementCart, setCart, clearCart } from "../redux/cart";	2✔
12	import { ThreeDots } from "react-loader-spinner";	2✔
13
14	interface CartItem {
15	productId: string;
16	name: string;
17	price: number;
18	quantity: number;
19	images: string[];
20	}
21
22	interface CartResponse {
23	items: CartItem[];
24	totalQuantity: number;
25	totalPrice: number;
26	}
27
28	const UserCart: React.FC = () => {	2✔
29	const client = useAxiosClient();	29✔
30	const notify = (message: string) => toast(message);	29✔
31	const navigate = useNavigate();	29✔
32	const dispatch = useDispatch();	29✔
33	const [isLoading, setIsLoading] = useState<boolean>(true);	29✔
34	const [cartItems, setCartItems] = useState<CartItem[]>([]);	29✔
35	const [cartResponse, setCartResponse] = useState<CartResponse \| null>(null);	29✔
36	const { count } = useSelector((state: any) => state.cart);	29✔
37	console.log("cartCount", count);	29✔
38
39	const fetchCart = async () => {	29✔
40	try {	17✔
41	const response = await client.get(`/cart`);	17✔
42	if (response.status === 200) {	14✔
43	setCartResponse(response.data.cart);	12✔
44	setCartItems(response.data.cart.items);	12✔
45	dispatch(setCart(response.data.cart.items.length));	12✔
46	console.log("data: ", response.data.cart.items);	12✔
47	}
48	} catch (err: any) {
49	notify(err.response ? err.response.data.message : "Fetching cart failed");	4✔
50	} finally {
51	setIsLoading(false);	16✔
52	}
53	};
54
55	const deleteItem = async (productId: string) => {	29✔
56	try {	3✔
57	const response = await client.delete(`/cart/products/${productId}`);	3✔
58	if (response.status === 200) {	1✔
59	notify(response.data.message);	1✔
60	dispatch(decrementCart());	1✔
61	fetchCart();	1✔
62	}
63	} catch (err: any) {
64	notify(err.response ? err.response.data.message : "Failed to delete Item");	2✔
65	}
66	};
67
68	const clearUserCart = async () => {	29✔
69	try {	3✔
70	const response = await client.delete("/cart/clear");	3✔
71	if (response.status === 200) {	1✔
72	notify(response.data.message);	1✔
73	fetchCart();	1✔
74	dispatch(clearCart());	1✔
75	}
76	} catch (err: any) {
77	notify(err.response ? err.response.data.message : "Failed to clear cart");	2✔
78	}
79	};
80
81	const updateQuantity = async (productId: string, newQuantity: number) => {	29✔
82	try {	1✔
83	const response = await client.patch(`/cart/products/${productId}`, {	1✔
84	items: [
85	{
86	productId,
87	quantity: newQuantity,
88	},
89	],
90	});
UNCOV 91	if (response.status === 200) {	×
92	notify(response.data.message);	×
93	fetchCart();	×
94	}
95	} catch (err: any) {
96	notify(err.response ? err.response.data.message : "Failed to update quantity");	1!
97	}
98	};
99
100	useEffect(() => {	29✔
101	fetchCart();	15✔
102	}, []);
103
104	if (isLoading) {	29✔
105	return (	15✔
106	<div className="w-full text-black h-[60vh] mx-auto items-center justify-center flex flex-col gap-3">
107	<p>Loading... </p>
108	<ThreeDots visible={true} height="50" width="50" color="rgb(38 38 38)" radius="5" ariaLabel="three-dots-loading" />
109	</div>
110	);
111	}
112
113	if (cartItems.length === 0) {	14✔
114	return (	4✔
115	<div className="w-full h-[40vh] phone:h-[90vh] mx-auto items-center justify-center flex flex-col gap-10">
116	<TbBasketX className="text-9xl text-black" />
117	<p>No items in cart.</p>
118	<div className="w-32">
119	<Button value="Go Shopping" onClick={() => navigate("/")} />	1✔
120	</div>
121	</div>
122	);
123	}
124
125	return (	10✔
126	<div className="container m-3 tablet:m-5 flex flex-col space-x-2 items-start justify-start tablet:min-h-[100vh] tablet:px-10 w-full">
127	<div className="flex flex-row items-center justify-between w-full">
128	<SectionHeader title="My Cart" />
129	<div>
130	<Button value="Clear Cart" icon={<MdDelete className="text-red-500" />} onClick={clearUserCart} />
131	</div>
132	</div>
133
134	<div className="content w-full flex items-start my-5 justify-between gap-3 flex-wrap">
135	<div className="cart-items border mx-auto tablet:m-0 w-[100%] tablet:w-[60%] p-2 rounded-md flex flex-col gap-2 border-gray_100">
136	{cartItems.map((item, index) => (
137	<CartProductCard	10✔
138	key={index}
139	image={item.images[0]}
140	name={item.name}
141	price={item.price}
142	quantity={item.quantity}
143	id={item.productId}
144	deleteItem={() => deleteItem(item.productId)}	3✔
145	updateQuantity={(newQuantity: number) => updateQuantity(item.productId, newQuantity)}	1✔
146	/>
147	))}
148	</div>
149
150	{cartResponse && (	20✔
151	<div className="cart-items border mx-auto tablet:m-0 w-[100%] tablet:w-[35%] p-2 rounded-md flex flex-col gap-2 border-gray_100">
152	<div className="p-2 flex flex-col gap-2">
153	<p className="font-semibold">Order Summary</p>
154	<div className="flex gap-3 items-center justify-between">
155	<p className="text-xs font-medium">Total Quantities</p>
156	<p className="text-xs">{cartResponse.totalQuantity}</p>
157	</div>
158	<div className="flex gap-3 items-center justify-between">
159	<p className="text-xs font-medium">Subtotal</p>
160	<p className="text-xs">Rwf {cartResponse.totalPrice}</p>
161	</div>
162
163	<div className="flex gap-3 items-center justify-between">
164	<p className="text-xs font-medium">Discount</p>
165	<p className="text-xs">0.0</p>
166	</div>
167
168	<div className="flex gap-3 items-center justify-between">
169	<p className="text-xs font-medium">Delivery fee</p>
170	<p className="text-xs">0.0 Rwf</p>
171	</div>
172	<div className="flex my-2 items-center justify-between border border-gray"></div>
173
174	<div className="flex gap-3 items-center justify-between">
175	<p className="text-xs font-semibold">Total</p>
176	<p className="text-xs">{cartResponse.totalPrice}</p>
177	</div>
178	</div>
179	<Button value="Checkout" onClick={() => navigate("/checkout")} />	1✔
180	</div>
181	)}
182	</div>
183
184	<ToastContainer />
185	</div>
186	);
187	};
188
189	export default UserCart;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / be68f9fa-7beb-4f51-8889-17d515b99113

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous