notification

Author: jgalianoz

package.json

@@ -11,8 +11,7 @@
   },
   "author": "@Manuel_Galindez",
   "license": "MIT",
-  "devDependencies": {
-    "babel": "^6.5.2",
+  "dependencies": {
     "babel-cli": "^6.16.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
@@ -21,9 +20,7 @@
     "express": "^4.14.0",
     "nib": "^1.1.2",
     "react-engine": "^4.1.0",
-    "stylus": "^0.54.5"
-  },
-  "dependencies": {
+    "stylus": "^0.54.5",
     "react": "^15.3.2",
     "react-addons-css-transition-group": "^15.3.2",
     "react-dom": "^15.3.2",

src/client/Components/ConversationUser.js

@@ -19,6 +19,8 @@ export default class ConversationUser extends React.Component {
   }
 
   componentDidMount(){
+    Notification.requestPermission();
+
     setTimeout(() => {
       this.setState({
         active : true

src/client/Components/Discussions.js

@@ -2,46 +2,43 @@ import React from 'react';
 import io from 'socket.io-client';
 import uid from 'uid';
 import MessageList from './MessageList';
-
+import Notification from './Notification';
 
 export default class Discussions extends React.Component {
 
   constructor(props){
     super(props)
-    this.state = { messages: [], connectUser: [] };
+    this.state = { messages: [] };
     this._dataValue = this._dataValue.bind(this);
     this._MessageSend = this._MessageSend.bind(this);
     this.user = uid(10);
   }
 
   componentDidMount(){
+
     this.socket = io('localhost:3000');
 
     this.socket.on('message', (message) => {
       if (message.user !== this.user) {
         this._MessageSend(message);
       }
     })
-
-    this.socket.on('loggin', (onUser) => {
-      this.state.connectUser.push(onUser);
-      console.log(this.state.connectUser);
-    })
-
   }
 
+
   _dataValue(ev) {
 
     ev.preventDefault();
 
     let textValue = document.getElementById('textarea').value;
+
     const avatar = this.props.avatar;
     const username = this.props.username;
     let message = { avatar: avatar, username: username, message: textValue };
 
     if ( textValue !== '' ) {
-
       this.socket.emit('new-message', message);
+      Notification(message);
       document.getElementById('textarea').value = '';
     }
   }

src/client/Components/Notification.js

@@ -0,0 +1,17 @@
+export default function Notification (obj) {
+
+  let titulo = `Tienes un nuevo mensaje de ${obj.username}`;
+  let options = {
+    icon: `${obj.avatar}`,
+    body: obj.message
+  }
+
+  if(Notification) {
+    console.log('excelente');
+    if (Notification.permission == "granted"){
+       var newNoti = new Notification(titulo, options);
+       setTimeout(newNoti.close.bind(newNoti), 6000);
+    }
+
+  }
+}