added private chat and bug fixes

Author: NikhilP99

server/server.js

@@ -77,6 +77,12 @@ io.on('connection', (socket) => {
     sendMessageToChat(currentUser, data.chatId, data.message)
   })
 
+  socket.on('PRIVATE_MESSAGE', ({receiver, author})=>{
+    const newChat = createChat({ name:`${receiver.name}&${author.name}`, users:[receiver, author] })
+    socket.to(receiver.id).emit('PRIVATE_MESSAGE', newChat)
+		socket.emit('PRIVATE_MESSAGE', newChat)
+  })
+
 })
 
 

src/components/ConversationList/index.js

@@ -10,7 +10,8 @@ import './ConversationList.css';
 export default class ConversationList extends Component {
 
   state = {
-    category: 'chats'
+    category: 'chats',
+    newReceiver : null
   }
 
   render() {
@@ -34,24 +35,29 @@ export default class ConversationList extends Component {
 
         {(this.state.category === 'online')?
           (this.props.users.map(user =>{
-            return(
-              <div key={user.id}>
-              <div className="conversation-list-item">
-              <div className="conversation-info">
-              <h1 className="conversation-title">{ user.name }</h1>
-              <p className="conversation-snippet">Active</p>
-              </div>
-              </div>
-              </div>
-            )}
+            if(user.id !== this.props.user.id){
+              return(
+                <div key={user.id} onClick={() => {this.props.addPrivateChat({id:user.id, name: user.name})}}>
+                <div className="conversation-list-item">
+                <div className="conversation-info">
+                <h1 className="conversation-title">{ user.name }</h1>
+                <p className="conversation-snippet">Active</p>
+                </div>
+                </div>
+                </div>
+              )}
+              else return null
+
+            }
           )):
 
           (this.props.chats.map(chat =>{
             if(chat.name){
               const lastMessage = chat.messages[chat.messages.length - 1];
-              const chatSideName = chat.users.find((name)=>{
-									return name !== this.props.user.name
-								}) || "Community"
+              const receiver = chat.users.find((user)=>{
+									return user.name !== this.props.user.name
+								})
+              const chatSideName = (receiver && receiver.name) ? (receiver.name):('Community')
 								const classNames = (this.props.activeChat && this.props.activeChat.id === chat.id) ? 'active' : ''
               return(
                 <div key={chat.id} onClick={ ()=>{ this.props.setActiveChat(chat) } }>

src/components/Login.js

@@ -20,6 +20,7 @@ class Login extends Component {
 		e.preventDefault()
 		const { socket } = this.props
 		const { name } = this.state
+    if (name === '' || null) return 
 		socket.emit("VERIFY_USER", name, this.setUser)
 	}
 

src/components/MessageList/index.js

@@ -15,11 +15,11 @@ export default class MessageList extends Component {
     };
   }
 
-  componentDidMount() {
-    this.setState({
-      messages: this.props.activeChat.messages
-    })
-  }
+  // componentDidMount() {
+  //   this.setState({
+  //     messages: this.props.activeChat.messages
+  //   })
+  // }
 
   handleSubmit = (e)=>{
 		e.preventDefault()
@@ -36,11 +36,11 @@ export default class MessageList extends Component {
 
   renderMessages() {
     let i = 0;
-    let messageCount = this.state.messages.length;
+    let messageCount = this.props.activeChat.messages.length;
     let messages = [];
 
     while (i < messageCount) {
-      let current = this.state.messages[i];
+      let current = this.props.activeChat.messages[i];
       let isMine = current.author.name === this.props.user.name;
 
       messages.push(
@@ -56,10 +56,14 @@ export default class MessageList extends Component {
   }
 
   render() {
+    const receiver = this.props.activeChat.users.find((user)=>{
+        return user.name !== this.props.user.name
+      })
+      const chatTitle = (receiver && receiver.name) ? (receiver.name):('Community')
     return(
       <div className="message-list">
         <Toolbar
-          title={this.props.activeChat.name}
+          title={chatTitle}
           rightItems={[
             <ToolbarButton key="info" icon="ion-ios-information-circle-outline" />,
             <ToolbarButton key="video" icon="ion-ios-videocam" />,

src/components/Messenger/Messenger.js

@@ -19,6 +19,7 @@ class Messenger extends Component {
   componentDidMount(){
     height = window.innerHeight
     this.props.socket.emit('COM_CHAT', this.resetChat)
+    this.props.socket.on('PRIVATE_MESSAGE', this.addChat)
     this.updateUserList()
     this.scrollDown()
   }
@@ -47,7 +48,7 @@ class Messenger extends Component {
 			let newChats = chats.map((chat)=>{
 				if(chat.id === chatId)
 					chat.messages.push(message)
-          console.log(chat.messages);
+          // console.log(chat.messages, chat.name);
 				return chat
 			})
 
@@ -62,7 +63,7 @@ class Messenger extends Component {
 
   setActiveChat = (chat) => {
     this.setState({activeChat: chat})
-    console.log(this.state.activeChat);
+    // console.log(this.state.activeChat);
   }
 
   sendMessage = (chatId, message) => {
@@ -74,6 +75,22 @@ class Messenger extends Component {
 		container.scrollTop = container.scrollHeight
 	}
 
+  addPrivateChat = (receiver) => {
+    const {socket, user} = this.props
+    const duplicate = this.checkDuplicate(receiver.name)
+    if(duplicate) return null
+    socket.emit('PRIVATE_MESSAGE', {receiver, author:user})
+  }
+
+  checkDuplicate = (recName) => {
+    const isDup = this.state.chats.find((chat) => {
+      return chat.name === (`${recName}&${this.props.user.name}` || `${this.props.user.name}&${recName}` )
+    })
+    if(isDup){
+      return true
+    }else return false
+  }
+
   render(){
 
     return(
@@ -86,6 +103,7 @@ class Messenger extends Component {
           logout={this.props.logout}
           chats={this.state.chats}
           setActiveChat={this.setActiveChat}
+          addPrivateChat={this.addPrivateChat}
           activeChat={this.state.activeChat}/></div>): ''}
       </Col>