fa6a312c-c7bb-425d-be61-3887eae19448

Committed 10 Jul 2024 09:20AM UTC coverage: 92.986% (-0.04%) from 93.026%

Build # fa6a312c-c7bb-425d-be61-3887eae19448

Build Type

Pull #42

circleci

Committed by

Yvan-David

Commit Message

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]

Pull Request Pull Request #42: [#187364710] Marking all notifications as read

Run Details

405 of 481 branches covered (84.2%)

Branch coverage included in aggregate %.

18 of 18 new or added lines in 2 files covered. (100.0%)

1 existing line in 1 file now uncovered.

1146 of 1187 relevant lines covered (96.55%)

10.32 hits per line

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

92.75

/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 noNotification from "../assets/images/no-notification.jpg";

//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, setAllRead] = useState(false);
  const client = axiosClient();
  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);
      setAllRead(notifications.every((n: Notification) => (n.isRead ===true)));
      console.log("start", allRead)
      console.log(response)
    } catch (err: any) {
      notify("failed to fetch notifications");
    } finally {
      setIsLoading(false);
    }
  };
  const markAllAsRead = async () => {
    try {
      const responses = await client.put("/notifications/all");
      if(responses.status === 200){
        console.log(responses)
        notify("All notifications marked as read");
        setAllRead(true)
      }
    } catch (err: any) {

    }
  };

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

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

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

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

atlp-rwanda / e-commerce-bitcrafters-fn / fa6a312c-c7bb-425d-be61-3887eae19448

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