9649996585

Committed 24 Jun 2024 05:47PM UTC coverage: 85.556% (+0.2%) from 85.401%

Build # 9649996585

Build Type

Pull #35

github

Committed by

web-flow

Commit Message

Merge aacc6554c into 3a91a4b51

Pull Request Pull Request #35: Feature addition of new product by the vendor

Run Details

147 of 248 branches covered (59.27%)

Branch coverage included in aggregate %.

952 of 1091 new or added lines in 18 files covered. (87.26%)

2 existing lines in 1 file now uncovered.

2329 of 2646 relevant lines covered (88.02%)

3.04 hits per line

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

90.35

/src/components/Dashboard/DashboardNavbar/DashboardNavbar.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { jwtDecode } from 'jwt-decode';
import notificationIcon from '/notification.svg';
import searchIcon from '/search.svg';
import { Link } from 'react-router-dom';
import { AlignJustify } from 'lucide-react';

interface DashboardNavBarProps {
  setOpenNav: (open: boolean) => void;
}

interface TokenPayload {
  email: string;
  name: string;
  userType: string;
  exp: number;
  firstName: string;
  role: string;
  lastName: string;
}

const DashboardNavbar: React.FC<DashboardNavBarProps> = ({ setOpenNav }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [currentDateTime, setCurrentDateTime] = useState('');
  const [userName, setUserName] = useState('');
  const navigate = useNavigate();

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

  useEffect(() => {
    const updateDateTime = () => {
      const now = new Date();
      const options: Intl.DateTimeFormatOptions = {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        hour12: true,
        timeZone: 'Etc/GMT-2',
        timeZoneName: 'short'
      };
      const formattedDateTime = new Intl.DateTimeFormat('en-GB', options).format(now);
      setCurrentDateTime(formattedDateTime);
    };

    updateDateTime();
    const intervalId = setInterval(updateDateTime, 60000);

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    const tokenString = localStorage.getItem('userToken');
    if (!tokenString) {
      navigate('/login');
      return;
    }

    try {
      const decodedToken = jwtDecode<TokenPayload>(tokenString);
      setUserName(decodedToken.firstName);
    } catch (error) {
      console.error('Failed to decode token:', error);
      navigate('/login');
    }
  }, [navigate]);

  return (
    <div className="flex justify-end gap-4 lg:gap-0 flex-col-reverse items-end lg:flex-row lg:justify-between lg:items-center p-8 border-b-[1px] border-[#7c7c7c] text-black relative">
      <Link to={'/vendor/dashboard'} className="lg:hidden text-4xl font-bold text-[#070f2b] absolute left-8 top-8">
        Knight
      </Link>
      <div className="flex flex-col items-end lg:items-start">
        <p className="font-bold text-xl">Welcome, {userName}</p>
        <p className="text-[#7c7c7c] text-sm">{currentDateTime}</p>
      </div>
      <div className="flex flex-col lg:flex-row gap-4">
        <div className="flex gap-4 items-center">
          <button className="px-4 lg:border-r-2 border-[#7c7c7c]">
            <img src={notificationIcon} alt="Notification" />
          </button>
          <button onClick={() => setOpenNav(true)} className="lg:hidden">
            <AlignJustify />
          </button>
        </div>
        <div className="hidden lg:flex px-4 py-2 rounded-lg border border-[#d1d1d1] gap-2">
          <img src={searchIcon} alt="Search" />
          <input
            type="text"
            className="bg-white w-[200px] outline-none"
            placeholder="Search..."
            value={searchTerm}
            onChange={handleSearchChange}
          />
        </div>
      </div>
    </div>
  );
};

export default DashboardNavbar;

