[update] nofication and image background chat

Author: jgalianoz

src/client/Components/ConversationUser.js

@@ -19,8 +19,6 @@ export default class ConversationUser extends React.Component {
   }
 
   componentDidMount(){
-    Notification.requestPermission();
-
     setTimeout(() => {
       this.setState({
         active : true
@@ -79,7 +77,7 @@ export default class ConversationUser extends React.Component {
           <div>
             <img src="images/logo.png" width="200" height="150" />
           </div>
-            
+
 
           <label className="labelA">Insert you username</label>
           <input

src/client/Components/Discussions.js

@@ -2,7 +2,7 @@ import React from 'react';
 import io from 'socket.io-client';
 import uid from 'uid';
 import MessageList from './MessageList';
-import Notification from './Notification';
+import Notify from './Notification';
 
 export default class Discussions extends React.Component {
 
@@ -19,9 +19,7 @@ export default class Discussions extends React.Component {
     this.socket = io('http://localhost:3000');
 
     this.socket.on('message', (message) => {
-      if (message.user !== this.user) {
-        this._Message(message);
-      }
+      this._Message(message);
     })
 
     const textValue = document.getElementById('textarea');
@@ -47,8 +45,8 @@ export default class Discussions extends React.Component {
 
     if ( valueMsj.value !== '' ) {
       this.socket.emit('new-message', message);
-      Notification(message);
       valueMsj.value = '';
+      if (document.hidden) Notify(message);
     }
   }
 

src/client/Components/Notification.js

@@ -1,17 +1,28 @@
-export default function Notification (obj) {
+export default function Notify (obj) {
 
-  let titulo = `Tienes un nuevo mensaje de ${obj.username}`;
-  let options = {
-    icon: `${obj.avatar}`,
-    body: obj.message
+  const title = `Tienes un mensaje nuevo de ${obj.username}`
+  const options = {
+    body: obj.message,
+    icon: obj.avatar,
+  };
+
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
   }
 
-  if(Notification) {
-    console.log('excelente');
-    if (Notification.permission === "granted"){
-       var newNoti = new Notification(titulo, options);
-       setTimeout(newNoti.close.bind(newNoti), 6000);
-    }
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification(title, options);
+  }
 
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification(title, options);
+      }
+    });
   }
 }

src/client/stylus/style.styl

@@ -57,7 +57,21 @@ figure
     height calc(100vh - 222.59px)
     overflow-y auto
     padding 20px
+    position relative
     width 100%
+    &:after
+      content ""
+      display inline-block
+      background-image url('images/logo.png')
+      background-repeat no-repeat
+      background-position center
+      position: fixed;
+      top 0
+      left 0
+      bottom 0
+      right 0
+      opacity .4
+
 
     .Message
       margin-bottom .5em