feat(notification): refactored so notifications, not ids get passed a…

…round. added callback for clear. other cleanup

src/components/Notification/Notification.examples.md

@@ -4,7 +4,7 @@
 const Flexbox = require('flexbox-react').default;
 const notifications1 = [];
 
-const notifications = [
+let notifications = [
     {id:1, type:'error',
     title:'First Notification',
     description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nulla arcu, elementum in nibh eu, volutpat interdum lorem. Suspendisse congue consequat congue. Vestibulum iaculis, ipsum sed semper semper, leo velit varius quam, eget tincidunt augue nunc at turpis.',
@@ -63,16 +63,42 @@ initialState = {
   <Notification
     notifications={state.notifications}
     detail={state.detail}
-    onNotificationClicked={id => {
-        console.log('clicked: '+id)
-        setState({ detail: id}) 
+    onNotificationClicked={notification => {
+        if (notification) {
+            console.log('clicked: '+notification)
+            console.log('READ: ' + notification.isMsgRead)
+            let notificationIdx = undefined
+            for (let i = 0; i < notifications.length; i++) {
+                console.log(notifications[i].id + ' =? ' + notification.id)
+                if (notifications[i].id === notification.id) {
+                    notificationIdx = i;
+                    break;
+                }
+            }
+            notifications[notificationIdx].isMsgRead = true
+        }
+        setState({ detail: notification, notifications: notifications})
       }
     }
     onClearAll={() => {
         console.log('Clear All')
+        setState({ detail: undefined, notifications: []})
+      }
+    }
+    onClearNotification={notification => {
+        console.log('clear: ' + notification.id)
+        let notificationIdx = undefined
+        for (let i = 0; i < notifications.length; i++) {
+            console.log(notifications[i].id + ' =? ' + notification.id)
+            if (notifications[i].id === notification.id) {
+                notificationIdx = i;
+                break;
+            }
+        }
+        delete notifications[notificationIdx]
+        setState({ detail: undefined, notifications: notifications})
       }
     }
-
   />
 </div>
 ```

src/components/Notification/Notification.jsx

@@ -13,6 +13,7 @@ const Notification = props => {
     children,
     notifications,
     onNotificationClicked,
+    onClearNotification,
     onClearAll,
     ...rest
   } = props
@@ -39,6 +40,7 @@ const Notification = props => {
         notifications={notifications}
         removeItem={3}
         onNotificationClicked={onNotificationClicked}
+        onClearNotification={onClearNotification}
       />
       <Notification.Footer onClearAll={onClearAll} />
     </Notification.Tray>

src/components/Notification/NotificationBody.jsx

@@ -1,60 +1,48 @@
 import React from 'react'
-import { getAlertIconClassName } from '../../util/getAlertIconClassName'
 import NotificationMessage from './NotificationMessage'
 import NotificationEmpty from './NotificationEmpty'
 
 const NotificationBody = props => {
+  function getNotification (notification) {
+    return (
+      <NotificationMessage
+        key={notification.id}
+        notification={notification}
+        onNotificationClicked={onNotificationClicked}
+        onClearNotification={onClearNotification}
+      />
+    )
+  }
+  function getNotificationContent () {
+    if (props.detail) {
+      return getNotification(props.detail)
+    }
+    if (notificationsLength > 0) {
+      return notifications.map(notification => {
+        console.log(notification.id)
+        return getNotification(notification)
+      })
+    } else {
+      return <NotificationEmpty />
+    }
+  }
+
   const {
     children,
     notifications,
     removeItem,
     onNotificationClicked,
+    onClearNotification,
     ...rest
   } = props
   const notificationsLength = notifications.length
-  console.log('NotificationBody')
-  if (props.detail) {
-    const selectedNotification = (function () {
-      for (let i = 0; i < notificationsLength; i++) {
-        console.log(notifications[i].id + ' =? ' + props.detail)
-        if (notifications[i].id === props.detail) return notifications[i]
-      }
-      return {}
-    })()
-    selectedNotification.icon = getAlertIconClassName(selectedNotification.type)
-    return (
-      <NotificationMessage
-        key={selectedNotification.id}
-        options={selectedNotification}
-      />
-    )
-  }
+  const notificationContent = getNotificationContent()
 
-  if (notificationsLength > 0) {
-    return (
-      <div className='notificationBody' {...rest}>
-        {notifications.map(
-          ({ id, type, title, description, timeStamp, isMsgRead }) => {
-            const icon = getAlertIconClassName(type)
-            const options = {
-              id,
-              type,
-              title,
-              description,
-              icon: icon,
-              timeStamp: timeStamp,
-              removeItem: removeItem,
-              onNotificationClicked: onNotificationClicked
-            }
-            return <NotificationMessage key={id} options={options} />
-          }
-        )}
-        {children}
-      </div>
-    )
-  } else {
-    return <NotificationEmpty />
-  }
+  return (
+    <div className='notificationBody' {...rest}>
+      {notificationContent}
+    </div>
+  )
 }
 
 NotificationBody.defaultProps = {}

src/components/Notification/NotificationMessage.jsx

@@ -2,31 +2,33 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Flexbox from 'flexbox-react'
 import { Icon } from 'semantic-ui-react'
+import { getAlertIconClassName } from '../../util/getAlertIconClassName'
 
 const NotificationMessage = props => {
-  const { options, ...rest } = props
   const {
-    id,
-    type,
-    title,
-    description,
-    timeStamp,
-    icon,
-    onNotificationClicked
-  } = options
+    notification,
+    onNotificationClicked,
+    onClearNotification,
+    ...rest
+  } = props
+  const { id, type, title, description, timeStamp, isMsgRead } = notification
+  const icon = getAlertIconClassName(type)
+  const isReadStyle = isMsgRead ? 'normal' : 'bold'
+  console.log('isRead: ' + isMsgRead)
 
-  function handleNotificationClicked (id) {
-    onNotificationClicked(id)
+  function handleNotificationClicked (notification) {
+    onNotificationClicked(notification)
   }
 
-  function handleClearClicked (id) {
-    console.log('clear: ' + id)
+  function handleClearClicked (e, notification) {
+    onClearNotification(notification)
+    e.stopPropagation()
   }
 
   return (
     <Flexbox
       id={id}
-      onClick={e => handleNotificationClicked(id)}
+      onClick={() => handleNotificationClicked(notification)}
       flexDirection='column'
       flexGrow={1}
       className={'column singleNotification'}
@@ -35,12 +37,17 @@ const NotificationMessage = props => {
       <Flexbox title={title}>
         <Icon className={`ei text-large notificationIcon ${type} ${icon}`} />
         <Flexbox flexDirection='column' className={`notificationContent`}>
-          <div className='notificationTitle'>{title}</div>
+          <div
+            className='notificationTitle'
+            style={{ fontWeight: isReadStyle }}
+          >
+            {title}
+          </div>
           <div className='notificationDesc '>{description}</div>
           <div className='notificationActions'>
             <a
               className='notificationClear'
-              onClick={e => handleClearClicked(id)}
+              onClick={e => handleClearClicked(e, notification)}
             >
               Clear
             </a>