10064272053

Committed 23 Jul 2024 06:20PM UTC coverage: 90.694% (-0.09%) from 90.782%

Build # 10064272053

Build Type

push

github

Committed by

Calebgisa72

Commit Message

Fix-category-banner-issues

Run Details

1088 of 1370 branches covered (79.42%)

Branch coverage included in aggregate %.

84 of 97 new or added lines in 8 files covered. (86.6%)

42 existing lines in 6 files now uncovered.

11435 of 12438 relevant lines covered (91.94%)

12.27 hits per line

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

92.79

/src/components/Notification/OneNotification.tsx

import React from 'react';
import formatDateAndTime from '../../utils/formartDate&Time';
import product from './assets/Avatar.svg';
import cart from './assets/Trolley.svg';
import order from './assets/Fast delivery.svg';
import user from './assets/User.svg';
import wishlist from './assets/Wishlist.svg';
import coupon from './assets/Gift card.svg';

import { setOpenNotification, setSelectedNotificationsIds } from '../../redux/reducers/notification';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../redux/store';
import { Link } from 'react-router-dom';

export interface NotificationProps {
  id: string;
  content: string;
  type: string;
  isRead: boolean;
  link?: string;
  createdAt: Date;
}

interface OneNotificationProps {
  noficationProp: NotificationProps;
}

const mapTypeImages: { [key: string]: string } = {
  product: product,
  cart: cart,
  order: order,
  user: user,
  wishlist: wishlist,
  coupon: coupon
};

function OneNotification({ noficationProp }: OneNotificationProps) {
  const { selectedNotificationsIds } = useSelector((state: RootState) => state.notification);
  const dispatch = useDispatch<AppDispatch>();

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedIds = selectedNotificationsIds;
    const name = event.target.name;
    if (selectedIds.includes(name)) {
      dispatch(
        setSelectedNotificationsIds(
          selectedIds.filter((selectedId) => {
            return selectedId !== name;
          })
        )
      );
    } else {
      dispatch(setSelectedNotificationsIds([...selectedIds, name]));
    }
  };

  return (
    <div
      className={`flex gap-4 px-4 py-2 items-center border-b-[2px] border-neutral-300 ${noficationProp.isRead ? '' : 'bg-neutral-200'}`}
    >
      <div className="flex items-center justify-center">
        <input
          style={{ height: '1.2rem', width: '1.2rem', cursor: 'pointer' }}
          type="checkbox"
          name={noficationProp.id}
          checked={selectedNotificationsIds.includes(noficationProp.id)}
          onChange={handleChange}
        />
      </div>

      <div className="hidden sm:flex items-center w-7 mr-3">
        <img className="w-7" src={mapTypeImages[noficationProp.type]} alt="" />
      </div>

      <div className={`flex-1 flex flex-col ${noficationProp.link ? 'hover:cursor-pointer' : ''}`}>
        <div
          onClick={() => dispatch(setOpenNotification(false))}
          className={`${noficationProp.link ? 'underline' : ''}`}
        >
          {noficationProp.link ? (
            <Link to={noficationProp.link || '/'}>{noficationProp.content}</Link>
          ) : (
            noficationProp.content
          )}
        </div>
        <div className="flex gap-2 text-gray-500 text-sm">
          {noficationProp.type}
          <span>&#183;</span>
          {formatDateAndTime(noficationProp.createdAt).date}
        </div>
      </div>

      {!noficationProp.isRead && <div className="w-3 h-3 bg-black rounded-full"></div>}
    </div>
  );
}

export default OneNotification;

