diff --git a/web/src/components/MyEMS/Notification/Notification.js b/web/src/components/MyEMS/Notification/Notification.js index 50af1e93..62aa3a62 100644 --- a/web/src/components/MyEMS/Notification/Notification.js +++ b/web/src/components/MyEMS/Notification/Notification.js @@ -62,7 +62,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { let isResponseOK = false; if (!fetchSuccess) { - fetch(APIBaseURL + '/notifications?' + + fetch(APIBaseURL + '/webmessagesnew?' + 'startdatetime=' + startDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&enddatetime=' + endDatetime.format('YYYY-MM-DDTHH:mm:ss'), { method: 'GET', @@ -90,7 +90,8 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { let notification = {} notification['id'] = json[index]['id']; notification['subject'] = json[index]['subject']; - notification['created_datetime'] = json[index]['created_datetime']; + notification['created_datetime'] = moment(parseInt(json[index]['created_datetime'])) + .format("YYYY-MM-DD HH:mm:ss"); notification['message'] = json[index]['message']; notification['status'] = json[index]['status']; notification['url'] = json[index]['url']; @@ -250,7 +251,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { const handleRead = (id, ) => { console.log('Mark As Read: ', id) let isResponseOK = false; - fetch(APIBaseURL + '/notifications/' + id, { + fetch(APIBaseURL + '/webmessages/' + id, { method: 'PUT', headers: { "Content-type": "application/json", @@ -259,7 +260,8 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { }, body: JSON.stringify({ "data": { - "status": 'read' + "status": 'acknowledged', + "reply": 'ok' } }), }).then(response => { diff --git a/web/src/components/navbar/NotificationDropdown.js b/web/src/components/navbar/NotificationDropdown.js index 8621bbfe..408faabe 100644 --- a/web/src/components/navbar/NotificationDropdown.js +++ b/web/src/components/navbar/NotificationDropdown.js @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap'; import ListGroup from 'reactstrap/es/ListGroup'; @@ -11,14 +11,70 @@ import useFakeFetch from '../../hooks/useFakeFetch'; import FalconCardHeader from '../common/FalconCardHeader'; import Notification from '../notification/Notification'; import { withTranslation } from 'react-i18next'; +import { APIBaseURL } from "../../config"; +import moment from 'moment'; +import { toast } from "react-toastify"; +import { getCookieValue } from '../../helpers/utils'; const NotificationDropdown = ({ t }) => { // State - const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications); - const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications); + const [rawNewNotificationschild, setRawNewNotificationschild] = useState([]); const [isOpen, setIsOpen] = useState(false); const [isAllRead, setIsAllRead] = useState(false); + useEffect(() => { + let isResponseOK = false; + fetch(APIBaseURL + '/webmessagesnew', { + method: 'GET', + headers: { + "Content-type": "application/json", + "User-UUID": getCookieValue('user_uuid'), + "Token": getCookieValue('token') + }, + body: null, + + }).then(response => { + console.log(response); + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }).then(json => { + console.log(json) + if (isResponseOK) { + let NewnotificationList = [] + if (json.length > 0) { + json.forEach((currentValue, index) => { + let notification = {} + notification['id'] = json[index]['id']; + notification['status'] = json[index]['status']; + notification['subject'] = json[index]['subject'] + notification['message'] = json[index]['message']; + notification['created_datetime'] = moment(parseInt(json[index]['created_datetime'])) + .format("YYYY-MM-DD HH:mm:ss"); + if (NewnotificationList.length > 3 ){ + return true + } + if (notification['message'].length > 40){ + notification['message'] = notification['message'].substring(0,30) + "..."; + } + if (notification["status"] === "new"){ + NewnotificationList.push(notification); + } + + }); + } + setRawNewNotificationschild(NewnotificationList); + } + }).catch(err => { + console.log(err); + }); + + }, [t,]); + console.log("test"); + console.log(rawNewNotificationschild); + + // Handler const handleToggle = e => { e.preventDefault(); @@ -27,30 +83,43 @@ const NotificationDropdown = ({ t }) => { const markAsRead = e => { e.preventDefault(); - const updatedNewNotifications = newNotifications.map(notification => { - if (notification.hasOwnProperty('unread')) { - return { - ...notification, - unread: false - }; + rawNewNotificationschild.map((notification,index) => { + console.log('Mark As Read: ', notification["id"]) + let isResponseOK = false; + fetch(APIBaseURL + '/webmessages/' + notification["id"], { + method: 'PUT', + headers: { + "Content-type": "application/json", + "User-UUID": getCookieValue('user_uuid'), + "Token": getCookieValue('token') + }, + body: JSON.stringify({ + "data": { + "status": 'acknowledged', + "reply": 'ok' + } + }), + }).then(response => { + if (response.ok) { + isResponseOK = true; + return null; + } else { + return response.json(); } - return notification; - }); - const updatedEarlierNotifications = earlierNotifications.map(notification => { - if (notification.hasOwnProperty('unread')) { - return { - ...notification, - unread: false - }; - } - setIsAllRead(true); - return notification; - }); + }).then(json => { + console.log(isResponseOK); + if (isResponseOK) { - setNewNotifications(updatedNewNotifications); - setEarlierNotifications(updatedEarlierNotifications); + } else { + toast.error(json.description) + } + }).catch(err => { + console.log(err); + }); + }); }; + return ( {
{t('notification_NEW')}
- {isIterableArray(newNotifications) && - newNotifications.map((notification, index) => ( - - - - ))} -
{t('notification_EARLIER')}
- {isIterableArray(earlierNotifications) && - earlierNotifications.map((notification, index) => ( + {isIterableArray(rawNewNotificationschild) && + rawNewNotificationschild.map((notification, index) => ( ))} +
diff --git a/web/src/components/notification/Notification.js b/web/src/components/notification/Notification.js index 97aa5f15..4c515a0b 100644 --- a/web/src/components/notification/Notification.js +++ b/web/src/components/notification/Notification.js @@ -5,38 +5,28 @@ import { Link } from 'react-router-dom'; import Avatar from '../common/Avatar'; import createMarkup from '../../helpers/createMarkup'; -const Notification = ({ to, avatar, time, className, unread, flush, emoji, children }) => ( - - {avatar && ( -
- -
- )} +const Notification = ({ created_datetime, id, status, flush, message,subject}) => ( +
-

+

{subject}

{status}

+

- {emoji && ( - - {emoji} - - )} - {time} + {created_datetime}

); Notification.propTypes = { - to: PropTypes.string.isRequired, - avatar: PropTypes.shape(Avatar.propTypes), - time: PropTypes.string.isRequired, - className: PropTypes.string, - unread: PropTypes.bool, + created_datetime: PropTypes.string.isRequired, + id: PropTypes.string, + status: PropTypes.string, + subject: PropTypes.string, flush: PropTypes.bool, - emoji: PropTypes.string, - children: PropTypes.node + message: PropTypes.node }; -Notification.defaultProps = { unread: false, flush: false }; +Notification.defaultProps = { status: "acknowledged", flush: false }; export default Notification;