From c6fdff119afabeefa37023a843e15b8e86fc7968 Mon Sep 17 00:00:00 2001
From: Andrew Leyva <aleyva@tripwire.com>
Date: Mon, 8 Oct 2018 18:14:37 -0700
Subject: [PATCH] feat(notification): added detail callback; added Clearall
 callback

---
 .../Notification/Notification.examples.md     | 94 ++++++++++++++-----
 src/components/Notification/Notification.jsx  | 45 +++++++--
 .../Notification/NotificationBody.jsx         | 43 ++++++---
 .../Notification/NotificationFooter.jsx       |  7 +-
 .../Notification/NotificationHeader.jsx       | 25 ++++-
 .../Notification/NotificationMessage.jsx      | 29 +++++-
 src/util/getAlertIconClassName.jsx            |  2 +-
 7 files changed, 190 insertions(+), 55 deletions(-)

diff --git a/src/components/Notification/Notification.examples.md b/src/components/Notification/Notification.examples.md
index 4319d2b..861ccf2 100644
--- a/src/components/Notification/Notification.examples.md
+++ b/src/components/Notification/Notification.examples.md
@@ -2,33 +2,77 @@
 
 ```js
 const Flexbox = require('flexbox-react').default;
-
-const notificationCount = 8;
-
 const notifications1 = [];
 
 const notifications = [
-    {id:1, type:'error', title:'First Notification', description:'Tets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ', timeStamp:'Just now', isMsgRead:false},
-    {id:2, type:'success', title:'Second Notification', description:'Tetsetetsd hgfasdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:3, type:'info', title:'Third Notification', description:'Tetsetetsdhgfasdgfasjfgs dfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:4, type:'warning', title:'Fourth Notification', description:'Tetsetetsdhgfa sdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:true},
-    {id:5, type:'error', title:'Fifth Notification', description:'Tets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ', timeStamp:'Just now', isMsgRead:false},
-    {id:6, type:'error', title:'Six Notification', description:'Tetsetetsd hgfasdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:7, type:'info', title:'Seven Notification', description:'Tetsetetsdhgfasdgfasjfgs dfjgfh', timeStamp:'Just now', isMsgRead:false},
-    {id:8, type:'warning', title:'First Notification', description:'Tetsetetsdhgfa sdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:true}
+    {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.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:2,
+    type:'success',
+    title:'Second Notification',
+    description:'Curabitur congue ligula sit amet lacus gravida lacinia. Curabitur id orci vel ligula ultricies sollicitudin. Nullam vel neque commodo, rutrum diam sed, cursus ex.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:3,
+    type:'info',
+    title:'Third Notification',
+    description:'Nulla accumsan, augue sit amet maximus hendrerit, nisl erat pharetra erat, vitae lacinia quam velit tincidunt turpis. Phasellus sagittis, libero vel ullamcorper laoreet, lorem libero scelerisque nisl, nec suscipit metus lacus sit amet justo.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:4,
+    type:'warning',
+    title:'Fourth Notification',
+    description:'Pellentesque eget posuere turpis.',
+    timeStamp:'Just now',
+    isMsgRead:true},
+    {id:5,
+    type:'error',
+    title:'Fifth Notification',
+    description:'Integer enim tellus, molestie quis magna scelerisque, commodo malesuada erat. Cras sodales dolor enim.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:6,
+    type:'error',
+    title:'Six Notification',
+    description:'Fusce ac ornare nulla, ut faucibus nunc.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:7,
+    type:'info',
+    title:'Seven Notification',
+    description:'Curabitur semper tincidunt augue non faucibus. Nullam in dui pellentesque, tempor urna non, tincidunt arcu.',
+    timeStamp:'Just now',
+    isMsgRead:false},
+    {id:8,
+    type:'warning',
+    title:'Eighth Notification',
+    description:'Quisque sagittis metus ac mattis maximus. Curabitur quis lorem et diam sodales cursus.',
+    timeStamp:'Just now',
+    isMsgRead:true}
 ];
-  
-<div >
-    <Notification>
-        <Notification.Badge key={'badge'}  size='large' notificationCount={notificationCount} />
-        <Notification.Tray key={'tray'}>        
-            <Notification.Header title={'Notification'} notificationCount={notificationCount} />
-            <Notification.Body notifications={notifications} removeItem={null}>
-            </Notification.Body>           
-            <Notification.Footer>
-              <div>Clear All</div>          
-            </Notification.Footer>
-        </Notification.Tray>    
-    </Notification>
+
+initialState = {
+  detail: undefined,
+  notifications: notifications
+};
+
+<div>
+  <Notification
+    notifications={state.notifications}
+    detail={state.detail}
+    onNotificationClicked={id => {
+        console.log('clicked: '+id)
+        setState({ detail: id}) 
+      }
+    }
+    onClearAll={() => {
+        console.log('Clear All')
+      }
+    }
+    
+  />
 </div>
-```
+```
\ No newline at end of file
diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx
index 25f62b5..d36f80c 100644
--- a/src/components/Notification/Notification.jsx
+++ b/src/components/Notification/Notification.jsx
@@ -9,18 +9,45 @@ import NotificationFooter from './NotificationFooter'
 import NotificationEmpty from './NotificationEmpty'
 
 const Notification = props => {
-  const { children, ...rest } = props
-  let visible = true
-  let childrenNodes = {}
-  children.forEach(ele => {
-    childrenNodes[ele.key] = ele
-  })
+  const {
+    children,
+    notifications,
+    onNotificationClicked,
+    onClearAll,
+    ...rest
+  } = props
+
+  const notificationCount = notifications.length
+
+  const badge = (
+    <Notification.Badge
+      key={'badge'}
+      size='large'
+      notificationCount={notificationCount}
+    />
+  )
+  const tray = (
+    <Notification.Tray key={'tray'}>
+      <Notification.Header
+        title={'Notification'}
+        detail={props.detail}
+        notificationCount={notificationCount}
+        onNotificationClicked={onNotificationClicked}
+      />
+      <Notification.Body
+        detail={props.detail}
+        notifications={notifications}
+        removeItem={3}
+        onNotificationClicked={onNotificationClicked}
+      />
+      <Notification.Footer onClearAll={onClearAll} />
+    </Notification.Tray>
+  )
 
   return (
     <Popup
-      visible={visible}
-      trigger={childrenNodes.badge}
-      content={childrenNodes.tray}
+      trigger={badge}
+      content={tray}
       on='click'
       position='bottom center'
       className={'notificationPopup'}
diff --git a/src/components/Notification/NotificationBody.jsx b/src/components/Notification/NotificationBody.jsx
index 3d28a5e..bb2bea4 100644
--- a/src/components/Notification/NotificationBody.jsx
+++ b/src/components/Notification/NotificationBody.jsx
@@ -4,15 +4,34 @@ import NotificationMessage from './NotificationMessage'
 import NotificationEmpty from './NotificationEmpty'
 
 const NotificationBody = props => {
-  const { children, notifications, removeItem, ...rest } = props
-  let componentToRender = (
-    <div>
-      <NotificationEmpty />
-    </div>
-  )
+  const {
+    children,
+    notifications,
+    removeItem,
+    onNotificationClicked,
+    ...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}
+      />
+    )
+  }
 
-  if (notifications.length > 0) {
-    componentToRender = (
+  if (notificationsLength > 0) {
+    return (
       <div className='notificationBody' {...rest}>
         {notifications.map(
           ({ id, type, title, description, timeStamp, isMsgRead }) => {
@@ -23,7 +42,9 @@ const NotificationBody = props => {
               title,
               description,
               icon: icon,
-              removeItem: removeItem
+              timeStamp: timeStamp,
+              removeItem: removeItem,
+              onNotificationClicked: onNotificationClicked
             }
             return <NotificationMessage key={id} options={options} />
           }
@@ -31,9 +52,9 @@ const NotificationBody = props => {
         {children}
       </div>
     )
+  } else {
+    return <NotificationEmpty />
   }
-
-  return componentToRender
 }
 
 NotificationBody.defaultProps = {}
diff --git a/src/components/Notification/NotificationFooter.jsx b/src/components/Notification/NotificationFooter.jsx
index 63b4524..1b2fab5 100644
--- a/src/components/Notification/NotificationFooter.jsx
+++ b/src/components/Notification/NotificationFooter.jsx
@@ -1,10 +1,13 @@
 import React from 'react'
 
 const NotificationFooter = props => {
-  const { children, ...rest } = props
+  const { children, onClearAll, ...rest } = props
+  function handleClearAllClicked () {
+    onClearAll()
+  }
   return (
     <div className={'notificationFooter clearfix'} {...rest}>
-      {children}
+      <div onClick={() => handleClearAllClicked()}>Clear All</div>
     </div>
   )
 }
diff --git a/src/components/Notification/NotificationHeader.jsx b/src/components/Notification/NotificationHeader.jsx
index 8394768..d0af5c6 100644
--- a/src/components/Notification/NotificationHeader.jsx
+++ b/src/components/Notification/NotificationHeader.jsx
@@ -1,14 +1,33 @@
 import React from 'react'
 
 const NotificationHeader = props => {
-  const { title, notificationCount, children, ...rest } = props
-  return (
+  const {
+    title,
+    notificationCount,
+    detail,
+    children,
+    onNotificationClicked,
+    ...rest
+  } = props
+
+  function handlelistViewClicked () {
+    onNotificationClicked(undefined)
+  }
+
+  const detailView = (
+    <div className={'notificationHeader clearfix'} {...rest}>
+      <a onClick={() => handlelistViewClicked()}>back</a>
+    </div>
+  )
+  const listView = (
     <div className={'notificationHeader clearfix'} {...rest}>
-      <span className='notificationTitle'>{title} </span>
+      <span className='notificationTitle'>{title}</span>
       <span className='notificationCount'>{notificationCount}</span>
       {children}
     </div>
   )
+
+  return detail ? detailView : listView
 }
 
 NotificationHeader.defaultProps = {}
diff --git a/src/components/Notification/NotificationMessage.jsx b/src/components/Notification/NotificationMessage.jsx
index 446df3a..9c6f2b4 100644
--- a/src/components/Notification/NotificationMessage.jsx
+++ b/src/components/Notification/NotificationMessage.jsx
@@ -5,11 +5,28 @@ import { Icon } from 'semantic-ui-react'
 
 const NotificationMessage = props => {
   const { options, ...rest } = props
-  const { id, type, title, description, timeStamp, isMsgRead, icon } = options
+  const {
+    id,
+    type,
+    title,
+    description,
+    timeStamp,
+    icon,
+    onNotificationClicked
+  } = options
+
+  function handleNotificationClicked (id) {
+    onNotificationClicked(id)
+  }
+
+  function handleClearClicked (id) {
+    console.log('clear: ' + id)
+  }
+
   return (
     <Flexbox
       id={id}
-      isMsgRead={isMsgRead}
+      onClick={e => handleNotificationClicked(id)}
       flexDirection='column'
       flexGrow={1}
       className={'column singleNotification'}
@@ -21,7 +38,12 @@ const NotificationMessage = props => {
           <div className='notificationTitle'>{title}</div>
           <div className='notificationDesc '>{description}</div>
           <div className='notificationActions'>
-            <span className='notificationClear'>Clear</span>
+            <a
+              className='notificationClear'
+              onClick={e => handleClearClicked(id)}
+            >
+              Clear
+            </a>
           </div>
         </Flexbox>
         <div className='notificationTime'>{timeStamp}</div>
@@ -33,7 +55,6 @@ const NotificationMessage = props => {
 NotificationMessage.defaultProps = {
   title: '',
   description: '',
-  timeStamp: '',
   icon: ''
 }
 
diff --git a/src/util/getAlertIconClassName.jsx b/src/util/getAlertIconClassName.jsx
index 9241ed9..e3aa5fb 100644
--- a/src/util/getAlertIconClassName.jsx
+++ b/src/util/getAlertIconClassName.jsx
@@ -1,7 +1,7 @@
 export function getAlertIconClassName (status) {
-  console.log(status)
   if (status === 'success') return 'icon_check_alt2'
   if (status === 'information' || status === 'info') return 'ei icon_info_alt'
   if (status === 'warning') return 'ei icon_error-triangle_alt'
   if (status === 'error') return 'ei icon_error-circle_alt'
+  return ''
 }