351fab63-a3d2-4e19-bafd-2a32d6df2081

Committed 11 Jul 2024 11:15AM UTC coverage: 91.851% (-0.2%) from 92.07%

Build # 351fab63-a3d2-4e19-bafd-2a32d6df2081

Build Type

push

circleci

Committed by

web-flow

Commit Message

[#187364710] Marking all notifications as read (#42)

feat(notifications): Implement mark all Notifications as Read

- On click the button the notification pane should be empty
- The notifications pane should open up when a user clicks on the icon
- User can only see unread notifications

[Delivers #187364710]

Run Details

494 of 611 branches covered (80.85%)

Branch coverage included in aggregate %.

25 of 26 new or added lines in 3 files covered. (96.15%)

2 existing lines in 1 file now uncovered.

1411 of 1463 relevant lines covered (96.45%)

10.89 hits per line

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

84.29

/src/views/NotificationPane.tsx

import { useEffect, useState } from "react";
import axiosClient from "../hooks/AxiosInstance";
import { toast } from "react-toastify";
import Modal from "react-modal";
import { FaTimes } from "react-icons/fa";
import { AppDispatch } from "../redux/store";
import {useDispatch, useSelector } from "react-redux";
import { AllReads, setAllRead } from "../redux/notificationSlice";


//Modal.setAppElement('#root');
interface Notification {
  id: number;
  productId: string;
  userId: string;
  message: string;
  isRead: boolean;
  createdAt: string
}

interface ModalProps {
  open: boolean
  onClose: () => void;
}

const NotificationPane: React.FC<ModalProps> = ({ open, onClose }) => {
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const allRead = useSelector(AllReads);
  const client = axiosClient();
  const dispatch = useDispatch<AppDispatch>();
  const notify = (message: string) => toast(message);
 

  const fetchNotifications = async (pageNumber: number) => {
    setIsLoading(true);
    try {
      const response = await client.get(`/notifications?page=${pageNumber}`);
      setNotifications(response.data.notifications);
      setTotalPages(response.data.pagination.totalPages);
      dispatch(setAllRead(response.data.notifications.every((n: Notification) => n.isRead)));
    } catch (err: any) {
    } finally {
      setIsLoading(false);
    }
  };
  const markAllAsRead = async () => {
    try {
      const response = await client.put("/notifications/all");
      if(response.status === 200){
        notify("All notifications marked as read");
        fetchNotifications(page)
      }
    } catch (err: any) {
    }
  };

  useEffect(() => {
    fetchNotifications(page);
  }, [page]);
  useEffect(() => {
    if (open) {
      setIsModalOpen(true);
    }
  }, [open, page]);

  const handleNextPage = () => {
    if (page < totalPages) {
      setPage(page + 1);
    }
  };

  const handlePrevPage = () => {
    if (page > 1) {
      setPage(page - 1);
    }
  };

  const closeModal = () => {
    setIsModalOpen(false);
    onClose()
  };
  return (
    <div className="relative p-4">
      <Modal
        isOpen={isModalOpen}
        onRequestClose={closeModal}
        contentLabel="Notifications"
        className="absolute top-0 left-0 right-0 bottom-0 m-auto bg-white p-8 rounded shadow-lg w-3/4 h-3/4 max-h-full overflow-auto"
        overlayClassName="fixed inset-0 bg-black bg-opacity-50"
      >
        <div className="flex flex-col h-full p-4 bg-chat_back">
          <h2 className="text-xl font-semibold mb-4">Notifications</h2>
          <div className="flex-1 overflow-y-auto rounded p-4">
            <ul className="space-y-4">
              {isLoading ? (
                <li className="text-center py-4">Loading...</li>
              )
              : (
                Array.isArray(notifications) && notifications.map((notification, index) => (
                  <li
                    key={notification.id}
                    className={`p-3 rounded-lg flex items-start space-x-2 ${notification.isRead ? (index % 2 === 0 ? 'bg-grayboro' : 'bg-gray-500') : 'bg-blue-100'}`}
                  >
                    <div className="flex-1">
                      <div className="flex justify-between mb-1">
                        <span className="text-custom-size text-gray-500 self-end">
                          {new Date(notification.createdAt).toLocaleDateString()}{" "}
                          {new Date(notification.createdAt).toLocaleTimeString()}
                        </span>
                      </div>
                      <p className={`text-sm ${notification.isRead ? 'font-normal' : 'font-bold flex items-center'}`}>
                            {!notification.isRead && <span className="mr-2 text-black" style={{ fontSize: '1.5rem', lineHeight: '1rem' }}>•</span>}
                           {notification.message}
                      </p>
                    </div>
                  </li>
                ))
              )}
            </ul>
          </div>
          <div className="flex justify-between mt-4">
            <button
              onClick={handlePrevPage}
              className={`bg-back_next text-white px-4 py-2 rounded ${page === 1 && "opacity-50 cursor-not-allowed"}`}
              disabled={page === 1}
              name='Back'
            >
              Back
            </button>
            <h4>Page {page}</h4>
            <button
              onClick={handleNextPage}
              className={`bg-back_next text-white px-4 py-2 rounded ${page === totalPages && "opacity-50 cursor-not-allowed"}`}
              disabled={page === totalPages}
               name='Next'
            >
              Next
            </button>
          </div>

          {!allRead && (
            <div className="flex justify-end mt-4">
              <button
                onClick={markAllAsRead}
                className="bg-green-800 text-white px-4 py-2 rounded"
                 name='Mark All as Read'
              >
                Mark All as Read
              </button>
            </div>
          )}
          <div className="absolute top-2 right-2 px-4 py-2 rounded">
            <FaTimes size={22} onClick={closeModal}  name='Close' data-testid="close-icon" /> 
          </div >
        </div>
      </Modal>
    </div>
  );
};

export default NotificationPane;

1	import { useEffect, useState } from "react";	7✔
2	import axiosClient from "../hooks/AxiosInstance";	7✔
3	import { toast } from "react-toastify";	7✔
4	import Modal from "react-modal";	7✔
5	import { FaTimes } from "react-icons/fa";	7✔
6	import { AppDispatch } from "../redux/store";
7	import {useDispatch, useSelector } from "react-redux";	7✔
8	import { AllReads, setAllRead } from "../redux/notificationSlice";	7✔
9
10
11	//Modal.setAppElement('#root');
12	interface Notification {
13	id: number;
14	productId: string;
15	userId: string;
16	message: string;
17	isRead: boolean;
18	createdAt: string
19	}
20
21	interface ModalProps {
22	open: boolean
23	onClose: () => void;
24	}
25
26	const NotificationPane: React.FC<ModalProps> = ({ open, onClose }) => {	7✔
27	const [notifications, setNotifications] = useState<Notification[]>([]);	149✔
28	const [page, setPage] = useState(1);	149✔
29	const [totalPages, setTotalPages] = useState(1);	149✔
30	const [isLoading, setIsLoading] = useState<boolean>(false);	149✔
31	const [isModalOpen, setIsModalOpen] = useState(false);	149✔
32	const allRead = useSelector(AllReads);	149✔
33	const client = axiosClient();	149✔
34	const dispatch = useDispatch<AppDispatch>();	149✔
35	const notify = (message: string) => toast(message);	149✔
36
37
38	const fetchNotifications = async (pageNumber: number) => {	149✔
39	setIsLoading(true);	58✔
40	try {	58✔
41	const response = await client.get(`/notifications?page=${pageNumber}`);	58✔
42	setNotifications(response.data.notifications);	18✔
43	setTotalPages(response.data.pagination.totalPages);	17✔
44	dispatch(setAllRead(response.data.notifications.every((n: Notification) => n.isRead)));	14✔
45	} catch (err: any) {
46	} finally {
47	setIsLoading(false);	58✔
48	}
49	};
50	const markAllAsRead = async () => {	149✔
51	try {	1✔
52	const response = await client.put("/notifications/all");	1✔
53	if(response.status === 200){	1✔
54	notify("All notifications marked as read");	1✔
55	fetchNotifications(page)	1✔
56	}
57	} catch (err: any) {
58	}
59	};
60
61	useEffect(() => {	149✔
62	fetchNotifications(page);	57✔
63	}, [page]);
64	useEffect(() => {	149✔
65	if (open) {	61✔
66	setIsModalOpen(true);	19✔
67	}
68	}, [open, page]);
69
70	const handleNextPage = () => {	149✔
71	if (page < totalPages) {	2✔
72	setPage(page + 1);	2✔
73	}
74	};
75
76	const handlePrevPage = () => {	149✔
77	if (page > 1) {	1✔
78	setPage(page - 1);	1✔
79	}
80	};
81
82	const closeModal = () => {	149✔
NEW 83	setIsModalOpen(false);	×
UNCOV 84	onClose()	×
85	};
86	return (	149✔
87	<div className="relative p-4">
88	<Modal
89	isOpen={isModalOpen}
90	onRequestClose={closeModal}
91	contentLabel="Notifications"
92	className="absolute top-0 left-0 right-0 bottom-0 m-auto bg-white p-8 rounded shadow-lg w-3/4 h-3/4 max-h-full overflow-auto"
93	overlayClassName="fixed inset-0 bg-black bg-opacity-50"
94	>
95	<div className="flex flex-col h-full p-4 bg-chat_back">
96	<h2 className="text-xl font-semibold mb-4">Notifications</h2>
97	<div className="flex-1 overflow-y-auto rounded p-4">
98	<ul className="space-y-4">
99	{isLoading ? (	149✔
100	<li className="text-center py-4">Loading...</li>
101	)
102	: (
103	Array.isArray(notifications) && notifications.map((notification, index) => (	221✔
UNCOV 104	<li	×
105	key={notification.id}
106	className={`p-3 rounded-lg flex items-start space-x-2 ${notification.isRead ? (index % 2 === 0 ? 'bg-grayboro' : 'bg-gray-500') : 'bg-blue-100'}`}	×
107	>
108	<div className="flex-1">
109	<div className="flex justify-between mb-1">
110	<span className="text-custom-size text-gray-500 self-end">
111	{new Date(notification.createdAt).toLocaleDateString()}{" "}
112	{new Date(notification.createdAt).toLocaleTimeString()}
113	</span>
114	</div>
115	<p className={`text-sm ${notification.isRead ? 'font-normal' : 'font-bold flex items-center'}`}>	×
116	{!notification.isRead && <span className="mr-2 text-black" style={{ fontSize: '1.5rem', lineHeight: '1rem' }}>•</span>}	×
117	{notification.message}
118	</p>
119	</div>
120	</li>
121	))
122	)}
123	</ul>
124	</div>
125	<div className="flex justify-between mt-4">
126	<button
127	onClick={handlePrevPage}
128	className={`bg-back_next text-white px-4 py-2 rounded ${page === 1 && "opacity-50 cursor-not-allowed"}`}	292✔
129	disabled={page === 1}
130	name='Back'
131	>
132	Back
133	</button>
134	<h4>Page {page}</h4>
135	<button
136	onClick={handleNextPage}
137	className={`bg-back_next text-white px-4 py-2 rounded ${page === totalPages && "opacity-50 cursor-not-allowed"}`}	293✔
138	disabled={page === totalPages}
139	name='Next'
140	>
141	Next
142	</button>
143	</div>
144
145	{!allRead && (	278✔
146	<div className="flex justify-end mt-4">
147	<button
148	onClick={markAllAsRead}
149	className="bg-green-800 text-white px-4 py-2 rounded"
150	name='Mark All as Read'
151	>
152	Mark All as Read
153	</button>
154	</div>
155	)}
156	<div className="absolute top-2 right-2 px-4 py-2 rounded">
157	<FaTimes size={22} onClick={closeModal} name='Close' data-testid="close-icon" />
158	</div >
159	</div>
160	</Modal>
161	</div>
162	);
163	};
164
165	export default NotificationPane;	7✔

atlp-rwanda / e-commerce-bitcrafters-fn / 351fab63-a3d2-4e19-bafd-2a32d6df2081

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