feat(NotificationTray): Style the unread notifications

tabler · Dec 2, 2018 · 84613df · 84613df
1 parent a40997b
commit 84613df
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 38 deletions.
diff --git a/example/src/SiteWrapper.react.js b/example/src/SiteWrapper.react.js
@@ -17,7 +17,12 @@ type Props = {|
 |};
 
 type State = {|
-  unreadCount: number,
+  notificationsObjects: Array<{
+    unread: boolean,
+    avatarURL: string,
+    message: React.Node,
+    time: string,
+  }>,
 |};
 
 type subNavItem = {|
@@ -118,37 +123,6 @@ const navBarItems: Array<navItem> = [
   },
 ];
 
-const notificationsObjects = [
-  {
-    avatarURL: "demo/faces/male/41.jpg",
-    message: (
-      <React.Fragment>
-        <strong>Nathan</strong> pushed new commit: Fix page load performance
-        issue.
-      </React.Fragment>
-    ),
-    time: "10 minutes ago",
-  },
-  {
-    avatarURL: "demo/faces/female/1.jpg",
-    message: (
-      <React.Fragment>
-        <strong>Alice</strong> started new task: Tabler UI design.
-      </React.Fragment>
-    ),
-    time: "1 hour ago",
-  },
-  {
-    avatarURL: "demo/faces/female/18.jpg",
-    message: (
-      <React.Fragment>
-        <strong>Rose</strong> deployed new version of NodeJS REST Api // V3
-      </React.Fragment>
-    ),
-    time: "2 hours ago",
-  },
-];
-
 const accountDropdownProps = {
   avatarURL: "./demo/faces/female/25.jpg",
   name: "Jane Pearson",
@@ -166,11 +140,47 @@ const accountDropdownProps = {
 
 class SiteWrapper extends React.Component<Props, State> {
   state = {
-    unreadCount: 2,
+    notificationsObjects: [
+      {
+        unread: true,
+        avatarURL: "demo/faces/male/41.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Nathan</strong> pushed new commit: Fix page load performance
+            issue.
+          </React.Fragment>
+        ),
+        time: "10 minutes ago",
+      },
+      {
+        unread: true,
+        avatarURL: "demo/faces/female/1.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Alice</strong> started new task: Tabler UI design.
+          </React.Fragment>
+        ),
+        time: "1 hour ago",
+      },
+      {
+        unread: false,
+        avatarURL: "demo/faces/female/18.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Rose</strong> deployed new version of NodeJS REST Api // V3
+          </React.Fragment>
+        ),
+        time: "2 hours ago",
+      },
+    ],
   };
 
   render(): React.Node {
-    const unreadCount = this.state.unreadCount || 0;
+    const notificationsObjects = this.state.notificationsObjects || [];
+    const unreadCount = this.state.notificationsObjects.reduce(
+      (a, v) => a || v.unread,
+      false
+    );
     return (
       <Site.Wrapper
         headerProps={{
@@ -194,10 +204,24 @@ class SiteWrapper extends React.Component<Props, State> {
           notificationsTray: {
             notificationsObjects,
             markAllAsRead: () =>
-              this.setState({ unreadCount: 0 }, () =>
-                setTimeout(() => this.setState({ unreadCount: 4 }), 5000)
+              this.setState(
+                () => ({
+                  notificationsObjects: this.state.notificationsObjects.map(
+                    v => ({ ...v, unread: false })
+                  ),
+                }),
+                () =>
+                  setTimeout(
+                    () =>
+                      this.setState({
+                        notificationsObjects: this.state.notificationsObjects.map(
+                          v => ({ ...v, unread: true })
+                        ),
+                      }),
+                    5000
+                  )
               ),
-            unread: unreadCount > 0,
+            unread: unreadCount,
           },
           accountDropdown: accountDropdownProps,
         }}

diff --git a/src/components/Notification/Notification.react.js b/src/components/Notification/Notification.react.js
@@ -16,6 +16,10 @@ export type Props = {|
    * The time displayed within the Notification
    */
   +time?: string,
+  /**
+   * The time displayed within the Notification
+   */
+  +unread?: boolean,
 |};
 
 /**

diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js
@@ -48,8 +48,12 @@ function NotificationTray(props: Props): React.Node {
             ))) ||
             (notificationsObjects &&
               notificationsObjects.map((n, i) => (
-                <Dropdown.Item className="d-flex" key={i}>
+                <Dropdown.Item
+                  className={`d-flex ${n.unread ? "bg-light" : ""}`}
+                  key={i}
+                >
                   <Notification
+                    unread={n.unread}
                     avatarURL={n.avatarURL}
                     message={n.message}
                     time={n.time}