Open private chat

server/server.js

@@ -6,7 +6,14 @@ const server = http.createServer(app);
 const cors = require('cors');
 const io = require('socket.io')(server);
 
-const users = [];
+const users = {
+    general : [
+
+    ],
+    sports: [
+
+    ]
+};
 
 const PORT = 3000;
 
@@ -32,10 +39,10 @@ io.on('connection', (socket) => {
             console.log(`user ${username} joined the room ${room}`);
 
             // push user for the suitable ROOM!!!
-            users.push({ username: username })
+            users[room].push({ username: username })
 
             // Notify all the users in the same room
-            io.sockets.in(room).emit('newUser', users);
+            io.sockets.in(room).emit('newUser', users[room]);
         });
 
     });
@@ -49,8 +56,17 @@ io.on('connection', (socket) => {
     })
 
     socket.on('leaveRoom', ({room, username}) => {
+        console.log(`user ${username} wants to leave the room ${room}`);
+
         socket.leave(room, () => {
+            console.log(`user ${username} left the room ${room}`);
+
+            let usersRoom = users[room]
             // delete user from the suitable array
+            usersRoom = usersRoom.filter( (user) => (user.username !== username))
+
+            // Notify all the users in the same room
+            io.sockets.in(room).emit('newUser', usersRoom);
         })
     })
 

src/components/ChatArea.vue

@@ -1,6 +1,8 @@
 <template>
-  <div>
-    <p v-for="msg in messages" v-bind:key="msg.msg">{{msg}}</p>
+  <div class="message">
+    <div v-for="msg in messages" v-bind:key="msg.msg" class="message__container">
+      <p class="message__text" v-bind:class="{ own: msg.own, other: !msg.own}">{{msg.msg}}</p>
+    </div>
   </div>
 </template>
 
@@ -11,7 +13,34 @@ export default {
   props: {
     messages: Array
   },
-  created() {
-  }
+  created() {}
 };
 </script>
+
+<style lang="scss" scoped>
+.message {
+  &__text {
+    width: max-content;
+  }
+
+  &__container {
+    width: 100%;
+    display: inline-table;
+  }
+
+  .own {
+    background: #0080001f;
+    border: 1px solid #0080001f;
+    margin: 0;
+    float: right;
+  }
+
+  .other {
+    background: #d6ca002b;
+    border: 1px solid #d6ca002b;
+    margin: 0;
+    float: left;
+  }
+}
+</style>
+

src/components/ChatDialog.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <md-dialog
+      :md-active.sync="showDialog"
+      :md-fullscreen="false"
+      :md-click-outside-to-close="false"
+    >
+      <div>
+        <md-avatar class="md-avatar-icon md-primary">
+          <md-icon>folder</md-icon>
+        </md-avatar>
+      </div>
+      <md-dialog-content>whateverrr</md-dialog-content>
+
+      <md-dialog-actions>
+        <md-button class="md-primary" @click="showDialog = false">Close</md-button>
+        <md-button class="md-primary" @click="showDialog = false">Save</md-button>
+      </md-dialog-actions>
+    </md-dialog>
+
+    <md-button class="md-primary md-raised" @click="showDialog = true">Show Dialog</md-button>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: "ChatDialog",
+  props: {
+    showDialog: Boolean
+  },
+  data: function() {
+    return {
+    };
+  },
+  created() {}
+};
+</script>
+
+<style lang="scss" scoped>
+.md-overlay {
+    position: absolute !important;
+}
+</style>
+

src/components/UserList.vue

@@ -7,8 +7,9 @@
         <span class="md-list-item-text">{{user.username}}</span>
         <md-button
           class="md-icon-button md-list-action"
-          v-if="$store.state.username !== user.username">
-          <md-icon class="md-primary">chat_bubble</md-icon>
+          v-if="$store.state.username !== user.username"
+          v-on:click="openChat(user.username)">
+        <md-icon class="md-primary">chat_bubble</md-icon>
         </md-button>
       </md-list-item>
     </div>
