Adds desktop notification support (#54)

* Initial attempt to add notification support. There is still and issue that when you refresh it shows all of the notifications again. It also needs some touch up work around the requesting user permission flow for the notifications.

* Refines solution and fixes bugs

* Only ask for permission if Notifications API exists

.gitignore

@@ -2,3 +2,4 @@ node_modules
 build
 client/static/index.js
 .DS_Store
+.idea/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatkit-demo",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "homepage": "https://pusher.github.io/react-slack-clone",
   "dependencies": {
     "@pusher/chatkit": "^0.7.9",

src/index.js

@@ -121,13 +121,17 @@ class View extends React.Component {
     addMessage: payload => {
       const roomId = payload.room.id
       const messageId = payload.id
+      // Update local message cache with new message
       this.setState(set(this.state, ['messages', roomId, messageId], payload))
+      // Update cursor if the message was read
       if (roomId === this.state.room.id) {
         const cursor = this.state.user.readCursor({ roomId }) || {}
         const cursorPosition = cursor.position || 0
         cursorPosition < messageId && this.actions.setCursor(roomId, messageId)
         this.actions.scrollToEnd()
       }
+      // Send notification
+      this.actions.showNotification(payload)
     },
 
     runCommand: command => {
@@ -164,9 +168,35 @@ class View extends React.Component {
     // --------------------------------------
 
     setUserPresence: () => this.forceUpdate(),
+
+    // --------------------------------------
+    // Notifications
+    // --------------------------------------
+
+    showNotification: message => {
+      if (
+        'Notification' in window &&
+        this.state.user.id &&
+        this.state.user.id !== message.senderId &&
+        document.visibilityState === 'hidden'
+      ) {
+        const notification = new Notification(
+          `New Message from ${message.sender.id}`,
+          {
+            body: message.text,
+            icon: message.sender.avatarURL,
+          }
+        )
+        notification.addEventListener('click', e => {
+          this.actions.joinRoom(message.room)
+          window.focus()
+        })
+      }
+    },
   }
 
   componentDidMount() {
+    'Notification' in window && Notification.requestPermission()
     existingUser
       ? ChatManager(this, JSON.parse(existingUser))
       : fetch('https://chatkit-demo-server.herokuapp.com/auth', {
@@ -192,6 +222,7 @@ class View extends React.Component {
       userListOpen,
     } = this.state
     const { createRoom, createConvo, removeUserFromRoom } = this.actions
+
     return (
       <main>
         <aside data-open={sidebarOpen}>