10036401392

Committed 22 Jul 2024 07:17AM UTC coverage: 90.671% (+0.02%) from 90.653%

Build # 10036401392

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #72 from atlp-rwanda/feat-In-App-Notifications

Implement In-App-Notificatons

Run Details

907 of 1153 branches covered (78.66%)

Branch coverage included in aggregate %.

392 of 423 new or added lines in 9 files covered. (92.67%)

12 existing lines in 2 files now uncovered.

9677 of 10520 relevant lines covered (91.99%)

10.83 hits per line

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

92.38

/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 { 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 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 { 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) {	17✔
38	const { selectedNotificationsIds } = useSelector((state: RootState) => state.notification);	17✔
39	const dispatch = useDispatch<AppDispatch>();	17✔
40		17✔
41	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {	17✔
42	const selectedIds = selectedNotificationsIds;	1✔
43	const name = event.target.name;	1✔
44	if (selectedIds.includes(name)) {	1!
NEW 45	dispatch(	×
NEW 46	setSelectedNotificationsIds(	×
NEW 47	selectedIds.filter((selectedId) => {	×
NEW 48	return selectedId !== name;	×
NEW 49	})	×
NEW 50	)	×
NEW 51	);	×
52	} else {	1✔
53	dispatch(setSelectedNotificationsIds([...selectedIds, name]));	1✔
54	}	1✔
55	};	1✔
56		17✔
57	return (	17✔
58	<div	17✔
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 className={`${noficationProp.link ? 'underline' : ''}`}>	17✔
77	{noficationProp.link ? (	17✔
78	<Link to={noficationProp.link \|\| '/'}>{noficationProp.content}</Link>	4✔
79	) : (	13✔
80	noficationProp.content	13✔
81	)}	17✔
82	</div>	17✔
83	<div className="flex gap-2 text-gray-500 text-sm">	17✔
84	{noficationProp.type}	17✔
85	<span>·</span>	17✔
86	{formatDateAndTime(noficationProp.createdAt).date}	17✔
87	</div>	17✔
88	</div>	17✔
89		17✔
90	{!noficationProp.isRead && <div className="w-3 h-3 bg-black rounded-full"></div>}	17✔
91	</div>	17✔
92	);	17✔
93	}	17✔
94		1✔
95	export default OneNotification;	1✔

atlp-rwanda / knights-ecomm-fe / 10036401392

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