1	import React, { useState, useEffect } from 'react';	1✔
2	import { useNavigate } from 'react-router-dom';	1✔
3	import { jwtDecode } from 'jwt-decode';	1✔
4	import notificationIcon from '/notification.svg';	1✔
5	import searchIcon from '/search.svg';	1✔
6	import { Link } from 'react-router-dom';	1✔
7	import { AlignJustify } from 'lucide-react';	1✔
8		1✔
9	interface DashboardNavBarProps {	1✔
10	setOpenNav: (open: boolean) => void;	1✔
11	}	1✔
12		1✔
13	interface TokenPayload {	1✔
14	email: string;	1✔
15	name: string;	1✔
16	userType: string;	1✔
17	exp: number;	1✔
18	firstName: string;	1✔
19	role: string;	1✔
20	lastName: string;	1✔
21	}	1✔
22		1✔
23	const DashboardNavbar: React.FC<DashboardNavBarProps> = ({ setOpenNav }) => {	1✔
24	const [searchTerm, setSearchTerm] = useState('');	3✔
25	const [currentDateTime, setCurrentDateTime] = useState('');	3✔
26	const [userName, setUserName] = useState('');	3✔
27	const navigate = useNavigate();	3✔
28		3✔
29	const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {	3✔
NEW 30	setSearchTerm(event.target.value);	×
NEW 31	};	×
32		3✔
33	useEffect(() => {	3✔
34	const updateDateTime = () => {	1✔
35	const now = new Date();	1✔
36	const options: Intl.DateTimeFormatOptions = {	1✔
37	day: 'numeric',	1✔
38	month: 'long',	1✔
39	year: 'numeric',	1✔
40	hour: 'numeric',	1✔
41	minute: 'numeric',	1✔
42	hour12: true,	1✔
43	timeZone: 'Etc/GMT-2',	1✔
44	timeZoneName: 'short'	1✔
45	};	1✔
46	const formattedDateTime = new Intl.DateTimeFormat('en-GB', options).format(now);	1✔
47	setCurrentDateTime(formattedDateTime);	1✔
48	};	1✔
49		1✔
50	updateDateTime();	1✔
51	const intervalId = setInterval(updateDateTime, 60000);	1✔
52		1✔
53	return () => clearInterval(intervalId);	1✔
54	}, []);	3✔
55		3✔
56	useEffect(() => {	3✔
57	const tokenString = localStorage.getItem('userToken');	2✔
58	if (!tokenString) {	2✔
59	navigate('/login');	2✔
60	return;	2✔
61	}	2!
NEW 62		×
NEW 63	try {	×
NEW 64	const decodedToken = jwtDecode<TokenPayload>(tokenString);	×
NEW 65	setUserName(decodedToken.firstName);	×
NEW 66	} catch (error) {	×
NEW 67	console.error('Failed to decode token:', error);	×
NEW 68	navigate('/login');	×
NEW 69	}	×
70	}, [navigate]);	3✔
71		3✔
72	return (	3✔
73	<div className="flex justify-end gap-4 lg:gap-0 flex-col-reverse items-end lg:flex-row lg:justify-between lg:items-center p-8 border-b-[1px] border-[#7c7c7c] text-black relative">	3✔
74	<Link to={'/vendor/dashboard'} className="lg:hidden text-4xl font-bold text-[#070f2b] absolute left-8 top-8">	3✔
75	Knight	3✔
76	</Link>	3✔
77	<div className="flex flex-col items-end lg:items-start">	3✔
78	<p className="font-bold text-xl">Welcome, {userName}</p>	3✔
79	<p className="text-[#7c7c7c] text-sm">{currentDateTime}</p>	3✔
80	</div>	3✔
81	<div className="flex flex-col lg:flex-row gap-4">	3✔
82	<div className="flex gap-4 items-center">	3✔
83	<button className="px-4 lg:border-r-2 border-[#7c7c7c]">	3✔
84	<img src={notificationIcon} alt="Notification" />	3✔
85	</button>	3✔
86	<button onClick={() => setOpenNav(true)} className="lg:hidden">	3✔
87	<AlignJustify />	3✔
88	</button>	3✔
89	</div>	3✔
90	<div className="hidden lg:flex px-4 py-2 rounded-lg border border-[#d1d1d1] gap-2">	3✔
91	<img src={searchIcon} alt="Search" />	3✔
92	<input	3✔
93	type="text"	3✔
94	className="bg-white w-[200px] outline-none"	3✔
95	placeholder="Search..."	3✔
96	value={searchTerm}	3✔
97	onChange={handleSearchChange}	3✔
98	/>	3✔
99	</div>	3✔
100	</div>	3✔
101	</div>	3✔
102	);	3✔
103	};	3✔
104		3✔
105	export default DashboardNavbar;	3✔

atlp-rwanda / knights-ecomm-fe / 9649996585

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