10091811074

Committed 25 Jul 2024 09:37AM UTC coverage: 90.699% (-0.1%) from 90.827%

Build # 10091811074

Build Type

Pull #79

github

Committed by

aimedivin

Commit Message

fix(vendor-product): fixes hard coded data on vendor products page

Pull Request Pull Request #79: fixes hard coded data on vendor products page

Run Details

1093 of 1377 branches covered (79.38%)

Branch coverage included in aggregate %.

375 of 393 new or added lines in 8 files covered. (95.42%)

76 existing lines in 5 files now uncovered.

11496 of 12503 relevant lines covered (91.95%)

12.28 hits per line

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

82.88

/src/components/Products/DashboardProducts/DashboardProducts.tsx

import { ListFilter, Plus } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import searchIcon from '/search.svg';
import { Link } from 'react-router-dom';
import ProductsCard from '../ProductCard/ProductsCard';
import { AppDispatch, RootState } from '../../../redux/store';
import { fetchVendorProducts } from '../../../redux/actions/productAction';
import { useDispatch, useSelector } from 'react-redux';
import { Product } from '../../../types/productTypes';
import { numFormat } from '../../../utils/numberFormat';

const DashboardProducts: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [soldOutProduct, setSoldOutProduct] = useState(0);

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value.toLowerCase());
  };

  const dispatch = useDispatch<AppDispatch>();
  const { loading, products, error } = useSelector((state: RootState) => state.getVendorProduct);

  useEffect(() => {
    dispatch(fetchVendorProducts());
  }, [dispatch]);

  useEffect(() => {
    if (products?.data.products.length) {
      let soldOut = 0;
      products?.data.products.forEach((product) => {
        if (product.quantity < 1) {
          soldOut++;
        }
      });
      setSoldOutProduct(soldOut);
    }
  }, [products]);

  const getExpiredProductsCount = (products: Product[]): number => {
    const currentDate = new Date();
    return products?.filter((product) => {
      if (product.expirationDate) {
        const expirationDate = new Date(product.expirationDate);
        return expirationDate < currentDate;
      }
      return false;
    }).length;
  };

  const expiredProductsCount = products ? getExpiredProductsCount(products.data.products) : 0;

  const filteredProducts = products?.data?.products
    ?.filter(
      (product) =>
        product.name.toLowerCase().includes(searchTerm) ||
        product.categories.some((category) => category.name.toLowerCase().includes(searchTerm))
    )
    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); // Sort by createdAt in descending order

  return (
    <div className="flex flex-col bg-[#EEF5FF] w-full h-full text-black py-8 px-4 lg:px-10 2xl:px-20 gap-8 ">
      <div className="flex gap-4 justify-between">
        <div>
          <h1 className="font-bold text-base xmd:text-lg lg:text-xl leading-4">All Products</h1>
          <p className="flex gap-x-1 items-center text-neutral-600 text-[.75rem] lg:text-sm">
            <Link to={'/vendor/dashboard'}>Dashboard</Link> &gt; <Link to={'/vendor/dashboard/products'}>Products</Link>
          </p>
        </div>
        <Link
          to={'/vendor/dashboard/products/new'}
          className="px-4 py-3 bg-[#070F2B] font-medium text-white rounded-lg flex gap-2 items-center hover:scale-105 transition-all duration-300 ease-in-out"
        >
          New Product
          <Plus />
        </Link>
      </div>
      <div className="flex gap-2 xmd:gap-5 lg:gap-10">
        <div className="flex flex-col items-center  bg-[#070F2B] text-white py-6 w-full rounded-xl gap-y-2 md:gap-y-4 lg:gap-y-6">
          <p className="font-semibold text-[.9rem] md:text-[.95rem] tracking-tight xmd:tracking-normal">
            Total Products
          </p>
          <div className="flex gap-2 items-center">
            <p className="text-[1.8rem] xmd:text-[2.8rem] lg:text-[3.5rem] font-sans leading-9 font-medium pr-2 border-r-2 tracking-tight border-white">
              {products?.data?.products ? products.data.products.length : '0'}
            </p>
            <p className="text-[.8rem] lg:text-[.85rem]">{expiredProductsCount} Expired</p>
          </div>
        </div>
        <div className="flex flex-col items-center justify-start bg-white text-black py-6 w-full rounded-xl border-2 gap-y-2 md:gap-y-4 lg:gap-y-6">
          <p className="font-semibold tracking-tight xmd:tracking-normal text-[.9rem] md:text-[.95rem]">
            Products Sold Out
          </p>
          <div className="flex gap-4">
            <p className="text-[1.8rem] xmd:text-[2.8rem] lg:text-[3.8rem] font-sans leading-10 font-medium">
              {numFormat(soldOutProduct)}
            </p>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-8 p-4 rounded-xl bg-white border-2 ">
        <div className="flex gap-x-2 xmd:gap-x-6 justify-end text-[.7rem] lg:text-sm text-nowrap">
          <div className="flex items-center gap-x-1 border focus-within:border-neutral-900 border-neutral-400 rounded-lg py-[.35rem] pl-3 pr-3 xmd:pr-12 overflow-hidden">
            <img src={searchIcon} alt="search-icon" className="w-4 lg:w-5" />
            <input
              type="text"
              className="bg-white md:w-[300px] outline-none"
              placeholder="Search by Name, Category.."
              value={searchTerm}
              onChange={handleSearchChange}
            />
          </div>
          <button className="flex items-center justify-center py-[.3rem] gap-x-2 px-3 bg-primary text-white rounded-md">
            Filter <ListFilter />
          </button>
        </div>
        <div className="grid justify-center xmd:grid-cols-2 xl:grid-cols-3 gap-y-6 xmd:gap-4 lg:gap-8">
          {error && <p className="py-2 px-4 bg-[#E7EBEF] rounded text-black ">Something went wrong please try again</p>}
          {loading ? (
            <p>Loading...</p>
          ) : (
            filteredProducts?.map((product) => <ProductsCard data={product} key={product.id} />)
          )}
        </div>
      </div>
    </div>
  );
};

