Energy management system notification function WEB UI

web/src/components/navbar/NotificationDropdown.js

@@ -1,23 +1,97 @@
 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';
 import ListGroupItem from 'reactstrap/es/ListGroupItem';
-import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification';
+// import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification';
-import { isIterableArray } from '../../helpers/utils';
+import {getCookieValue, isIterableArray} from '../../helpers/utils';
 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 {createCookie , getPaginationArray} from '../../helpers/utils';
+import moment from 'moment';
+import createMarkup from '../../helpers/createMarkup';
+import {toast} from "react-toastify";
+import {notifications} from "../../data/notification/notification";
 
-const NotificationDropdown = ({ t }) => {
+const NotificationDropdown = ({ setRedirect, setRedirectUrl,t }) => {
-  // State
+  let current_moment = moment();
-  const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications);
+  useEffect(() => {
-  const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications);
+    let is_logged_in = getCookieValue('is_logged_in');
+    let user_name = getCookieValue('user_name');
+    let user_display_name = getCookieValue('user_display_name');
+    let user_uuid = getCookieValue('user_uuid');
+    let token = getCookieValue('token');
+    if ((is_logged_in === null || !is_logged_in)) {
+      setRedirectUrl(`/authentication/basic/login`);
+      setRedirect(true);
+    } else {
+      // update expires time of cookies
+      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
+      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
+      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
+      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
+      createCookie('token', token, 1000 * 60 * 60 * 8);
+    }
+  });
+  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 => {
@@ -27,28 +101,40 @@ const NotificationDropdown = ({ t }) => {
 
   const markAsRead = e => {
     e.preventDefault();
-    const updatedNewNotifications = newNotifications.map(notification => {
+    rawNewNotificationschild.map((notification,index) => {
-      if (notification.hasOwnProperty('unread')) {
+      console.log('Mark As Read: ', notification["id"])
-        return {
+      let isResponseOK = false;
-          ...notification,
+      fetch(APIBaseURL + '/webmessages/' + notification["id"], {
-          unread: false
+      method: 'PUT',
-        };
+      headers: {
+        "Content-type": "application/json",
+        "User-UUID": getCookieValue('user_uuid'),
+        "Token": getCookieValue('token')
+      },
+      body: JSON.stringify({
+        "data": {
+          "status": 'acknowledged',
+          "reply": 'ok'
         }
-      return notification;
+      }),
-    });
+      }).then(response => {
-    const updatedEarlierNotifications = earlierNotifications.map(notification => {
+      if (response.ok) {
-      if (notification.hasOwnProperty('unread')) {
+        isResponseOK = true;
-        return {
+        return null;
-          ...notification,
+      } else {
-          unread: false
+        return response.json();
-        };
       }
-      setIsAllRead(true);
+    }).then(json => {
-      return notification;
+      console.log(isResponseOK);
-    });
+      if (isResponseOK) {
 
-    setNewNotifications(updatedNewNotifications);
+      } else {
-    setEarlierNotifications(updatedEarlierNotifications);
+        toast.error(json.description)
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  });
   };
 
   return (
@@ -82,20 +168,20 @@ const NotificationDropdown = ({ t }) => {
             </Link>
           </FalconCardHeader>
           <ListGroup flush className="font-weight-normal fs--1">
-            <div className="list-group-title">{t('notification_NEW')}</div>
+            <div className="list-group-title" >{t('notification_NEW')}</div>
-            {isIterableArray(newNotifications) &&
+            {isIterableArray(rawNewNotificationschild) &&
-              newNotifications.map((notification, index) => (
+              rawNewNotificationschild.map((notification, index) => (
-                <ListGroupItem key={index} onClick={handleToggle}>
+                <ListGroupItem to="/notification" key={index} onClick={handleToggle}>
-                  <Notification {...notification} flush />
-                </ListGroupItem>
-              ))}
-            <div className="list-group-title">{t('notification_EARLIER')}</div>
-            {isIterableArray(earlierNotifications) &&
-              earlierNotifications.map((notification, index) => (
-                <ListGroupItem key={index} onClick={handleToggle}>
                   <Notification {...notification} flush />
                 </ListGroupItem>
               ))}
+            {/*<div className="list-group-title">{t('notification_EARLIER')}</div>*/}
+            {/*{isIterableArray(rawNewNotificationschild) &&*/}
+            {/*  rawNewNotificationschild.map((notification, index) => (*/}
+            {/*    <ListGroupItem key={index} onClick={handleToggle}>*/}
+            {/*      <Notification {...notification} flush />*/}
+            {/*    </ListGroupItem>*/}
+            {/*  ))}*/}
           </ListGroup>
           <div className="card-footer text-center border-top-0" onClick={handleToggle}>
             <Link className="card-link d-block" to="/notification">

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 }) => (
+const Notification = ({ created_datetime, id, status, flush, message,subject}) => (
-  <Link className={classNames('notification', { 'bg-200': unread, 'notification-flush': flush }, className)} to={to}>
+  <Link className={classNames('notification', { 'bg-200': status, 'notification-flush': flush }, id)}
-    {avatar && (
+        to="/notification">
-      <div className="notification-avatar">
-        <Avatar {...avatar} className="mr-3" />
-      </div>
-    )}
     <div className="notification-body">
-      <p className={emoji ? 'mb-1' : 'mb-0'} dangerouslySetInnerHTML={createMarkup(children)} />
+      <h5>{subject}</h5><p>{status}</p>
+      <p className={'mb-0'} dangerouslySetInnerHTML={createMarkup(message)} />
       <span className="notification-time">
-        {emoji && (
+        {created_datetime}
-          <span className="mr-1" role="img" aria-label="Emoji">
-            {emoji}
-          </span>
-        )}
-        {time}
       </span>
     </div>
   </Link>
 );
 
 Notification.propTypes = {
-  to: PropTypes.string.isRequired,
+  created_datetime: PropTypes.string.isRequired,
-  avatar: PropTypes.shape(Avatar.propTypes),
+  id: PropTypes.string,
-  time: PropTypes.string.isRequired,
+  status: PropTypes.string,
-  className: PropTypes.string,
+  subject: PropTypes.string,
-  unread: PropTypes.bool,
   flush: PropTypes.bool,
-  emoji: PropTypes.string,
+  message: PropTypes.node
-  children: PropTypes.node
 };
 
-Notification.defaultProps = { unread: false, flush: false };
+Notification.defaultProps = { status: "acknowledged", flush: false };
 
 export default Notification;