- added pagination for notifications (non beneficiary);
This commit is contained in:
Vitalii Kiiko
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { head, isEmpty, pathOr } from 'ramda';
|
||||
import SockJS from 'sockjs-client';
|
||||
@@ -19,6 +19,7 @@ import { Sidebar } from 'primereact/sidebar';
|
||||
import { TabPanel, TabView } from 'primereact/tabview';
|
||||
import NotificationItem from './components/NotificationItem';
|
||||
import NotificationItemChosen from './components/NotificationItemChosen';
|
||||
import PaginatorBasic from '../PaginatorBasic';
|
||||
|
||||
const socketUrl = process.env.REACT_APP_API_ADDRESS_WS;
|
||||
|
||||
@@ -35,22 +36,22 @@ const NotificationsSidebar = () => {
|
||||
const stomp = useRef(null);
|
||||
const [currentSubscription, setCurrentSubscription] = useState(null);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalRecordsNum, setTotalRecordsNum] = useState(0);
|
||||
const [totalPagesNum, setTotalPagesNum] = useState(0);
|
||||
const perPage = 10;
|
||||
|
||||
// Handle tab change
|
||||
const handleTabChange = (e) => {
|
||||
setActiveIndex(e.index);
|
||||
fetchTabData(e.index);
|
||||
};
|
||||
|
||||
const fetchTabData = (index) => {
|
||||
setChosenMsg({});
|
||||
|
||||
if (0 === index) {
|
||||
fetchMessages();
|
||||
} else {
|
||||
fetchMessages('READ');
|
||||
if (e.index === activeIndex) {
|
||||
return
|
||||
}
|
||||
}
|
||||
setTotalRecordsNum(0);
|
||||
setTotalPagesNum(0);
|
||||
setChosenMsg({});
|
||||
setActiveIndex(e.index);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const chooseNotification = (id) => {
|
||||
const properItems = activeIndex === 0 ? notifications : notificationsRead;
|
||||
@@ -64,10 +65,27 @@ const NotificationsSidebar = () => {
|
||||
setChosenMsg({});
|
||||
}
|
||||
|
||||
const fetchMessages = (status = 'UNREAD') => {
|
||||
const getPaginationQuery = (status = 'UNREAD', curPage = 1) => {
|
||||
return {
|
||||
'globalFilters': {
|
||||
'page': curPage,
|
||||
'limit': perPage,
|
||||
'sortBy': {
|
||||
'columnName': 'id',
|
||||
'sortDesc': true
|
||||
}
|
||||
},
|
||||
'status': [
|
||||
status
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const fetchMessages = useCallback((status = 'UNREAD') => {
|
||||
const chosenCompanyId = storeGet.main.chosenCompanyId();
|
||||
const userData = storeGet.main.userData();
|
||||
const role = pathOr('', ['role', 'roleType'], userData);
|
||||
const bodyParams = getPaginationQuery(status, currentPage);
|
||||
|
||||
if (currentSubscription) {
|
||||
//console.log('UNsubscribed')
|
||||
@@ -77,37 +95,72 @@ const NotificationsSidebar = () => {
|
||||
|
||||
if (userData.id && chosenCompanyId !== 0 && role === 'ROLE_BENEFICIARY') {
|
||||
setLoading(true);
|
||||
NotificationService.getNotifications(
|
||||
userData.id,
|
||||
status === 'UNREAD' ? getNotifications : getNotificationsRead,
|
||||
errGetNotifications,
|
||||
[
|
||||
['status', status],
|
||||
['companyId', chosenCompanyId]
|
||||
]
|
||||
);
|
||||
if (isConnected && socket.current) {
|
||||
subscribeTo(`/topic/notifications_user_${userData.id}_company_${chosenCompanyId}`)
|
||||
}
|
||||
} else if (userData.id && role !== 'ROLE_BENEFICIARY') {
|
||||
setLoading(true);
|
||||
NotificationService.getNotifications(
|
||||
NotificationService.getNotificationsByCompanyId(
|
||||
userData.id,
|
||||
chosenCompanyId,
|
||||
status === 'UNREAD' ? getNotifications : getNotificationsRead,
|
||||
errGetNotifications,
|
||||
[
|
||||
['status', status]
|
||||
]
|
||||
);
|
||||
if (isConnected && socket.current) {
|
||||
subscribeTo(`/topic/notifications_user_${userData.id}_company_${chosenCompanyId}`)
|
||||
}
|
||||
} else if (userData.id && role !== 'ROLE_BENEFICIARY') {
|
||||
setLoading(true);
|
||||
/*NotificationService.getNotifications(
|
||||
userData.id,
|
||||
status === 'UNREAD' ? getNotifications : getNotificationsRead,
|
||||
errGetNotifications,
|
||||
[
|
||||
['status', status]
|
||||
]
|
||||
);*/
|
||||
NotificationService.getNotificationsPagination(
|
||||
userData.id,
|
||||
bodyParams,
|
||||
status === 'UNREAD' ? getNotificationsPagi : getNotificationsReadPagi,
|
||||
errGetNotifications
|
||||
);
|
||||
if (isConnected && socket.current) {
|
||||
subscribeTo(`/topic/notifications_user_${userData.id}`)
|
||||
}
|
||||
}
|
||||
}, [currentPage]);
|
||||
|
||||
const getNotificationsPagi = (resp) => {
|
||||
if (resp.status === 'SUCCESS') {
|
||||
const { body, totalRecords, currentPage, totalPages } = resp.data;
|
||||
setNotifications(body);
|
||||
setTotalRecordsNum(totalRecords);
|
||||
setTotalPagesNum(totalPages);
|
||||
if (currentPage > totalPages) {
|
||||
setCurrentPage(totalPages);
|
||||
}
|
||||
}
|
||||
set404FromErrorResponse(resp);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const getNotificationsReadPagi = (resp) => {
|
||||
if (resp.status === 'SUCCESS') {
|
||||
const { body, totalRecords, currentPage, totalPages } = resp.data;
|
||||
setNotificationsRead(body);
|
||||
setTotalRecordsNum(totalRecords);
|
||||
setTotalPagesNum(totalPages);
|
||||
if (currentPage > totalPages) {
|
||||
setCurrentPage(totalPages);
|
||||
}
|
||||
}
|
||||
set404FromErrorResponse(resp);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const getNotifications = (resp) => {
|
||||
if (resp.status === 'SUCCESS') {
|
||||
setNotifications(resp.data);
|
||||
setTotalRecordsNum(resp.data.length);
|
||||
}
|
||||
set404FromErrorResponse(resp);
|
||||
setLoading(false);
|
||||
@@ -116,6 +169,7 @@ const NotificationsSidebar = () => {
|
||||
const getNotificationsRead = (resp) => {
|
||||
if (resp.status === 'SUCCESS') {
|
||||
setNotificationsRead(resp.data);
|
||||
setTotalRecordsNum(resp.data.length);
|
||||
}
|
||||
set404FromErrorResponse(resp);
|
||||
setLoading(false);
|
||||
@@ -139,6 +193,7 @@ const NotificationsSidebar = () => {
|
||||
const msgs = notificationsRead.map(o => o.id === resp.data.id ? resp.data : o);
|
||||
setNotificationsRead(msgs);
|
||||
}
|
||||
setTotalRecordsNum(totalRecordsNum - 1);
|
||||
}
|
||||
set404FromErrorResponse(resp);
|
||||
}
|
||||
@@ -152,7 +207,7 @@ const NotificationsSidebar = () => {
|
||||
stomp.current = Stomp.over(socket.current);
|
||||
|
||||
stomp.current.configure({
|
||||
debug: function(str) {
|
||||
debug: function (str) {
|
||||
//console.log(str);
|
||||
},
|
||||
reconnectDelay: 5000,
|
||||
@@ -190,10 +245,22 @@ const NotificationsSidebar = () => {
|
||||
setCurrentSubscription(subscription);
|
||||
}
|
||||
|
||||
const onPageChange = (num) => {
|
||||
setCurrentPage(num);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMessages();
|
||||
}, [chosenCompanyId, userData.id, isConnected]);
|
||||
|
||||
useEffect(() => {
|
||||
if (0 === activeIndex) {
|
||||
fetchMessages();
|
||||
} else {
|
||||
fetchMessages('READ');
|
||||
}
|
||||
}, [currentPage, activeIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
connectWebSocket();
|
||||
|
||||
@@ -215,7 +282,7 @@ const NotificationsSidebar = () => {
|
||||
<>
|
||||
<i className="pi pi-bell p-overlay-badge topBar__icon notificationsIcon"
|
||||
onClick={() => setNotificationsVisible(true)}>
|
||||
<Badge value={notifications.filter(o => o.status === 'UNREAD').length}></Badge>
|
||||
<Badge value={totalRecordsNum}></Badge>
|
||||
</i>
|
||||
<Sidebar
|
||||
className="notificationsSidebar"
|
||||
@@ -234,12 +301,19 @@ const NotificationsSidebar = () => {
|
||||
closeFn={closeChosenMsg}
|
||||
markReadFn={makeNotificationRead}/>
|
||||
: (notifications.length > 0
|
||||
? <ul className="notificationsSidebar__list">
|
||||
{notifications.map(o => <NotificationItem
|
||||
key={o.id}
|
||||
item={o}
|
||||
clickFn={chooseNotification}/>)}
|
||||
</ul>
|
||||
? <>
|
||||
<ul className="notificationsSidebar__list">
|
||||
{notifications.map(o => <NotificationItem
|
||||
key={o.id}
|
||||
item={o}
|
||||
clickFn={chooseNotification}/>)}
|
||||
</ul>
|
||||
<PaginatorBasic
|
||||
totalPages={totalPagesNum}
|
||||
currentPage={currentPage}
|
||||
clickFn={onPageChange}
|
||||
/>
|
||||
</>
|
||||
: <div className="notificationsSidebar__loading">
|
||||
<i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
|
||||
{__('Vuoto', 'gepafin')}
|
||||
@@ -256,17 +330,24 @@ const NotificationsSidebar = () => {
|
||||
closeFn={closeChosenMsg}
|
||||
markReadFn={makeNotificationRead}/>
|
||||
: (notificationsRead.length > 0
|
||||
? <ul className="notificationsSidebar__list">
|
||||
{notificationsRead.map(o => <NotificationItem
|
||||
key={o.id}
|
||||
item={o}
|
||||
clickFn={chooseNotification}/>)}
|
||||
</ul>
|
||||
:
|
||||
<div className="notificationsSidebar__loading">
|
||||
<i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
|
||||
{__('Vuoto', 'gepafin')}
|
||||
</div>)}
|
||||
? <>
|
||||
<ul className="notificationsSidebar__list">
|
||||
{notificationsRead.map(o => <NotificationItem
|
||||
key={o.id}
|
||||
item={o}
|
||||
clickFn={chooseNotification}/>)}
|
||||
</ul>
|
||||
<PaginatorBasic
|
||||
totalPages={totalPagesNum}
|
||||
currentPage={currentPage}
|
||||
clickFn={onPageChange}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
<div className="notificationsSidebar__loading">
|
||||
<i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
|
||||
{__('Vuoto', 'gepafin')}
|
||||
</div>)}
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</Sidebar>
|
||||
|
||||
Reference in New Issue
Block a user