- implemneted API for notifications;

- added styles for notifications;
- added email template to amendment page;

src/components/NotificationsSidebar/components/NotificationItem/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
 
 const NotificationItem = ({ item, clickFn }) => {
     const handleClick = () => {
@@ -8,8 +9,10 @@ const NotificationItem = ({ item, clickFn }) => {
     return (
         <li className="notificationsSidebar__listItem" onClick={handleClick}>
             <div className="notificationsSidebar__listItemContent">
-                <strong>{item.title}</strong>
-                <span>{item.createdDate}</span>
+                {item.status === 'READ'
+                    ? <p>{item.title}</p>
+                    : <strong>{item.title}</strong>}
+                <span>{getDateFromISOstring(item.createdDate)}</span>
             </div>
             <i className="pi pi-angle-right"></i>
         </li>

src/components/NotificationsSidebar/components/NotificationItemChosen/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Button } from 'primereact/button';
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
 
-const NotificationItemChosen = ({ item, closeFn }) => {
+const NotificationItemChosen = ({ item, closeFn, markReadFn }) => {
     return (
         <div className="notificationsSidebar__listItemChosen">
             <Button
@@ -13,8 +14,15 @@ const NotificationItemChosen = ({ item, closeFn }) => {
                 label={__('Indietro', 'gepafin')}
                 icon="pi pi-arrow-left" iconPos="left"/>
             <strong>{item.title}</strong>
-            <span>{item.createdDate}</span>
+            <span>{getDateFromISOstring(item.createdDate)}</span>
             {item.message}
+
+            <Button
+                style={{marginTop: '20px'}}
+                type="button"
+                outlined
+                onClick={() => markReadFn(item.id)}
+                label={__('Letto', 'gepafin')}/>
         </div>
     )
 }

src/components/NotificationsSidebar/index.js

@@ -8,6 +8,9 @@ import { storeGet, useStore } from '../../store';
 // api
 import NotificationService from '../../service/notification-service';
 
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
 // components
 import { Badge } from 'primereact/badge';
 import { Sidebar } from 'primereact/sidebar';
@@ -33,11 +36,12 @@ const NotificationsSidebar = () => {
 
     const fetchTabData = (index) => {
         setChosenMsg({});
-        console.log('fetchTabData', index);
-        setLoading(true);
-        setTimeout(() => {
-            setLoading(false);
-        }, 7000)
+
+        if (0 === index) {
+            fetchMessages();
+        } else {
+            fetchMessages('READ');
+        }
     }
 
     const chooseNotification = (id) => {
@@ -52,28 +56,79 @@ const NotificationsSidebar = () => {
         setChosenMsg({});
     }
 
+    const fetchMessages = (status = 'UNREAD') => {
+        const chosenCompanyId = storeGet.main.chosenCompanyId();
+        const userData = storeGet.main.userData();
+        const role = pathOr('', ['role', 'roleType'], userData);
+
+        if (userData.id && chosenCompanyId !== 0 && role === 'ROLE_BENEFICIARY') {
+            setLoading(true);
+            NotificationService.getNotifications(
+                userData.id,
+                status === 'UNREAD' ? getNotifications : getNotificationsRead,
+                errGetNotifications,
+                [
+                    ['status', status],
+                    ['companyId', chosenCompanyId]
+                ]
+            );
+        } else if (userData.id && role !== 'ROLE_BENEFICIARY') {
+            setLoading(true);
+            NotificationService.getNotifications(
+                userData.id,
+                status === 'UNREAD' ? getNotifications : getNotificationsRead,
+                errGetNotifications,
+                [
+                    ['status', status]
+                ]
+            );
+        }
+    }
+
     const getNotifications = (resp) => {
-        console.log('resp', resp);
+        if (resp.status === 'SUCCESS') {
+            setNotifications(resp.data);
+        }
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
+
+    const getNotificationsRead = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            setNotificationsRead(resp.data);
+        }
+        set404FromErrorResponse(resp);
+        setLoading(false);
     }
 
     const errGetNotifications = (resp) => {
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
 
+    const makeNotificationRead = (id) => {
+        NotificationService.notificationMakeRead(id, makeReadCallback, makeReadErrorCallback)
+    }
+
+    const makeReadCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            if (0 === activeIndex) {
+                const msgs = notifications.map(o => o.id === resp.data.id ? resp.data : o);
+                setNotifications(msgs);
+            } else {
+                const msgs = notificationsRead.map(o => o.id === resp.data.id ? resp.data : o);
+                setNotificationsRead(msgs);
+            }
+        }
+        set404FromErrorResponse(resp);
+    }
+
+    const makeReadErrorCallback = (resp) => {
+        set404FromErrorResponse(resp);
     }
 
     useEffect(() => {
-        const role = pathOr('', ['role', 'roleType'], userData);
-
-        console.log('chosenCompanyId', chosenCompanyId, role)
-        if (userData.id && chosenCompanyId !== 0 && role === 'ROLE_BENEFICIARY') {
-            NotificationService.getNotifications(userData.id, getNotifications, errGetNotifications, [
-                ['status', 'UNREAD'],
-                ['companyId', chosenCompanyId]
-            ]);
-        } else if (userData.id && role !== 'ROLE_BENEFICIARY') {
-            NotificationService.getNotifications(userData.id, getNotifications, errGetNotifications, [
-                ['status', 'UNREAD']
-            ]);
-        }
+        fetchMessages();
     }, [chosenCompanyId, userData.id]);
 
     return (
@@ -94,11 +149,16 @@ const NotificationsSidebar = () => {
                                 <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
                             </div>
                             : !isEmpty(chosenMsg)
-                                ? <NotificationItemChosen item={chosenMsg} closeFn={closeChosenMsg}/>
+                                ? <NotificationItemChosen
+                                    item={chosenMsg}
+                                    closeFn={closeChosenMsg}
+                                    markReadFn={makeNotificationRead}/>
                                 : (notifications.length > 0
                                     ? <ul className="notificationsSidebar__list">
-                                        {notifications.map(o => <NotificationItem key={o.id} item={o}
-                                                                                  clickFn={chooseNotification}/>)}
+                                        {notifications.map(o => <NotificationItem
+                                            key={o.id}
+                                            item={o}
+                                            clickFn={chooseNotification}/>)}
                                     </ul>
                                     : <div className="notificationsSidebar__loading">
                                         <i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
@@ -111,11 +171,16 @@ const NotificationsSidebar = () => {
                                 <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
                             </div>
                             : !isEmpty(chosenMsg)
-                                ? <NotificationItemChosen item={chosenMsg} closeFn={closeChosenMsg}/>
+                                ? <NotificationItemChosen
+                                    item={chosenMsg}
+                                    closeFn={closeChosenMsg}
+                                    markReadFn={makeNotificationRead}/>
                                 : (notificationsRead.length > 0
                                 ? <ul className="notificationsSidebar__list">
-                                    {notificationsRead.map(o => <NotificationItem key={o.id} item={o}
-                                                                                  clickFn={chooseNotification}/>)}
+                                    {notificationsRead.map(o => <NotificationItem
+                                        key={o.id}
+                                        item={o}
+                                        clickFn={chooseNotification}/>)}
                                 </ul>
                                 :
                                 <div className="notificationsSidebar__loading">