From f57f16c218085756b38df4b6dfd9acb76e9fdc72 Mon Sep 17 00:00:00 2001
From: Matt Paine <matt@mattsoftware.com>
Date: Sat, 24 Nov 2018 07:54:41 +1000
Subject: [PATCH 1/4] feat(NotificationTray): Add property to pass a callback
 to mark all read

---
 .../Notification/NotificationTray.react.js    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js
index 6f37b7a4..43015796 100644
--- a/src/components/Notification/NotificationTray.react.js
+++ b/src/components/Notification/NotificationTray.react.js
@@ -16,13 +16,17 @@ export type Props = {|
    * Display a small red circle to symbolize that there are unread notifications
    */
   +unread?: boolean,
+  /**
+   * Action to run when the 'Mark All As Read' button is activated
+   */
+  +markAllAsRead?: () => void,
 |};
 
 /**
  * An Icon triggered Dropdown containing Notifications
  */
 function NotificationTray(props: Props): React.Node {
-  const { children, unread, notificationsObjects } = props;
+  const { children, unread, notificationsObjects, markAllAsRead } = props;
   const notifications = children && React.Children.toArray(children);
   return (
     <Dropdown
@@ -52,10 +56,17 @@ function NotificationTray(props: Props): React.Node {
                   />
                 </Dropdown.Item>
               )))}
-          <Dropdown.ItemDivider />
-          <Dropdown.Item className="text-center text-muted-dark">
-            Mark all as read
-          </Dropdown.Item>
+          {markAllAsRead && (
+            <React.Fragment>
+              <Dropdown.ItemDivider />
+              <Dropdown.Item
+                className="text-center text-muted-dark"
+                onClick={() => markAllAsRead()}
+              >
+                Mark all as read
+              </Dropdown.Item>
+            </React.Fragment>
+          )}
         </React.Fragment>
       }
     />

From df77f8a65f6f8fea2bc961b68fce2b138153b08b Mon Sep 17 00:00:00 2001
From: Matt Paine <matt@mattsoftware.com>
Date: Sat, 24 Nov 2018 08:18:12 +1000
Subject: [PATCH 2/4] docs(NotificationTray): Adds a demo mark all as read
 callback

---
 example/src/SiteWrapper.react.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js
index 0d3f00f0..754ac2a3 100644
--- a/example/src/SiteWrapper.react.js
+++ b/example/src/SiteWrapper.react.js
@@ -16,6 +16,10 @@ type Props = {|
   +children: React.Node,
 |};
 
+type State = {|
+  +unreadCount: number,
+|};
+
 type subNavItem = {|
   +value: string,
   +to?: string,
@@ -160,8 +164,14 @@ const accountDropdownProps = {
   ],
 };
 
-class SiteWrapper extends React.Component<Props, void> {
+class SiteWrapper extends React.Component<Props, State> {
+  constructor() {
+    super();
+    this.state = { unreadCount: 2 };
+  }
+
   render(): React.Node {
+    const unreadCount = this.state.unreadCount || 0;
     return (
       <Site.Wrapper
         headerProps={{
@@ -182,7 +192,14 @@ class SiteWrapper extends React.Component<Props, void> {
               </Button>
             </Nav.Item>
           ),
-          notificationsTray: { notificationsObjects },
+          notificationsTray: {
+            notificationsObjects,
+            markAllAsRead: () =>
+              this.setState({ unreadCount: 0 }, () =>
+                setTimeout(() => this.setState({ unreadCount: 4 }), 5000)
+              ),
+            unread: unreadCount > 0,
+          },
           accountDropdown: accountDropdownProps,
         }}
         navProps={{ itemsObjects: navBarItems }}

From d48f73490b7ba1e461d15620d50a7291ee24755a Mon Sep 17 00:00:00 2001
From: Matt Paine <matt@mattsoftware.com>
Date: Sat, 24 Nov 2018 10:06:17 +1000
Subject: [PATCH 3/4] fix(NotificationTray): Only show mark all read if there
 are any unread

---
 src/components/Notification/NotificationTray.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js
index 43015796..9ab3bc71 100644
--- a/src/components/Notification/NotificationTray.react.js
+++ b/src/components/Notification/NotificationTray.react.js
@@ -56,7 +56,7 @@ function NotificationTray(props: Props): React.Node {
                   />
                 </Dropdown.Item>
               )))}
-          {markAllAsRead && (
+          {markAllAsRead && unread && (
             <React.Fragment>
               <Dropdown.ItemDivider />
               <Dropdown.Item

From e26d73613a9fd50862c08aa98d0c32389b44db05 Mon Sep 17 00:00:00 2001
From: Matt Paine <matt@mattsoftware.com>
Date: Wed, 28 Nov 2018 14:46:50 +1000
Subject: [PATCH 4/4] refactor(NotificationTray): Fix default state

---
 example/src/SiteWrapper.react.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js
index 754ac2a3..c27a8d19 100644
--- a/example/src/SiteWrapper.react.js
+++ b/example/src/SiteWrapper.react.js
@@ -165,10 +165,9 @@ const accountDropdownProps = {
 };
 
 class SiteWrapper extends React.Component<Props, State> {
-  constructor() {
-    super();
-    this.state = { unreadCount: 2 };
-  }
+  state = {
+    unreadCount: 2,
+  };
 
   render(): React.Node {
     const unreadCount = this.state.unreadCount || 0;