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

88.6

/src/components/Notification/NotificationLayout.tsx

import React, { useEffect, useState } from 'react';
import { useJwt } from 'react-jwt';
import { useDispatch, useSelector } from 'react-redux';
import { RootState, AppDispatch } from '../../redux/store';
import { setAllNotifications, setUnreadNotification } from '../../redux/reducers/notification';
import Notification from './Notification';
import { io } from 'socket.io-client';
import { DecodedToken } from '../../pages/Authentication/Login';
import { NotificationProps } from './OneNotification';
import axios from 'axios';

interface notifications {
  allNotifications: NotificationProps[];
  createdAt?: Date;
  id: string;
  unRead: string | number;
  updatedAt?: Date;
}

interface notificationMessage {
  action: string;
  notifications: notifications;
}

function NotificationLayout() {
  const { userToken } = useSelector((state: RootState) => state.auth);
  const { openNotification, unreadNotifications } = useSelector((state: RootState) => state.notification);
  const { decodedToken } = useJwt<DecodedToken>(userToken);
  const socketUrl = import.meta.env.VITE_APP_API_URL;
  const [loading, setLoading] = useState(true);

  const sortedNotifications = (notifications: NotificationProps[]) => {
    return notifications.sort((a, b) => {
      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
    });
  };

  const email = decodedToken?.email;
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`${import.meta.env.VITE_APP_API_URL}/notification/`, {
          headers: {
            Authorization: `Bearer ${userToken}`
          }
        });
        if (response.status === 200) {
          if (response.data.data.message === "User doesn't have any notifications.") {
            setLoading(false);
            dispatch(setAllNotifications([]));
            dispatch(setUnreadNotification(0));
            return;
          }
          const notifications = response.data.data;

          const sorted = sortedNotifications(notifications.notificationDetails.notifications);

          dispatch(setAllNotifications(sorted));
          dispatch(setUnreadNotification(notifications.notificationDetails.unRead));
        }
        setLoading(false);
      } catch (error) {
        console.log('Failed to fetch notifications');
      }
    };
    fetchData();
  }, [userToken, dispatch]);

  useEffect(() => {
    const socket = io(socketUrl);

    socket.on('connect', () => {
      console.log('Socket.IO Connection established');
    });

    socket.on('notification', (message: notificationMessage) => {
      if (message.action === `${email} notification`) {
        dispatch(setAllNotifications(sortedNotifications(message.notifications.allNotifications)));
        dispatch(setUnreadNotification(message.notifications.unRead));
      }
    });

    socket.on('disconnect', () => {
      console.log('Socket.IO connection closed');
    });

    return () => {
      socket.disconnect();
    };
  }, [socketUrl, email, dispatch, unreadNotifications]);

  return <div>{!loading && openNotification && <Notification />}</div>;
}

export default NotificationLayout;

1	import React, { useEffect, useState } from 'react';	1✔
2	import { useJwt } from 'react-jwt';	1✔
3	import { useDispatch, useSelector } from 'react-redux';	1✔
4	import { RootState, AppDispatch } from '../../redux/store';	1✔
5	import { setAllNotifications, setUnreadNotification } from '../../redux/reducers/notification';	1✔
6	import Notification from './Notification';	1✔
7	import { io } from 'socket.io-client';	1✔
8	import { DecodedToken } from '../../pages/Authentication/Login';	1✔
9	import { NotificationProps } from './OneNotification';	1✔
10	import axios from 'axios';	1✔
11		1✔
12	interface notifications {	1✔
13	allNotifications: NotificationProps[];	1✔
14	createdAt?: Date;	1✔
15	id: string;	1✔
16	unRead: string \| number;	1✔
17	updatedAt?: Date;	1✔
18	}	1✔
19		1✔
20	interface notificationMessage {	1✔
21	action: string;	1✔
22	notifications: notifications;	1✔
23	}	1✔
24		1✔
25	function NotificationLayout() {	51✔
26	const { userToken } = useSelector((state: RootState) => state.auth);	51✔
27	const { openNotification, unreadNotifications } = useSelector((state: RootState) => state.notification);	51✔
28	const { decodedToken } = useJwt<DecodedToken>(userToken);	51✔
29	const socketUrl = import.meta.env.VITE_APP_API_URL;	51✔
30	const [loading, setLoading] = useState(true);	51✔
31		51✔
32	const sortedNotifications = (notifications: NotificationProps[]) => {	51✔
33	return notifications.sort((a, b) => {	51✔
34	return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();	51✔
35	});	2✔
36	};	4✔
37		2✔
38	const email = decodedToken?.email;	2✔
39	const dispatch = useDispatch<AppDispatch>();	51✔
40		51!
41	useEffect(() => {	51✔
42	const fetchData = async () => {	51✔
43	try {	51✔
44	const response = await axios.get(`${import.meta.env.VITE_APP_API_URL}/notification/`, {	18✔
45	headers: {	18✔
46	Authorization: `Bearer ${userToken}`	18✔
47	}	18✔
48	});	18✔
49	if (response.status === 200) {	18✔
50	if (response.data.data.message === "User doesn't have any notifications.") {	18✔
51	setLoading(false);	3✔
52	dispatch(setAllNotifications([]));	2!
NEW 53	dispatch(setUnreadNotification(0));	×
NEW 54	return;	×
NEW 55	}	×
NEW 56	const notifications = response.data.data;	×
NEW 57		×
58	const sorted = sortedNotifications(notifications.notificationDetails.notifications);	2✔
59		2✔
60	dispatch(setAllNotifications(sorted));	2✔
61	dispatch(setUnreadNotification(notifications.notificationDetails.unRead));	2✔
62	}	2✔
63	setLoading(false);	2✔
64	} catch (error) {	2✔
65	console.log('Failed to fetch notifications');	1✔
66	}	2✔
67	};	2✔
68	fetchData();	2✔
69	}, [userToken, dispatch]);	18✔
70		18✔
71	useEffect(() => {	51✔
72	const socket = io(socketUrl);	51✔
73		51✔
74	socket.on('connect', () => {	19✔
75	console.log('Socket.IO Connection established');	19✔
76	});	19✔
NEW 77		×
78	socket.on('notification', (message: notificationMessage) => {	19✔
79	if (message.action === `${email} notification`) {	19✔
80	dispatch(setAllNotifications(sortedNotifications(message.notifications.allNotifications)));	19✔
NEW 81	dispatch(setUnreadNotification(message.notifications.unRead));	×
NEW 82	}	×
NEW 83	});	×
NEW 84		×
85	socket.on('disconnect', () => {	19✔
86	console.log('Socket.IO connection closed');	19✔
87	});	19✔
NEW 88		×
89	return () => {	19✔
90	socket.disconnect();	19✔
91	};	19✔
92	}, [socketUrl, email, dispatch, unreadNotifications]);	19✔
93		19✔
94	return <div>{!loading && openNotification && <Notification />}</div>;	51✔
95	}	51✔
96		51✔
97	export default NotificationLayout;	51✔

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