deb4f0a9-072d-4634-aae5-cf86f706e873

Build # deb4f0a9-072d-4634-aae5-cf86f706e873

Build Type

circleci

Committed by Ntare cedrick

Commit Message

Merge branch 'ft-sales-status-000003' of github.com:atlp-rwanda/trojans-ec-fe into ft-sales-status-000003

Pull Request Pull Request #47: #000003 update sales status

Run Details

553 of 843 branches covered (65.6%)

Branch coverage included in aggregate %.

120 of 120 new or added lines in 8 files covered. (100.0%)

1302 of 1731 relevant lines covered (75.22%)

23.03 hits per line

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

82.61

/src/components/notification/allNotification.js

import React from 'react'
import { Checkbox, FormControlLabel } from '@mui/material';
import useNotification from '../hooks/useNotification';
import {AiOutlineDelete} from 'react-icons/ai'
import moment from 'moment';
import Spinner from '../products/viewProducts/spinner';
import { ToastContainer } from 'react-toastify';

const AllNotification = () => {

    const {
        isSelectAllSelected,
        checkedItem,
        handleBoxChange,
        totalNotification,
        handleMarkAsRead,
        handleDelete,
        visibleNotifications,
        handleViewMore,
        notifications,
        loading
    } = useNotification(); 

    const CheckNotifLength = totalNotification >= 4;
  return (
    <>
        {notifications.length > 0 ? (
          
          <div className={`mx-auto shadow-lg bg-white rounded-md drop-content w-[450px] overflow-auto ${!CheckNotifLength ? 'h-auto' : 'h-[415px]'}`}>
          <ToastContainer/>
          <div className={`flex justify-between items-center px-8 h-[60px] sticky top-0 bg-white z-40 border`} >
              <div>
                <FormControlLabel
                  control={
                      <Checkbox
                      data-testid='markAll'
                      checked={isSelectAllSelected}
                      onChange={()=> handleBoxChange(0)}
                      color='secondary'
                      />
                  }
                />
              </div>
              <div>
                {checkedItem.length > 0 &&(
                  <div className='flex justify-between items-center w-[150px]'>
                    <div>
                      <button
                        className='bg-primary-color text-white px-2 py-1 rounded-sm text-sm'
                        onClick={()=> handleMarkAsRead(checkedItem)}
                      >
                        Mark as read
                      </button>
                    </div>
                    <div>
                        <AiOutlineDelete
                          className='text-2xl text-red-700 cursor-pointer'
                          data-testid= 'delete'
                          onClick={()=>handleDelete(checkedItem)}
                        />
                    </div>
                  </div>
                )}
              </div>
            </div>
            {!loading ? (
              
                visibleNotifications?.map((data, id)=>(
                  
                  <div 
                    key={id} 
                    className={ `py-2 flex justify-center items-center border-t border-gray-300`}
                  >
                    <div className='review basis-1/4 text-center'>
                      <FormControlLabel
                        key={data.id}
                        control={
                          <Checkbox
                            data-testid={`myCheckbox${data.id}`}
                            checked={checkedItem.includes(data.id)}
                            onChange={()=>handleBoxChange(data.id)}
                            color='secondary'
                            disabled={isSelectAllSelected}
                          />
                        }
                      />
                      </div>
                    <div className='message basis-1/2'>
                      <h1 className='text-[14px] font-semibold'>{data.type}</h1>
                      <p className='text-[12px]'>{data.message}</p>
                    </div>
                    <div className='date basis-1/4 text-[12px] text-center text-gray-500'>
                      {moment(data.updatedAt).fromNow()}  
                    </div>   
                  </div>
                ))
              

            ): (
              <Spinner withoutText={true}/>
            )}

            {
              totalNotification > visibleNotifications.length ?
              (
                <center>
                  <a
                    href="#"
                    onClick={() => handleViewMore()}
                    className='block bg-secondary-color text-white w-[80%] p-1 font-medium my-3 viewMore'
                  >
                    {`See all ${totalNotification} notifications`}
                  </a>
                </center>
              ) : (
                <center>
                  {CheckNotifLength &&(
                    <a
                      href="#"
                      onClick={() => handleViewMore()}
                      className='block bg-secondary-color text-white w-[80%] p-1 font-medium my-3 '
                    >
                      {`Show less`}
                    </a>
                  )}
                </center>
              )
            }
          </div>
        ): (
            <div 
              data-testid='empty'
              className={`mx-auto shadow-lg rounded-md drop-content w-[450px] h-[50px] font-medium flex justify-center items-center bg-secondary`}>
              There is no notification
            </div>
        ) }
    </>
  )
}

