9803988396

Committed 05 Jul 2024 06:19AM UTC coverage: 87.967% (+0.2%) from 87.754%

Build # 9803988396

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #51 from atlp-rwanda/ft-vender-product-update

Feature updating products item

Run Details

401 of 570 branches covered (70.35%)

Branch coverage included in aggregate %.

291 of 346 new or added lines in 7 files covered. (84.1%)

14 existing lines in 1 file now uncovered.

4921 of 5480 relevant lines covered (89.8%)

8.09 hits per line

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

83.54

/src/components/Products/DashboardEditProducts/DashboardEditProducts.tsx

import React, { ChangeEvent, useEffect, useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../../redux/store';
import { fetchSingleProduct, updateProduct } from '../../../redux/actions/productAction';
import { CircleCheck } from 'lucide-react';
import axios from 'axios';
import toast from 'react-hot-toast';

const DashboardEditProducts: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const dispatch = useDispatch<AppDispatch>();
  const navigate = useNavigate();
  const { loading, product, error } = useSelector((state: RootState) => state.singleProduct);

  const [productName, setProductName] = useState('');
  const [description, setDescription] = useState('');
  const [quantity, setQuantity] = useState('');
  const [newPrice, setNewPrice] = useState('');
  const [oldPrice, setOldPrice] = useState('');
  const [categories, setCategories] = useState<{ id: string; name: string }[]>([]);
  const [selectedOption, setSelectedOption] = useState<string>('');
  const [images, setImages] = useState<File[]>([]);
  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
  const [expirationDate, setExpirationDate] = useState<string>('');
  const [errors, setErrors] = useState<{ [key: string]: string }>({});
  const [fetchError, setFetchError] = useState<string | null>(null);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await axios.get(`${import.meta.env.VITE_APP_API_URL}/product/categories`);
        setCategories(response.data.categories);
      } catch (error) {
        console.error('Error fetching categories:', error);
        setFetchError('Error fetching categories');
        toast.error('Error fetching categories');
      }
    };
    fetchCategories();
  }, []);

  useEffect(() => {
    if (id) {
      dispatch(fetchSingleProduct(id));
    }
  }, [dispatch, id]);

  useEffect(() => {
    if (product) {
      setProductName(product.name);
      setDescription(product.description);
      setQuantity(product.quantity.toString());
      setNewPrice(product.newPrice);
      setOldPrice(product.oldPrice || '0');
      setSelectedOption(product.categories[0]?.name || '');
      setExpirationDate(product.expirationDate);
      setImagePreviews(product.images);
    }
  }, [product]);

  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    setImages((prevImages) => [...prevImages, ...files]);
    const previewUrls = files.map((file) => URL.createObjectURL(file));
    setImagePreviews((prevPreviews) => [...prevPreviews, ...previewUrls]);
  };

  const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(e.target.value);
  };

  const validateForm = () => {
    const errors: { [key: string]: string } = {};
    if (productName.trim().length < 3) {
      errors.productName = 'Product name must be at least 3 characters long.';
    }
    if (description.trim().length < 3) {
      errors.description = 'Description must be at least 3 characters long.';
    }
    if (!selectedOption) {
      errors.category = 'Please select a category.';
    }
    if (!quantity || isNaN(Number(quantity))) {
      errors.quantity = 'Please enter a valid quantity.';
    }
    if (!newPrice || isNaN(Number(newPrice))) {
      errors.newPrice = 'Please enter a valid price.';
    }
    if (images.length > 6) {
      errors.images = 'You can upload up to six images only.';
    }
    if (!expirationDate) {
      errors.expirationDate = 'You need an expiry date';
    } else {
      const selectedDate = new Date(expirationDate);
      const currentDate = new Date();
      if (selectedDate < currentDate) {
        errors.expirationDate = 'Expiration date cannot be in the past';
      }
    }
    return errors;
  };

  const handleUpdate = async () => {
    const validationErrors = validateForm();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }
    const formData = new FormData();
    formData.append('name', productName);
    formData.append('description', description);
    formData.append('quantity', quantity);
    formData.append('newPrice', newPrice);
    formData.append('oldPrice', oldPrice);
    formData.append('categories', selectedOption);
    formData.append('expirationDate', expirationDate);
    images.forEach((image) => {
      formData.append('images', image);
    });
    if (id) {
      try {
        await dispatch(updateProduct({ id, formData })).unwrap();
        toast.success('Product updated successfully!');
        navigate(`/vendor/dashboard/products/${id}`);
      } catch (error: any) {
        toast.error(error.message || 'Failed to update product.');
      }
    }
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div className="flex bg-[#eef5ff] w-full h-full text-black p-8 flex-col items-start">
      {fetchError && <p className="text-white/0">{fetchError}</p>}
      <p className="font-bold text-2xl">Update Product</p>
      <p>
        <Link to={'/vendor/dashboard'}>Dashboard</Link> &gt; <Link to={'/vendor/dashboard/products'}>Products</Link>{' '}
        &gt; <Link to={`/vendor/dashboard/products/${id}`}>{product?.name}</Link> &gt; Edit
      </p>
      <div className="bg-white border-[1px] border-[#7c7c7c] rounded-2xl mt-8 w-full p-8">
        <div className="flex flex-col lg:flex-row gap-8">
          <div className="w-full lg:w-1/2 flex flex-col gap-4">
            <p className="font-bold text-2xl">General Information</p>
            <div className="flex flex-col items-start gap-1">
              <p className="font-medium">Product Name</p>
              <input
                type="text"
                value={productName}
                onChange={(e) => setProductName(e.target.value)}
                className="py-2 px-4 bg-[#E7EBEF] rounded"
                data-testid="product-name"
              />
              {errors.productName && <p className="text-red-500">{errors.productName}</p>}
            </div>
            <div className="flex flex-col items-start gap-1">
              <p className="font-medium">Description</p>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="py-2 px-4 bg-[#E7EBEF] rounded"
                data-testid="description"
              />
              {errors.description && <p className="text-red-500">{errors.description}</p>}
            </div>
            <div className="flex flex-col items-start gap-1">
              <p className="font-medium">Category</p>
              <select
                value={selectedOption}
                onChange={handleSelectChange}
                className="bg-white border-[1px] rounded px-4 py-2 w-full"
                disabled={categories?.length === 0 || !categories}
                data-testid="category"
              >
                <option value="">
                  {categories?.length === 0 || !categories ? 'No categories available' : 'Select an option'}
                </option>
                {categories.map((category) => (
                  <option key={category?.id} value={category?.name}>
                    {category?.name}
                  </option>
                ))}
              </select>
              {errors.category && <p className="text-red-500">{errors.category}</p>}
            </div>
            <div className="flex flex-col items-start gap-1">
              <p className="font-medium">Quantity</p>
              <input
                type="number"
                value={quantity}
                onChange={(e) => setQuantity(e.target.value)}
                className="py-2 px-4 bg-[#E7EBEF] rounded"
                data-testid="quantity"
              />
              {errors.quantity && <p className="text-red-500">{errors.quantity}</p>}
            </div>
            <div className="flex flex-col items-start gap-1">
              <p className="font-medium">Expiration Date</p>
              <input
                type="date"
                value={expirationDate}
                onChange={(e) => setExpirationDate(e.target.value)}
                className="py-2 px-4 bg-[#E7EBEF] rounded"
                data-testid="expiration-date"
              />
              {errors.expirationDate && <p className="text-red-500">{errors.expirationDate}</p>}
            </div>
            <div className="flex flex-col items-start gap-1 mt-8">
              <p className="font-bold text-2xl">Pricing</p>
              <div className="flex flex-col items-start gap-1">
                <p className="font-medium">New Price (Rwf)</p>
                <input
                  type="text"
                  value={newPrice}
                  onChange={(e) => setNewPrice(e.target.value)}
                  className="py-2 px-4 bg-[#E7EBEF] rounded"
                  data-testid="new-price"
                />
                {errors.newPrice && <p className="text-red-500">{errors.newPrice}</p>}
              </div>
              <div className="flex flex-col items-start gap-1">
                <p className="font-medium">Old Price (Rwf)</p>
                <input
                  type="text"
                  value={oldPrice}
                  onChange={(e) => setOldPrice(e.target.value)}
                  className="py-2 px-4 bg-[#E7EBEF] rounded"
                  data-testid="old-price"
                />
                {errors.oldPrice && <p className="text-red-500">{errors.oldPrice}</p>}
              </div>
            </div>
          </div>
          <div className="w-full lg:w-1/2 flex flex-col gap-8">
            <p className="font-bold text-2xl">Product Media</p>
            <div className="flex flex-col gap-4">
              <p className="font-medium">Image Upload</p>
              <input type="file" multiple onChange={handleImageUpload} className="py-2 px-4 bg-[#E7EBEF] rounded" />
              {errors.images && <p className="text-red-500">{errors.images}</p>}
            </div>
            <div className="flex flex-col gap-4">
              {imagePreviews.map((preview, index) => (
                <div className="p-4 rounded-lg bg-[#FAFAFA] flex items-center gap-4" key={index}>
                  <img src={preview} alt={`Preview ${index + 1}`} className="w-16 h-16 object-cover rounded" />
                  <p className="text-ellipsis overflow-hidden">{preview}</p>
                  <CircleCheck className="w-6 h-6" />
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="flex gap-8 mt-8">
          <button
            disabled={loading}
            onClick={handleUpdate}
            className="px-8 py-4 rounded-lg text-white bg-[#070f2b] hover:scale-105 transition-all"
            data-testid="update-button"
          >
            {loading ? 'Loading...' : 'Update'}
          </button>
          <Link
            to={'/vendor/dashboard/products'}
            className="px-8 py-4 rounded-lg text-white bg-orange hover:scale-105 transition-all"
          >
            Cancel
          </Link>
        </div>
      </div>
    </div>
  );
};

export default DashboardEditProducts;

1	import React, { ChangeEvent, useEffect, useState } from 'react';	1✔
2	import { useParams, useNavigate, Link } from 'react-router-dom';	1✔
3	import { useDispatch, useSelector } from 'react-redux';	1✔
4	import { AppDispatch, RootState } from '../../../redux/store';	1✔
5	import { fetchSingleProduct, updateProduct } from '../../../redux/actions/productAction';	1✔
6	import { CircleCheck } from 'lucide-react';	1✔
7	import axios from 'axios';	1✔
8	import toast from 'react-hot-toast';	1✔
9		1✔
10	const DashboardEditProducts: React.FC = () => {	1✔
11	const { id } = useParams<{ id: string }>();	14✔
12	const dispatch = useDispatch<AppDispatch>();	14✔
13	const navigate = useNavigate();	14✔
14	const { loading, product, error } = useSelector((state: RootState) => state.singleProduct);	14✔
15		14✔
16	const [productName, setProductName] = useState('');	14✔
17	const [description, setDescription] = useState('');	14✔
18	const [quantity, setQuantity] = useState('');	14✔
19	const [newPrice, setNewPrice] = useState('');	14✔
20	const [oldPrice, setOldPrice] = useState('');	14✔
21	const [categories, setCategories] = useState<{ id: string; name: string }[]>([]);	14✔
22	const [selectedOption, setSelectedOption] = useState<string>('');	14✔
23	const [images, setImages] = useState<File[]>([]);	14✔
24	const [imagePreviews, setImagePreviews] = useState<string[]>([]);	14✔
25	const [expirationDate, setExpirationDate] = useState<string>('');	14✔
26	const [errors, setErrors] = useState<{ [key: string]: string }>({});	14✔
27	const [fetchError, setFetchError] = useState<string \| null>(null);	14✔
28		14✔
29	useEffect(() => {	14✔
30	const fetchCategories = async () => {	3✔
31	try {	3✔
32	const response = await axios.get(`${import.meta.env.VITE_APP_API_URL}/product/categories`);	3✔
33	setCategories(response.data.categories);	2✔
34	} catch (error) {	3✔
35	console.error('Error fetching categories:', error);	1✔
36	setFetchError('Error fetching categories');	1✔
37	toast.error('Error fetching categories');	1✔
38	}	1✔
39	};	3✔
40	fetchCategories();	3✔
41	}, []);	14✔
42		14✔
43	useEffect(() => {	14✔
44	if (id) {	3!
NEW 45	dispatch(fetchSingleProduct(id));	×
NEW 46	}	×
47	}, [dispatch, id]);	14✔
48		14✔
49	useEffect(() => {	14✔
50	if (product) {	3✔
51	setProductName(product.name);	3✔
52	setDescription(product.description);	3✔
53	setQuantity(product.quantity.toString());	3✔
54	setNewPrice(product.newPrice);	3✔
55	setOldPrice(product.oldPrice \|\| '0');	3!
56	setSelectedOption(product.categories[0]?.name \|\| '');	3!
57	setExpirationDate(product.expirationDate);	3✔
58	setImagePreviews(product.images);	3✔
59	}	3✔
60	}, [product]);	14✔
61		14✔
62	const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {	14✔
NEW 63	const files = Array.from(e.target.files \|\| []);	×
NEW 64	setImages((prevImages) => [...prevImages, ...files]);	×
NEW 65	const previewUrls = files.map((file) => URL.createObjectURL(file));	×
NEW 66	setImagePreviews((prevPreviews) => [...prevPreviews, ...previewUrls]);	×
NEW 67	};	×
68		14✔
69	const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {	14✔
NEW 70	setSelectedOption(e.target.value);	×
NEW 71	};	×
72		14✔
73	const validateForm = () => {	14✔
74	const errors: { [key: string]: string } = {};	1✔
75	if (productName.trim().length < 3) {	1✔
76	errors.productName = 'Product name must be at least 3 characters long.';	1✔
77	}	1✔
78	if (description.trim().length < 3) {	1✔
79	errors.description = 'Description must be at least 3 characters long.';	1✔
80	}	1✔
81	if (!selectedOption) {	1!
NEW 82	errors.category = 'Please select a category.';	×
NEW 83	}	×
84	if (!quantity \|\| isNaN(Number(quantity))) {	1!
85	errors.quantity = 'Please enter a valid quantity.';	1✔
86	}	1✔
87	if (!newPrice \|\| isNaN(Number(newPrice))) {	1!
88	errors.newPrice = 'Please enter a valid price.';	1✔
89	}	1✔
90	if (images.length > 6) {	1!
NEW 91	errors.images = 'You can upload up to six images only.';	×
NEW 92	}	×
93	if (!expirationDate) {	1✔
94	errors.expirationDate = 'You need an expiry date';	1✔
95	} else {	1!
NEW 96	const selectedDate = new Date(expirationDate);	×
NEW 97	const currentDate = new Date();	×
NEW 98	if (selectedDate < currentDate) {	×
NEW 99	errors.expirationDate = 'Expiration date cannot be in the past';	×
NEW 100	}	×
NEW 101	}	×
102	return errors;	1✔
103	};	1✔
104		14✔
105	const handleUpdate = async () => {	14✔
106	const validationErrors = validateForm();	1✔
107	if (Object.keys(validationErrors).length > 0) {	1✔
108	setErrors(validationErrors);	1✔
109	return;	1✔
110	}	1!
NEW 111	const formData = new FormData();	×
NEW 112	formData.append('name', productName);	×
NEW 113	formData.append('description', description);	×
NEW 114	formData.append('quantity', quantity);	×
NEW 115	formData.append('newPrice', newPrice);	×
NEW 116	formData.append('oldPrice', oldPrice);	×
NEW 117	formData.append('categories', selectedOption);	×
NEW 118	formData.append('expirationDate', expirationDate);	×
NEW 119	images.forEach((image) => {	×
NEW 120	formData.append('images', image);	×
NEW 121	});	×
NEW 122	if (id) {	×
NEW 123	try {	×
NEW 124	await dispatch(updateProduct({ id, formData })).unwrap();	×
NEW 125	toast.success('Product updated successfully!');	×
NEW 126	navigate(`/vendor/dashboard/products/${id}`);	×
NEW 127	} catch (error: any) {	×
NEW 128	toast.error(error.message \|\| 'Failed to update product.');	×
NEW 129	}	×
NEW 130	}	×
131	};	1✔
132		14✔
133	if (loading) return <p>Loading...</p>;	14!
134	if (error) return <p>Error: {error}</p>;	14!
135		14✔
136	return (	14✔
137	<div className="flex bg-[#eef5ff] w-full h-full text-black p-8 flex-col items-start">	14✔
138	{fetchError && <p className="text-white/0">{fetchError}</p>}	14✔
139	<p className="font-bold text-2xl">Update Product</p>	14✔
140	<p>	14✔
141	<Link to={'/vendor/dashboard'}>Dashboard</Link> > <Link to={'/vendor/dashboard/products'}>Products</Link>{' '}	14✔
142	> <Link to={`/vendor/dashboard/products/${id}`}>{product?.name}</Link> > Edit	14✔
143	</p>	14✔
144	<div className="bg-white border-[1px] border-[#7c7c7c] rounded-2xl mt-8 w-full p-8">	14✔
145	<div className="flex flex-col lg:flex-row gap-8">	14✔
146	<div className="w-full lg:w-1/2 flex flex-col gap-4">	14✔
147	<p className="font-bold text-2xl">General Information</p>	14✔
148	<div className="flex flex-col items-start gap-1">	14✔
149	<p className="font-medium">Product Name</p>	14✔
150	<input	14✔
151	type="text"	14✔
152	value={productName}	14✔
153	onChange={(e) => setProductName(e.target.value)}	14✔
154	className="py-2 px-4 bg-[#E7EBEF] rounded"	14✔
155	data-testid="product-name"	14✔
156	/>	14✔
157	{errors.productName && <p className="text-red-500">{errors.productName}</p>}	14✔
158	</div>	14✔
159	<div className="flex flex-col items-start gap-1">	14✔
160	<p className="font-medium">Description</p>	14✔
161	<textarea	14✔
162	value={description}	14✔
163	onChange={(e) => setDescription(e.target.value)}	14✔
164	className="py-2 px-4 bg-[#E7EBEF] rounded"	14✔
165	data-testid="description"	14✔
166	/>	14✔
167	{errors.description && <p className="text-red-500">{errors.description}</p>}	14✔
168	</div>	14✔
169	<div className="flex flex-col items-start gap-1">	14✔
170	<p className="font-medium">Category</p>	14✔
171	<select	14✔
172	value={selectedOption}	14✔
173	onChange={handleSelectChange}	14✔
174	className="bg-white border-[1px] rounded px-4 py-2 w-full"	14✔
175	disabled={categories?.length === 0 \|\| !categories}	14✔
176	data-testid="category"	14✔
177	>	14✔
178	<option value="">	14✔
179	{categories?.length === 0 \|\| !categories ? 'No categories available' : 'Select an option'}	14✔
180	</option>	14✔
181	{categories.map((category) => (	7✔
182	<option key={category?.id} value={category?.name}>	7✔
183	{category?.name}	14✔
184	</option>	14✔
185	))}	14✔
186	</select>	14✔
187	{errors.category && <p className="text-red-500">{errors.category}</p>}	14✔
188	</div>	14✔
189	<div className="flex flex-col items-start gap-1">	14✔
190	<p className="font-medium">Quantity</p>	14!
191	<input	14✔
192	type="number"	14✔
193	value={quantity}	14✔
194	onChange={(e) => setQuantity(e.target.value)}	14✔
195	className="py-2 px-4 bg-[#E7EBEF] rounded"	14✔
196	data-testid="quantity"	14✔
197	/>	14✔
198	{errors.quantity && <p className="text-red-500">{errors.quantity}</p>}	14✔
199	</div>	14✔
200	<div className="flex flex-col items-start gap-1">	14✔
201	<p className="font-medium">Expiration Date</p>	14✔
202	<input	14✔
203	type="date"	14✔
204	value={expirationDate}	14✔
205	onChange={(e) => setExpirationDate(e.target.value)}	14✔
206	className="py-2 px-4 bg-[#E7EBEF] rounded"	14✔
207	data-testid="expiration-date"	14✔
208	/>	14✔
209	{errors.expirationDate && <p className="text-red-500">{errors.expirationDate}</p>}	14✔
210	</div>	14✔
211	<div className="flex flex-col items-start gap-1 mt-8">	14✔
212	<p className="font-bold text-2xl">Pricing</p>	14✔
213	<div className="flex flex-col items-start gap-1">	14✔
214	<p className="font-medium">New Price (Rwf)</p>	14✔
215	<input	14✔
216	type="text"	14✔
217	value={newPrice}	14✔
218	onChange={(e) => setNewPrice(e.target.value)}	14✔
219	className="py-2 px-4 bg-[#E7EBEF] rounded"	14✔
220	data-testid="new-price"	14✔
221	/>	14✔
222	{errors.newPrice && <p className="text-red-500">{errors.newPrice}</p>}	14✔
223	</div>	14✔
224	<div className="flex flex-col items-start gap-1">	14✔
225	<p className="font-medium">Old Price (Rwf)</p>	14✔
226	<input	14✔
227	type="text"	14✔
228	value={oldPrice}	14✔
229	onChange={(e) => setOldPrice(e.target.value)}	14✔
230	className="py-2 px-4 bg-[#E7EBEF] rounded"	14✔
231	data-testid="old-price"	14✔
232	/>	14✔
233	{errors.oldPrice && <p className="text-red-500">{errors.oldPrice}</p>}	14✔
234	</div>	14✔
235	</div>	14✔
236	</div>	14!
237	<div className="w-full lg:w-1/2 flex flex-col gap-8">	14✔
238	<p className="font-bold text-2xl">Product Media</p>	14✔
239	<div className="flex flex-col gap-4">	14✔
240	<p className="font-medium">Image Upload</p>	14✔
241	<input type="file" multiple onChange={handleImageUpload} className="py-2 px-4 bg-[#E7EBEF] rounded" />	14✔
242	{errors.images && <p className="text-red-500">{errors.images}</p>}	14✔
243	</div>	14✔
244	<div className="flex flex-col gap-4">	14✔
245	{imagePreviews.map((preview, index) => (	14✔
246	<div className="p-4 rounded-lg bg-[#FAFAFA] flex items-center gap-4" key={index}>	14✔
247	<img src={preview} alt={`Preview ${index + 1}`} className="w-16 h-16 object-cover rounded" />	14✔
248	<p className="text-ellipsis overflow-hidden">{preview}</p>	14✔
249	<CircleCheck className="w-6 h-6" />	14✔
250	</div>	14!
251	))}	14✔
252	</div>	14✔
253	</div>	14✔
254	</div>	22✔
255	<div className="flex gap-8 mt-8">	22✔
256	<button	22✔
257	disabled={loading}	22✔
258	onClick={handleUpdate}	22✔
259	className="px-8 py-4 rounded-lg text-white bg-[#070f2b] hover:scale-105 transition-all"	22✔
260	data-testid="update-button"	22✔
261	>	22✔
262	{loading ? 'Loading...' : 'Update'}	22✔
263	</button>	14✔
264	<Link	14✔
265	to={'/vendor/dashboard/products'}	14✔
266	className="px-8 py-4 rounded-lg text-white bg-orange hover:scale-105 transition-all"	14✔
267	>	14✔
268	Cancel	14✔
269	</Link>	14✔
270	</div>	14✔
271	</div>	14✔
272	</div>	14✔
273	);	14✔
274	};	14!
275		14✔
276	export default DashboardEditProducts;	14✔

atlp-rwanda / knights-ecomm-fe / 9803988396

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