34a09cd0-8e73-463a-a953-664cac1d7d9e

Committed 09 Jul 2024 07:41AM UTC coverage: 93.338% (-0.04%) from 93.382%

Build # 34a09cd0-8e73-463a-a953-664cac1d7d9e

Build Type

Pull #35

circleci

Committed by

Yvan-David

Commit Message

feat(notifications): Implement notifications pane

- The notifications pane displays a users notifications
- The notifications pane should open up when a user clicks on the icon
- User can see a list of their notifications displayed on the pane

[Delivers #187364696]

Pull Request Pull Request #35: [#187364696] Implement notifications pane

Run Details

361 of 423 branches covered (85.34%)

Branch coverage included in aggregate %.

42 of 50 new or added lines in 3 files covered. (84.0%)

5 existing lines in 1 file now uncovered.

984 of 1018 relevant lines covered (96.66%)

9.81 hits per line

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

94.0

/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";
//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 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);
    } catch (err: any) {
      notify("failed to fetch notifications");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchNotifications(page);
  }, [page]);
  console.log(open)
  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()
  };

  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>
              ) : (
                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="font-bold text-sm">{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}
            >
              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}
            >
              Next
            </button>
          </div>
          <div className="absolute top-2 right-2 px-4 py-2 rounded">
            <FaTimes size={22} onClick={closeModal} /> 
          </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	//Modal.setAppElement('#root');
7	interface Notification {
8	id: number;
9	productId: string;
10	userId: string;
11	message: string;
12	isRead: boolean;
13	createdAt: string
14	}
15
16	interface ModalProps {
17	open: boolean
18	onClose: () => void;
19	}
20
21	const NotificationPane: React.FC<ModalProps> = ({ open, onClose }) => {	5✔
22	const [notifications, setNotifications] = useState<Notification[]>([]);	83✔
23	const [page, setPage] = useState(1);	83✔
24	const [totalPages, setTotalPages] = useState(1);	83✔
25	const [isLoading, setIsLoading] = useState<boolean>(false);	83✔
26	const [isModalOpen, setIsModalOpen] = useState(false);	83✔
27	const client = axiosClient();	83✔
28	const notify = (message: string) => toast(message);	83✔
29
30	const fetchNotifications = async (pageNumber: number) => {	83✔
31	setIsLoading(true);	33✔
32	try {	33✔
33	const response = await client.get(`/notifications?page=${pageNumber}`);	33✔
34	setNotifications(response.data.notifications);	7✔
35	setTotalPages(response.data.pagination.totalPages);	6✔
36	} catch (err: any) {
37	notify("failed to fetch notifications");	27✔
38	} finally {
39	setIsLoading(false);	33✔
40	}
41	};
42
43	useEffect(() => {	83✔
44	fetchNotifications(page);	33✔
45	}, [page]);
46	console.log(open)	83✔
47	useEffect(() => {	83✔
48	if (open) {	32✔
49	setIsModalOpen(true);	7✔
50	}
51	}, [open]);
52
53	const handleNextPage = () => {	83✔
54	if (page < totalPages) {	1✔
55	setPage(page + 1);	1✔
56	}
57	};
58
59	const handlePrevPage = () => {	83✔
60	if (page > 1) {	1✔
61	setPage(page - 1);	1✔
62	}
63	};
64
65	const closeModal = () => {	83✔
NEW 66	setIsModalOpen(false);	×
NEW 67	onClose()	×
68	};
69
70	return (	83✔
71	<div className="relative p-4">
72	<Modal
73	isOpen={isModalOpen}
74	onRequestClose={closeModal}
75	contentLabel="Notifications"
76	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"
77	overlayClassName="fixed inset-0 bg-black bg-opacity-50"
78	>
79	<div className="flex flex-col h-full p-4 bg-chat_back">
80	<h2 className="text-xl font-semibold mb-4">Notifications</h2>
81	<div className="flex-1 overflow-y-auto rounded p-4">
82	<ul className="space-y-4">
83	{isLoading ? (	83✔
84	<li className="text-center py-4">Loading...</li>
85	) : (
86	notifications.map((notification, index) => (
87	<li	2✔
88	key={notification.id}
89	className={`p-3 rounded-lg flex items-start space-x-2 ${index % 2 === 0 ? 'bg-grayboro' : 'bg-gray-500'}`}	2!
90	>
91	<div className="flex-1">
92	<div className="flex justify-between mb-1">
93	<span className="text-custom-size text-gray-500 self-end">
94	{new Date(notification.createdAt).toLocaleDateString()}{" "}
95	{new Date(notification.createdAt).toLocaleTimeString()}
96	</span>
97	</div>
98	<p className="font-bold text-sm">{notification.message}</p>
99	</div>
100	</li>
101	))
102	)}
103	</ul>
104	</div>
105	<div className="flex justify-between mt-4">
106	<button
107	onClick={handlePrevPage}
108	className={`bg-back_next text-white px-4 py-2 rounded ${page === 1 && "opacity-50 cursor-not-allowed"}`}	164✔
109	disabled={page === 1}
110	>
111	Back
112	</button>
113	<h4>Page {page}</h4>
114	<button
115	onClick={handleNextPage}
116	className={`bg-back_next text-white px-4 py-2 rounded ${page === totalPages && "opacity-50 cursor-not-allowed"}`}	163✔
117	disabled={page === totalPages}
118	>
119	Next
120	</button>
121	</div>
122	<div className="absolute top-2 right-2 px-4 py-2 rounded">
123	<FaTimes size={22} onClick={closeModal} />
124	</div >
125
126	</div>
127	</Modal>
128	</div>
129	);
130	};
131
132	export default NotificationPane;	5✔

atlp-rwanda / e-commerce-bitcrafters-fn / 34a09cd0-8e73-463a-a953-664cac1d7d9e

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