export default AllNotification

1	import React from 'react'
2	import { Checkbox, FormControlLabel } from '@mui/material';
3	import useNotification from '../hooks/useNotification';
4	import {AiOutlineDelete} from 'react-icons/ai'
5	import moment from 'moment';
6	import Spinner from '../products/viewProducts/spinner';
7	import { ToastContainer } from 'react-toastify';
8
9	const AllNotification = () => {	26✔
10
11	const {
12	isSelectAllSelected,
13	checkedItem,
14	handleBoxChange,
15	totalNotification,
16	handleMarkAsRead,
17	handleDelete,
18	visibleNotifications,
19	handleViewMore,
20	notifications,
21	loading
22	} = useNotification();	22✔
23
24	const CheckNotifLength = totalNotification >= 4;	20✔
25	return (	20✔
26	<>
27	{notifications.length > 0 ? (	20✔
28
29	<div className={`mx-auto shadow-lg bg-white rounded-md drop-content w-[450px] overflow-auto ${!CheckNotifLength ? 'h-auto' : 'h-[415px]'}`}>	14!
30	<ToastContainer/>
31	<div className={`flex justify-between items-center px-8 h-[60px] sticky top-0 bg-white z-40 border`} >
32	<div>
33	<FormControlLabel
34	control={
35	<Checkbox
36	data-testid='markAll'
37	checked={isSelectAllSelected}
38	onChange={()=> handleBoxChange(0)}	2✔
39	color='secondary'
40	/>
41	}
42	/>
43	</div>
44	<div>
45	{checkedItem.length > 0 &&(	26✔
46	<div className='flex justify-between items-center w-[150px]'>
47	<div>
48	<button
49	className='bg-primary-color text-white px-2 py-1 rounded-sm text-sm'
50	onClick={()=> handleMarkAsRead(checkedItem)}	2✔
51	>
52	Mark as read
53	</button>
54	</div>
55	<div>
56	<AiOutlineDelete
57	className='text-2xl text-red-700 cursor-pointer'
58	data-testid= 'delete'
59	onClick={()=>handleDelete(checkedItem)}	2✔
60	/>
61	</div>
62	</div>
63	)}
64	</div>
65	</div>
66	{!loading ? (	14✔
67
68	visibleNotifications?.map((data, id)=>(
69
70	<div	22✔
71	key={id}
72	className={ `py-2 flex justify-center items-center border-t border-gray-300`}
73	>
74	<div className='review basis-1/4 text-center'>
75	<FormControlLabel
76	key={data.id}
77	control={
78	<Checkbox
79	data-testid={`myCheckbox${data.id}`}
80	checked={checkedItem.includes(data.id)}
81	onChange={()=>handleBoxChange(data.id)}	2✔
82	color='secondary'
83	disabled={isSelectAllSelected}
84	/>
85	}
86	/>
87	</div>
88	<div className='message basis-1/2'>
89	<h1 className='text-[14px] font-semibold'>{data.type}</h1>
90	<p className='text-[12px]'>{data.message}</p>
91	</div>
92	<div className='date basis-1/4 text-[12px] text-center text-gray-500'>
93	{moment(data.updatedAt).fromNow()}
94	</div>
95	</div>
96	))
97
98
99	): (
100	<Spinner withoutText={true}/>
101	)}
102
103	{
104	totalNotification > visibleNotifications.length ?	14✔
105	(
106	<center>
107	<a
108	href="#"
109	onClick={() => handleViewMore()}	×
110	className='block bg-secondary-color text-white w-[80%] p-1 font-medium my-3 viewMore'
111	>
112	{`See all ${totalNotification} notifications`}
113	</a>
114	</center>
115	) : (
116	<center>
117	{CheckNotifLength &&(	12!
118	<a
119	href="#"
120	onClick={() => handleViewMore()}	×
121	className='block bg-secondary-color text-white w-[80%] p-1 font-medium my-3 '
122	>
123	{`Show less`}
124	</a>
125	)}
126	</center>
127	)
128	}
129	</div>
130	): (
131	<div
132	data-testid='empty'
133	className={`mx-auto shadow-lg rounded-md drop-content w-[450px] h-[50px] font-medium flex justify-center items-center bg-secondary`}>
134	There is no notification
135	</div>
136	) }
137	</>
138	)
139	}
140
141	export default AllNotification

atlp-rwanda / trojans-ec-fe / deb4f0a9-072d-4634-aae5-cf86f706e873

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