209c50c6-be0a-4368-80ca-69cbc8ab7c4c

Committed 18 Jul 2024 02:12PM UTC coverage: 92.292% (+1.1%) from 91.148%

Build # 209c50c6-be0a-4368-80ca-69cbc8ab7c4c

Build Type

Pull #55

circleci

Committed by

mpanoathos

Commit Message

Fix(protectRoutes) Protect routes & Adding dashboard icon on navbar

Pull Request Pull Request #55: Fix: Protect routes & Adding dashboard icon on navbar

Run Details

693 of 835 branches covered (82.99%)

Branch coverage included in aggregate %.

28 of 37 new or added lines in 6 files covered. (75.68%)

10 existing lines in 1 file now uncovered.

2073 of 2162 relevant lines covered (95.88%)

12.28 hits per line

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

79.12

/src/views/seller/viewSingleProduct.tsx

import { useEffect, useState } from "react";
import axiosClient from "../../hooks/AxiosInstance";
import { toast } from "react-toastify";
import { useNavigate, useParams } from "react-router-dom";
import { format, parseISO } from "date-fns";
import { FaStar, FaRegStar, FaShoppingCart, FaRegHeart } from "react-icons/fa";
import Modal from "react-modal";
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";

interface Review {
  id: string;
  rating: number;
  feedback: string;
  buyerId: string;
  createdAt: string;
  updatedAt: string;
  buyer: {
    id: string;
    username: string;
  };
}

interface Product {
  id: string;
  name: string;
  category: string;
  price: number;
  quantity: number;
  status: string;
  images: string[];
  expiryDate: string;
  averageRating: number;
  seller: {
    id: string;
    username: string;
    email: string;
  };
  reviews: Review[];
}

const ViewSingleProduct: React.FC = () => {
  const { productId } = useParams<{ productId: string }>();
  const [product, setProduct] = useState<Product | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isdisabled, setIsdisabled] = useState<boolean>(false);
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const navigate = useNavigate();
  const notify = (message: string) => toast(message);
  const client = axiosClient();

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await client.get(`/collections/product/${productId}`);
        setProduct(response.data.item);
      } catch (error) {
        notify("Error fetching product");
      } finally {
        setIsLoading(false);
      }
    };
    fetchProduct();
  }, [productId, client]);

  const openModal = () => setModalIsOpen(true);
  const closeModal = () => setModalIsOpen(false);

  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuantity(Number(e.target.value));
  };

  const addProductToCart = async (productId: string, quantity: number) => {
    try {
      await client.post(`/cart/products/${productId}`, { quantity });
      navigate('/cart');
      notify("Product added to cart successfully!");
      closeModal();
    } catch (error: any) {
      if (error.response) {
        toast(`${error.response.data.message}`);
      } else if (error.request) {
        notify("No response received from the server.");
      } else {
        notify("Error setting up request.");
      }
    }
  };
  const addProductToWishList = async (productId: string) => {
    setIsdisabled(true)
    try {
      const response = await client.post(`/wishList/products/${productId}`);
      if(response.status === 201){
        toast(`${response.data.message}`);
      }
   
    } catch (error: any) {
      if (error.response) {
        toast(`${error.response.data.message}`);
      } else if (error.request) {
        notify("No response received from the server.");
      } else {
        notify("Error setting up request.");
      }
    } finally {
      setIsdisabled(false);
    }
  };

  const renderStars = (rating: number) => {
    const stars = [];
    for (let i = 1; i <= 5; i++) {
      if (i <= rating) {
        stars.push(<FaStar key={i} className="text-yellow-500" />);
      } else {
        stars.push(<FaRegStar key={i} className="text-yellow-500" />);
      }
    }
    return <div className="flex">{stars}</div>;
  };

  if (isLoading) {
    return <div className="flex justify-center items-center h-screen">Loading...</div>;
  }

  if (!product) {
    return <div className="flex justify-center items-center h-screen">No product found</div>;
  }

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto p-4 max-w-screen-lg">
        <div className="flex items-center m-4">
          {/* Additional product information or navigation can be added here */}
        </div>
        <div className="flex flex-col md:flex-row items-center md:items-start md:justify-center">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:w-1/2">
            {product.images && product.images.map((image, index) => (
              <div key={index} className="h-64 w-full">
                <img
                  src={image}
                  alt={product.name}
                  className="h-full w-full object-cover rounded-lg"
                />
              </div>
            ))}
          </div>
          <div className="m-4 md:m-20 flex-1 w-full max-w-lg">
            <h1 className="text-3xl font-bold m-6">{product.name}</h1>
            <p className="text-lg m-4">{renderStars(product.averageRating)}</p>
            <div className="text-md m-4">
              <div className="font-semibold">Price</div> Rwf{product.price}
            </div>
            <div className="text-md m-4">
              <div className="font-semibold">Description:</div>
              {product.category}
            </div>
            <button
              className="m-4 px-4 py-2 bg-white text-black border border-black rounded flex items-center hover:bg-gray-100"
              onClick={openModal}
            >
              <FaShoppingCart className="mr-2" /> Add to Cart
            </button>
            <button
              className="m-4 px-4 py-2 bg-white text-black border border-black rounded flex items-center hover:bg-gray-100"
              disabled={isdisabled}
              onClick={() => addProductToWishList(product.id)}
            >
              <FaRegHeart className="mr-2"  data-testid="wishlist-icon"/> {isdisabled ? 'Loading...' : 'Add to wishList'}
            </button>
          </div>
        </div>

        <div className="mt-6">
          <div className="flex items-center m-4">
            <div className="border-r-8 border-black h-8 m-3 rounded-full"></div>
            <span className="pr-4 text-lg font-semibold">About Seller</span>
          </div>
          <p className="text-md ml-6">
            <span className="font-semibold">Username:</span> {product.seller.username}
          </p>
          <p className="text-md ml-6">
            <span className="font-semibold">Email:</span> {product.seller.email}
          </p>
        </div>

        <div className="mt-6">
          <div className="flex items-center m-4">
            <div className="border-r-8 border-black h-8 m-3 rounded-full"></div>
            <span className="pr-4 text-lg font-semibold">Reviews</span>
          </div>
          {product.reviews.length > 0 ? (
            product.reviews.map((review) => (
              <div key={review.id} className="border-t border-gray-200 pt-4 mt-4">
                <p className="text-lg">
                  <span className="font-semibold">Rating:</span> {renderStars(review.rating)}
                </p>
                <p className="text-lg">
                  <span className="font-semibold">Feedback:</span> {review.feedback}
                </p>
                <p className="text-lg">
                  <span className="font-semibold">Buyer:</span> {review.buyer.username}
                </p>
                <p className="text-lg">
                  <span className="font-semibold">Reviewed on:</span> {format(parseISO(review.createdAt), 'MM/dd/yyyy')}
                </p>
              </div>
            ))
          ) : (
            <p className="text-lg">No reviews yet</p>
          )}
        </div>
      </div>
      <Footer />
