10011190902

Committed 19 Jul 2024 04:22PM UTC coverage: 90.46% (+0.1%) from 90.33%

Build # 10011190902

Build Type

Pull #71

github

Committed by

elijahladdie

Commit Message

protect routes

Pull Request Pull Request #71: Protecting routes

Run Details

805 of 1029 branches covered (78.23%)

Branch coverage included in aggregate %.

151 of 158 new or added lines in 6 files covered. (95.57%)

1 existing line in 1 file now uncovered.

8696 of 9474 relevant lines covered (91.79%)

9.64 hits per line

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

89.26

/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';

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

  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]);

  const getExpiredProductsCount = (products: Product[]): number => {
    const currentDate = new Date();
    return products?.filter((product) => {
      const expirationDate = new Date(product.expirationDate);
      return expirationDate < currentDate;
    }).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 p-8 gap-8 ">
      <div className="flex gap-4 justify-between">
        <div>
          <h1 className="font-bold text-2xl ">All Products</h1>
          <p>
            <Link to={'/vendor/dashboard'}>Dashboard</Link> &gt; <Link to={'/vendor/dashboard/products'}>Products</Link>
          </p>
        </div>
        <Link
          to={'/vendor/dashboard/products/new'}
          className="px-8 py-4 bg-[#070F2B] font-semibold text-white rounded-lg flex gap-4 items-center hover:scale-105 transition-all duration-300 ease-in-out"
        >
          New Product
          <Plus />
        </Link>
      </div>
      <div className="flex gap-8">
        <div className="flex flex-col items-center  bg-[#070F2B] text-white py-6 w-full rounded-xl gap-8">
          <p className="font-semibold text-lg">Total Products</p>
          <div className="flex gap-4 items-center">
            <p className="font-bold text-6xl pr-4 border-r-2 border-white">
              {products?.data?.products ? products.data.products.length : '0'}
            </p>
            <p>{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-8">
          <p className="font-semibold text-lg">Products Sold Out</p>
          <div className="flex gap-4">
            <p className="font-bold text-6xl">40</p>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-8 p-6 rounded-xl bg-white border-2 ">
        <div className="flex gap-4 ml-auto">
          <div className="flex px-4 py-2 rounded-lg border border-[#d1d1d1] gap-2">
            <img src={searchIcon} />
            <input
              type="text"
              className="bg-white md:w-[300px] outline-none"
              placeholder="Search by Name, Category.."
              value={searchTerm}
              onChange={handleSearchChange}
            />
          </div>
          <button className="flex gap-2 items-center p-4 rounded-lg bg-[#070F2B] text-white">
            Filter <ListFilter />
          </button>
        </div>
        <div className="grid md:grid-cols-2 xl:grid-cols-3 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		1✔
11	const DashboardProducts: React.FC = () => {	1✔
12	const [searchTerm, setSearchTerm] = useState('');	10✔
13		10✔
14	const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {	10✔
15	setSearchTerm(event.target.value.toLowerCase());	×
16	};	×
17		10✔
18	const dispatch = useDispatch<AppDispatch>();	10✔
19	const { loading, products, error } = useSelector((state: RootState) => state.getVendorProduct);	10✔
20		10✔
21	useEffect(() => {	10✔
22	dispatch(fetchVendorProducts());	3✔
23	}, [dispatch]);	10✔
24		10✔
25	const getExpiredProductsCount = (products: Product[]): number => {	10✔
26	const currentDate = new Date();	×
27	return products?.filter((product) => {	×
28	const expirationDate = new Date(product.expirationDate);	×
29	return expirationDate < currentDate;	×
30	}).length;	×
31	};	×
32		10✔
33	const expiredProductsCount = products ? getExpiredProductsCount(products.data.products) : 0;	10✔
34		10✔
35	const filteredProducts = products?.data?.products	10!
NEW 36	?.filter(	×
37	(product) =>	10✔
38	product.name.toLowerCase().includes(searchTerm) \|\|	×
39	product.categories.some((category) => category.name.toLowerCase().includes(searchTerm))	×
40	)	10✔
41	.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); // Sort by createdAt in descending order	10✔
42		10✔
43	return (	10✔
44	<div className="flex flex-col bg-[#EEF5FF] w-full h-full text-black p-8 gap-8 ">	10✔
45	<div className="flex gap-4 justify-between">	10✔
46	<div>	10✔
47	<h1 className="font-bold text-2xl ">All Products</h1>	10✔
48	<p>	10✔
49	<Link to={'/vendor/dashboard'}>Dashboard</Link> > <Link to={'/vendor/dashboard/products'}>Products</Link>	10✔
50	</p>	10✔
51	</div>	10✔
52	<Link	10✔
53	to={'/vendor/dashboard/products/new'}	10✔
54	className="px-8 py-4 bg-[#070F2B] font-semibold text-white rounded-lg flex gap-4 items-center hover:scale-105 transition-all duration-300 ease-in-out"	10✔
55	>	10✔
56	New Product	10✔
57	<Plus />	10✔
58	</Link>	10✔
59	</div>	10✔
60	<div className="flex gap-8">	10✔
61	<div className="flex flex-col items-center bg-[#070F2B] text-white py-6 w-full rounded-xl gap-8">	10✔
62	<p className="font-semibold text-lg">Total Products</p>	10✔
63	<div className="flex gap-4 items-center">	10✔
64	<p className="font-bold text-6xl pr-4 border-r-2 border-white">	10✔
65	{products?.data?.products ? products.data.products.length : '0'}	10✔
66	</p>	10✔
67	<p>{expiredProductsCount} Expired</p>	10✔
68	</div>	10✔
69	</div>	10✔
70	<div className="flex flex-col items-center justify-start bg-white text-black py-6 w-full rounded-xl border-2 gap-8">	10✔
71	<p className="font-semibold text-lg">Products Sold Out</p>	10✔
72	<div className="flex gap-4">	10✔
73	<p className="font-bold text-6xl">40</p>	10✔
74	</div>	10✔
75	</div>	10✔
76	</div>	10✔
77	<div className="flex flex-col gap-8 p-6 rounded-xl bg-white border-2 ">	10✔
78	<div className="flex gap-4 ml-auto">	10✔
79	<div className="flex px-4 py-2 rounded-lg border border-[#d1d1d1] gap-2">	10✔
80	<img src={searchIcon} />	10✔
81	<input	10✔
82	type="text"	10✔
83	className="bg-white md:w-[300px] outline-none"	10✔
84	placeholder="Search by Name, Category.."	10✔
85	value={searchTerm}	10✔
86	onChange={handleSearchChange}	10✔
87	/>	10✔
88	</div>	10✔
89	<button className="flex gap-2 items-center p-4 rounded-lg bg-[#070F2B] text-white">	10✔
90	Filter <ListFilter />	10✔
91	</button>	10✔
92	</div>	10✔
93	<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-8">	10✔
94	{error && <p className="py-2 px-4 bg-[#E7EBEF] rounded text-black ">Something went wrong please try again</p>}	10✔
95	{loading ? (	10✔
96	<p>Loading...</p>	7✔
97	) : (	7✔
98	filteredProducts?.map((product) => <ProductsCard data={product} key={product.id} />)	7✔
99	)}	10✔
100	</div>	10✔
101	</div>	3✔
102	</div>	6✔
103	);	6!
104	};	10✔
105		10✔
106	export default DashboardProducts;	10✔

atlp-rwanda / knights-ecomm-fe / 10011190902

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