1	import React from 'react';	1✔
2	import formatDateAndTime from '../../utils/formartDate&Time';	1✔
3	import product from './assets/Avatar.svg';	1✔
4	import cart from './assets/Trolley.svg';	1✔
5	import order from './assets/Fast delivery.svg';	1✔
6	import user from './assets/User.svg';	1✔
7	import wishlist from './assets/Wishlist.svg';	1✔
8	import coupon from './assets/Gift card.svg';	1✔
9		1✔
10	import { setOpenNotification, setSelectedNotificationsIds } from '../../redux/reducers/notification';	1✔
11	import { useDispatch, useSelector } from 'react-redux';	1✔
12	import { AppDispatch, RootState } from '../../redux/store';	1✔
13	import { Link } from 'react-router-dom';	1✔
14		1✔
15	export interface NotificationProps {	1✔
16	id: string;	1✔
17	content: string;	1✔
18	type: string;	1✔
19	isRead: boolean;	1✔
20	link?: string;	1✔
21	createdAt: Date;	1✔
22	}	1✔
23		1✔
24	interface OneNotificationProps {	1✔
25	noficationProp: NotificationProps;	1✔
26	}	1✔
27		1✔
28	const mapTypeImages: { [key: string]: string } = {	1✔
29	product: product,	1✔
30	cart: cart,	1✔
31	order: order,	1✔
32	user: user,	1✔
33	wishlist: wishlist,	1✔
34	coupon: coupon	1✔
35	};	1✔
36		1✔
37	function OneNotification({ noficationProp }: OneNotificationProps) {	1✔
38	const { selectedNotificationsIds } = useSelector((state: RootState) => state.notification);	1✔
39	const dispatch = useDispatch<AppDispatch>();	1✔
40		17✔
41	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {	17✔
42	const selectedIds = selectedNotificationsIds;	17✔
43	const name = event.target.name;	17✔
44	if (selectedIds.includes(name)) {	17✔
45	dispatch(	1✔
46	setSelectedNotificationsIds(	1✔
47	selectedIds.filter((selectedId) => {	1!
48	return selectedId !== name;	×
49	})	×
50	)	×
51	);	×
UNCOV 52	} else {	×
UNCOV 53	dispatch(setSelectedNotificationsIds([...selectedIds, name]));	×
UNCOV 54	}	×
55	};	1✔
56		1✔
57	return (	1✔
58	<div	1✔
59	className={`flex gap-4 px-4 py-2 items-center border-b-[2px] border-neutral-300 ${noficationProp.isRead ? '' : 'bg-neutral-200'}`}	17✔
60	>	17✔
61	<div className="flex items-center justify-center">	17✔
62	<input	17✔
63	style={{ height: '1.2rem', width: '1.2rem', cursor: 'pointer' }}	17✔
64	type="checkbox"	17✔
65	name={noficationProp.id}	17✔
66	checked={selectedNotificationsIds.includes(noficationProp.id)}	17✔
67	onChange={handleChange}	17✔
68	/>	17✔
69	</div>	17✔
70		17✔
71	<div className="hidden sm:flex items-center w-7 mr-3">	17✔
72	<img className="w-7" src={mapTypeImages[noficationProp.type]} alt="" />	17✔
73	</div>	17✔
74		17✔
75	<div className={`flex-1 flex flex-col ${noficationProp.link ? 'hover:cursor-pointer' : ''}`}>	17✔
76	<div	17✔
77	onClick={() => dispatch(setOpenNotification(false))}	17✔
78	className={`${noficationProp.link ? 'underline' : ''}`}	17✔
79	>	17✔
80	{noficationProp.link ? (	17✔
81	<Link to={noficationProp.link \|\| '/'}>{noficationProp.content}</Link>	17✔
82	) : (	17✔
83	noficationProp.content	17✔
84	)}	4✔
85	</div>	13✔
86	<div className="flex gap-2 text-gray-500 text-sm">	13✔
87	{noficationProp.type}	17✔
88	<span>·</span>	17✔
89	{formatDateAndTime(noficationProp.createdAt).date}	17✔
90	</div>	17✔
91	</div>	17✔
92		17✔
93	{!noficationProp.isRead && <div className="w-3 h-3 bg-black rounded-full"></div>}	17✔
94	</div>	17✔
95	);	17✔
96	}	17✔
97		17✔
98	export default OneNotification;	17✔

atlp-rwanda / knights-ecomm-fe / 10064272053

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