export default DashboardProducts;

1	import { ListFilter, Plus } from 'lucide-react';	1✔
2	import React, { useEffect, useState } from 'react';	1✔
3	import searchIcon from '/search.svg';	1✔
4	import { Link } from 'react-router-dom';	1✔
5	import ProductsCard from '../ProductCard/ProductsCard';	1✔
6	import { AppDispatch, RootState } from '../../../redux/store';	1✔
7	import { fetchVendorProducts } from '../../../redux/actions/productAction';	1✔
8	import { useDispatch, useSelector } from 'react-redux';	1✔
9	import { Product } from '../../../types/productTypes';	1✔
10	import { numFormat } from '../../../utils/numberFormat';	1✔
11		1✔
12	const DashboardProducts: React.FC = () => {	1✔
13	const [searchTerm, setSearchTerm] = useState('');	10✔
14	const [soldOutProduct, setSoldOutProduct] = useState(0);	10✔
15		10✔
16	const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {	10✔
17	setSearchTerm(event.target.value.toLowerCase());	×
18	};	×
19		10✔
20	const dispatch = useDispatch<AppDispatch>();	10✔
21	const { loading, products, error } = useSelector((state: RootState) => state.getVendorProduct);	10✔
22		10✔
23	useEffect(() => {	10✔
24	dispatch(fetchVendorProducts());	3✔
25	}, [dispatch]);	10✔
26		10✔
27	useEffect(() => {	10✔
28	if (products?.data.products.length) {	3!
NEW 29	let soldOut = 0;	×
NEW 30	products?.data.products.forEach((product) => {	×
NEW 31	if (product.quantity < 1) {	×
NEW 32	soldOut++;	×
NEW 33	}	×
NEW 34	});	×
NEW 35	setSoldOutProduct(soldOut);	×
NEW 36	}	×
37	}, [products]);	10✔
38		10✔
39	const getExpiredProductsCount = (products: Product[]): number => {	10✔
40	const currentDate = new Date();	×
41	return products?.filter((product) => {	×
NEW 42	if (product.expirationDate) {	×
NEW 43	const expirationDate = new Date(product.expirationDate);	×
NEW 44	return expirationDate < currentDate;	×
NEW 45	}	×
NEW 46	return false;	×
47	}).length;	×
48	};	×
49		10✔
50	const expiredProductsCount = products ? getExpiredProductsCount(products.data.products) : 0;	10✔
51		10✔
52	const filteredProducts = products?.data?.products	10!
53	?.filter(	×
54	(product) =>	10✔
55	product.name.toLowerCase().includes(searchTerm) \|\|	×
56	product.categories.some((category) => category.name.toLowerCase().includes(searchTerm))	×
57	)	10✔
58	.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); // Sort by createdAt in descending order	10✔
59		10✔
60	return (	10✔
61	<div className="flex flex-col bg-[#EEF5FF] w-full h-full text-black py-8 px-4 lg:px-10 2xl:px-20 gap-8 ">	10✔
62	<div className="flex gap-4 justify-between">	10✔
63	<div>	10✔
64	<h1 className="font-bold text-base xmd:text-lg lg:text-xl leading-4">All Products</h1>	10✔
65	<p className="flex gap-x-1 items-center text-neutral-600 text-[.75rem] lg:text-sm">	10✔
66	<Link to={'/vendor/dashboard'}>Dashboard</Link> > <Link to={'/vendor/dashboard/products'}>Products</Link>	10✔
67	</p>	10✔
68	</div>	10✔
69	<Link	10✔
70	to={'/vendor/dashboard/products/new'}	10✔
71	className="px-4 py-3 bg-[#070F2B] font-medium text-white rounded-lg flex gap-2 items-center hover:scale-105 transition-all duration-300 ease-in-out"	10✔
72	>	10✔
73	New Product	10✔
74	<Plus />	10✔
75	</Link>	10✔
76	</div>	10✔
77	<div className="flex gap-2 xmd:gap-5 lg:gap-10">	10✔
78	<div className="flex flex-col items-center bg-[#070F2B] text-white py-6 w-full rounded-xl gap-y-2 md:gap-y-4 lg:gap-y-6">	10✔
79	<p className="font-semibold text-[.9rem] md:text-[.95rem] tracking-tight xmd:tracking-normal">	10✔
80	Total Products	10✔
81	</p>	10✔
82	<div className="flex gap-2 items-center">	10✔
83	<p className="text-[1.8rem] xmd:text-[2.8rem] lg:text-[3.5rem] font-sans leading-9 font-medium pr-2 border-r-2 tracking-tight border-white">	10✔
84	{products?.data?.products ? products.data.products.length : '0'}	10✔
85	</p>	10✔
86	<p className="text-[.8rem] lg:text-[.85rem]">{expiredProductsCount} Expired</p>	10✔
87	</div>	10✔
88	</div>	10✔
89	<div className="flex flex-col items-center justify-start bg-white text-black py-6 w-full rounded-xl border-2 gap-y-2 md:gap-y-4 lg:gap-y-6">	10✔
90	<p className="font-semibold tracking-tight xmd:tracking-normal text-[.9rem] md:text-[.95rem]">	10✔
91	Products Sold Out	10✔
92	</p>	10✔
93	<div className="flex gap-4">	10✔
94	<p className="text-[1.8rem] xmd:text-[2.8rem] lg:text-[3.8rem] font-sans leading-10 font-medium">	10✔
95	{numFormat(soldOutProduct)}	10✔
96	</p>	10✔
97	</div>	10✔
98	</div>	10✔
99	</div>	10✔
100	<div className="flex flex-col gap-8 p-4 rounded-xl bg-white border-2 ">	10✔
101	<div className="flex gap-x-2 xmd:gap-x-6 justify-end text-[.7rem] lg:text-sm text-nowrap">	10✔
102	<div className="flex items-center gap-x-1 border focus-within:border-neutral-900 border-neutral-400 rounded-lg py-[.35rem] pl-3 pr-3 xmd:pr-12 overflow-hidden">	10✔
103	<img src={searchIcon} alt="search-icon" className="w-4 lg:w-5" />	10✔
104	<input	10✔
105	type="text"	10✔
106	className="bg-white md:w-[300px] outline-none"	10✔
107	placeholder="Search by Name, Category.."	10✔
108	value={searchTerm}	10✔
109	onChange={handleSearchChange}	10✔
110	/>	10✔
111	</div>	10✔
112	<button className="flex items-center justify-center py-[.3rem] gap-x-2 px-3 bg-primary text-white rounded-md">	10✔
113	Filter <ListFilter />	10✔
114	</button>	10✔
115	</div>	10✔
116	<div className="grid justify-center xmd:grid-cols-2 xl:grid-cols-3 gap-y-6 xmd:gap-4 lg:gap-8">	10✔
117	{error && <p className="py-2 px-4 bg-[#E7EBEF] rounded text-black ">Something went wrong please try again</p>}	10✔
118	{loading ? (	10✔
119	<p>Loading...</p>	7✔
120	) : (	7✔
121	filteredProducts?.map((product) => <ProductsCard data={product} key={product.id} />)	7✔
122	)}	10✔
123	</div>	10✔
124	</div>	3✔
125	</div>	6✔
126	);	6!
127	};	10✔
128		10✔
129	export default DashboardProducts;	10✔

atlp-rwanda / knights-ecomm-fe / 10091811074

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