@@ -22,6 +23,11 @@ export default {
   props: {
     users: Array
   },
-  created() {}
+  created() {},
+  methods: {
+    openChat(user) {
+      this.$emit("open-chat", user);
+    }
+  }
 };
 </script>

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import VueSocketIO from 'vue-socket.io'
+import './styles/app.scss'
 
 // Socket config
 Vue.use(new VueSocketIO({

src/styles/app.scss

@@ -0,0 +1,5 @@
+.md-overlay {
+    position: unset;
+    top: unset;
+    right: unset;
+}

src/views/Chat.vue

@@ -3,9 +3,9 @@
     <div class="md-layout-item">
       <md-field>
         <label for="room">Room</label>
-        <md-select v-model="room" @md-selected="onChange" name="room" id="room">
-          <md-option value="fight-club">Fight Club</md-option>
-          <md-option value="godfather">Godfather</md-option>
+        <md-select v-model="room" @md-selected="onChangeRoom" name="room" id="room">
+          <md-option value="general">General</md-option>
+          <md-option value="sports">Sports</md-option>
         </md-select>
       </md-field>
     </div>
@@ -16,7 +16,7 @@
       </md-app-toolbar>
 
       <md-app-drawer md-permanent="full">
-        <UserList v-bind:users="users"></UserList>
+        <UserList v-bind:users="users" v-on:open-chat="openChat($event)"></UserList>
       </md-app-drawer>
 
       <md-app-content>
@@ -25,29 +25,38 @@
     </md-app>
 
     <MessageArea v-on:send-message="sendMessage($event)"></MessageArea>
+
+    <ChatDialog v-bind:showDialog="openPrivateChat"></ChatDialog>
   </div>
 </template>
 
 <script>
 import UserList from "./../components/UserList";
 import ChatArea from "./../components/ChatArea";
 import MessageArea from "./../components/MessageArea";
+import ChatDialog from "./../components/ChatDialog";
 
 export default {
   name: "chat",
   components: {
     UserList,
     ChatArea,
-    MessageArea
+    MessageArea,
+    ChatDialog
   },
   sockets: {
     newUser: function(data) {
       this.users.length = 0;
       this.users = data;
     },
-    newMessage: function({message, username}) {
-      const msg = `${username}: ${message} `
-      this.messages.push(msg)
+    newMessage: function({ message, username }) {
+      const isMe = this.$store.state.username === username
+      const msg = isMe ? ` ${message}`: `${username.toUpperCase()} - ${message} `
+      const msgObj = {
+        msg,
+        own:isMe
+      };
+      this.messages.push(msgObj);
     }
   },
   beforeCreate: function() {
@@ -57,21 +66,27 @@ export default {
     return {
       room: this.$store.state.room,
       users: [],
-      messages: []
+      messages: [],
+      openPrivateChat: false
     };
   },
   methods: {
-    onChange(val) {
+    onChangeRoom(val) {
       if (this.$store.state.room !== val) {
-        // add to the changeroom store the socket emit
+        this.$socket.emit("leaveRoom", this.$store.state);
         this.$store.dispatch("changeRoom", val);
+        this.$socket.emit("joinRoom", this.$store.state);
       }
     },
     sendMessage(msg) {
       this.$socket.emit("publicMessage", {
         ...this.$store.state,
         message: msg
       });
+    },
+    openChat(user){
+      this.openPrivateChat = true
+      console.log(user)
     }
   }
 };

src/views/Home.vue

@@ -10,8 +10,8 @@
         <md-field>
           <label for="movie">Room</label>
           <md-select v-model="room" name="room" id="room">
-            <md-option value="fight-club">Fight Club</md-option>
-            <md-option value="godfather">Godfather</md-option>
+            <md-option value="general">General</md-option>
+            <md-option value="sports">Sports</md-option>
           </md-select>
         </md-field>
         <div class="options__submit">