<Modal
  isOpen={modalIsOpen}
  onRequestClose={closeModal}
  contentLabel="Add Quantity"
  className="bg-white p-6 rounded-lg shadow-lg w-full sm:w-2/3 md:w-1/2 lg:w-1/3 mx-auto mt-20"
  overlayClassName="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
>
  <h2 className="text-xl sm:text-2xl font-bold mb-4">Add to Cart</h2>
  <form
    role="form"
    onSubmit={(e) => {
      e.preventDefault();
      addProductToCart(product.id, quantity);
    }}
    className="flex flex-col gap-4"
  >
    <label htmlFor="quantity" className="block text-sm font-medium text-gray-700">
      Quantity:
    </label>
    <input
      type="number"
      id="quantity"
      value={quantity}
      onChange={handleQuantityChange}
      min="1"
      required
      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
    />
    <div className="flex justify-end gap-3">
      <button
        type="button"
        onClick={closeModal}
        className="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400 transition-colors"
      >
        Cancel
      </button>
      <button
        type="submit"
        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
      >
        Add to Cart
      </button>
    </div>
  </form>
</Modal>
    </div>
  );
};

export default ViewSingleProduct;

1	import { useEffect, useState } from "react";	2✔
2	import axiosClient from "../../hooks/AxiosInstance";	2✔
3	import { toast } from "react-toastify";	2✔
4	import { useNavigate, useParams } from "react-router-dom";	2✔
5	import { format, parseISO } from "date-fns";	2✔
6	import { FaStar, FaRegStar, FaShoppingCart, FaRegHeart } from "react-icons/fa";	2✔
7	import Modal from "react-modal";	2✔
8	import Navbar from "../../components/Navbar";	2✔
9	import Footer from "../../components/Footer";	2✔
10
11	interface Review {
12	id: string;
13	rating: number;
14	feedback: string;
15	buyerId: string;
16	createdAt: string;
17	updatedAt: string;
18	buyer: {
19	id: string;
20	username: string;
21	};
22	}
23
24	interface Product {
25	id: string;
26	name: string;
27	category: string;
28	price: number;
29	quantity: number;
30	status: string;
31	images: string[];
32	expiryDate: string;
33	averageRating: number;
34	seller: {
35	id: string;
36	username: string;
37	email: string;
38	};
39	reviews: Review[];
40	}
41
42	const ViewSingleProduct: React.FC = () => {	2✔
43	const { productId } = useParams<{ productId: string }>();	31✔
44	const [product, setProduct] = useState<Product \| null>(null);	31✔
45	const [isLoading, setIsLoading] = useState<boolean>(true);	30✔
46	const [isdisabled, setIsdisabled] = useState<boolean>(false);	30✔
47	const [modalIsOpen, setModalIsOpen] = useState(false);	30✔
48	const [quantity, setQuantity] = useState(1);	30✔
49	const navigate = useNavigate();	30✔
50	const notify = (message: string) => toast(message);	30✔
51	const client = axiosClient();	30✔
52
53	useEffect(() => {	30✔
54	const fetchProduct = async () => {	11✔
55	try {	11✔
56	const response = await client.get(`/collections/product/${productId}`);	11✔
57	setProduct(response.data.item);	10✔
58	} catch (error) {
59	notify("Error fetching product");	1✔
60	} finally {
61	setIsLoading(false);	11✔
62	}
63	};
64	fetchProduct();	11✔
65	}, [productId, client]);
66
67	const openModal = () => setModalIsOpen(true);	30✔
68	const closeModal = () => setModalIsOpen(false);	30✔
69
70	const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {	30✔
71	setQuantity(Number(e.target.value));	2✔
72	};
73
74	const addProductToCart = async (productId: string, quantity: number) => {	30✔
75	try {	4✔
76	await client.post(`/cart/products/${productId}`, { quantity });	4✔
77	navigate('/cart');	1✔
78	notify("Product added to cart successfully!");	1✔
79	closeModal();	1✔
80	} catch (error: any) {
81	if (error.response) {	3✔
82	toast(`${error.response.data.message}`);	1✔
83	} else if (error.request) {	2✔
84	notify("No response received from the server.");	1✔
85	} else {
86	notify("Error setting up request.");	1✔
87	}
88	}
89	};
90	const addProductToWishList = async (productId: string) => {	30✔
91	setIsdisabled(true)	×
UNCOV 92	try {	×
UNCOV 93	const response = await client.post(`/wishList/products/${productId}`);	×
UNCOV 94	if(response.status === 201){	×
UNCOV 95	toast(`${response.data.message}`);	×
96	}
97
98	} catch (error: any) {
UNCOV 99	if (error.response) {	×
UNCOV 100	toast(`${error.response.data.message}`);	×
UNCOV 101	} else if (error.request) {	×
102	notify("No response received from the server.");	×
103	} else {
UNCOV 104	notify("Error setting up request.");	×
105	}
106	} finally {
UNCOV 107	setIsdisabled(false);	×
108	}
109	};
110
111	const renderStars = (rating: number) => {	30✔
112	const stars = [];	36✔
113	for (let i = 1; i <= 5; i++) {	36✔
114	if (i <= rating) {	180✔
115	stars.push(<FaStar key={i} className="text-yellow-500" />);	162✔
116	} else {
117	stars.push(<FaRegStar key={i} className="text-yellow-500" />);	18✔
118	}
119	}
120	return <div className="flex">{stars}</div>;	36✔
121	};
122
123	if (isLoading) {	30✔
124	return <div className="flex justify-center items-center h-screen">Loading...</div>;	11✔
125	}
126
127	if (!product) {	19✔
128	return <div className="flex justify-center items-center h-screen">No product found</div>;	1✔
129	}
130
131	return (	18✔
132	<div className="min-h-screen flex flex-col">
133	<Navbar />
134	<div className="container mx-auto p-4 max-w-screen-lg">
135	<div className="flex items-center m-4">
136	{/* Additional product information or navigation can be added here */}
137	</div>
138	<div className="flex flex-col md:flex-row items-center md:items-start md:justify-center">
139	<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:w-1/2">
140	{product.images && product.images.map((image, index) => (	36✔
141	<div key={index} className="h-64 w-full">	36✔
142	<img
143	src={image}
144	alt={product.name}
145	className="h-full w-full object-cover rounded-lg"
146	/>
147	</div>
148	))}
149	</div>
150	<div className="m-4 md:m-20 flex-1 w-full max-w-lg">
151	<h1 className="text-3xl font-bold m-6">{product.name}</h1>
152	<p className="text-lg m-4">{renderStars(product.averageRating)}</p>
153	<div className="text-md m-4">
154	<div className="font-semibold">Price</div> Rwf{product.price}
155	</div>
156	<div className="text-md m-4">
157	<div className="font-semibold">Description:</div>
158	{product.category}
159	</div>
160	<button
161	className="m-4 px-4 py-2 bg-white text-black border border-black rounded flex items-center hover:bg-gray-100"
162	onClick={openModal}
163	>
164	<FaShoppingCart className="mr-2" /> Add to Cart
165	</button>
166	<button
167	className="m-4 px-4 py-2 bg-white text-black border border-black rounded flex items-center hover:bg-gray-100"
168	disabled={isdisabled}
UNCOV 169	onClick={() => addProductToWishList(product.id)}	×
170	>
171	<FaRegHeart className="mr-2" data-testid="wishlist-icon"/> {isdisabled ? 'Loading...' : 'Add to wishList'}	18!
172	</button>
173	</div>
174	</div>
175
176	<div className="mt-6">
177	<div className="flex items-center m-4">
178	<div className="border-r-8 border-black h-8 m-3 rounded-full"></div>
179	<span className="pr-4 text-lg font-semibold">About Seller</span>
180	</div>
181	<p className="text-md ml-6">
182	<span className="font-semibold">Username:</span> {product.seller.username}
183	</p>
184	<p className="text-md ml-6">
185	<span className="font-semibold">Email:</span> {product.seller.email}
186	</p>
187	</div>
188
189	<div className="mt-6">
190	<div className="flex items-center m-4">
191	<div className="border-r-8 border-black h-8 m-3 rounded-full"></div>
192	<span className="pr-4 text-lg font-semibold">Reviews</span>
193	</div>
194	{product.reviews.length > 0 ? (	18!
195	product.reviews.map((review) => (
196	<div key={review.id} className="border-t border-gray-200 pt-4 mt-4">	18✔
197	<p className="text-lg">
198	<span className="font-semibold">Rating:</span> {renderStars(review.rating)}
199	</p>
200	<p className="text-lg">
201	<span className="font-semibold">Feedback:</span> {review.feedback}
202	</p>
203	<p className="text-lg">
204	<span className="font-semibold">Buyer:</span> {review.buyer.username}
205	</p>
206	<p className="text-lg">
207	<span className="font-semibold">Reviewed on:</span> {format(parseISO(review.createdAt), 'MM/dd/yyyy')}
208	</p>
209	</div>
210	))
211	) : (
212	<p className="text-lg">No reviews yet</p>
213	)}
214	</div>
215	</div>
216	<Footer />
217	<Modal
218	isOpen={modalIsOpen}
219	onRequestClose={closeModal}
220	contentLabel="Add Quantity"
221	className="bg-white p-6 rounded-lg shadow-lg w-full sm:w-2/3 md:w-1/2 lg:w-1/3 mx-auto mt-20"
222	overlayClassName="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
223	>
224	<h2 className="text-xl sm:text-2xl font-bold mb-4">Add to Cart</h2>
225	<form
226	role="form"
227	onSubmit={(e) => {
228	e.preventDefault();	4✔
229	addProductToCart(product.id, quantity);	4✔
230	}}
231	className="flex flex-col gap-4"
232	>
233	<label htmlFor="quantity" className="block text-sm font-medium text-gray-700">
234	Quantity:
235	</label>
236	<input
237	type="number"
238	id="quantity"
239	value={quantity}
240	onChange={handleQuantityChange}
241	min="1"
242	required
243	className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
244	/>
245	<div className="flex justify-end gap-3">
246	<button
247	type="button"
248	onClick={closeModal}
249	className="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400 transition-colors"
250	>
251	Cancel
252	</button>
253	<button
254	type="submit"
255	className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
256	>
257	Add to Cart
258	</button>
259	</div>
260	</form>
261	</Modal>
262	</div>
263	);
264	};
265
266	export default ViewSingleProduct;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / 209c50c6-be0a-4368-80ca-69cbc8ab7c4c

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