added functionality for get all users, get all rooms, get my rooms

server/socket/index.js

@@ -1,9 +1,22 @@
 module.exports = io => {
   io.on('connection', async socket => {
     console.log(`A socket connection to the server has been made: ${socket.id}`)
-    socket.join('#chat')
+    socket.join('#chat', () => {
-    io.emit(
+      socket.emit('get my rooms', socket.rooms)
-      'received rooms',
+    })
+
+    socket.on('message', message => {
+      io.to(message.room).emit(message)
+    })
+
+    socket.on('get all users', () => {
+      console.log('get all users')
+      console.log(Object.keys(io.sockets.sockets))
+    })
+
+    socket.on('get all rooms', () => {
+      console.log('get all rooms')
+      console.log(
         Object.keys(io.sockets.adapter.rooms)
           .filter(r => r[0] === '#')
           .map(k => ({
@@ -11,14 +24,29 @@ module.exports = io => {
             sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
           }))
       )
-    socket.broadcast.emit('user connected', { socketId: socket.id })
-
-    socket.on('message', message => {
-      io.to(message.room).emit(message)
     })
+
+    socket.on('get my rooms', () => {
+      console.log('get my rooms')
+      console.log(Object.keys(socket.rooms))
+    })
+
+    socket.on('join a room', roomName => {
+      console.log('join a room')
+      socket.join(roomName, () => {
+        socket.emit('get my rooms')
+      })
+    })
+
+    socket.on('leave a room', () => {
+      console.log('leave a room')
+    })
+
     socket.on('join', payload => {
       console.log(payload.room)
-      socket.join({ room: payload.room })
+      socket.join({ room: payload.room }, () => {
+        socket.emit('got user rooms', Object.keys(socket.rooms))
+      })
     })
     socket.on('disconnect', async () => {
       io.emit('user disconnected', { socketId: socket.id })
@@ -33,7 +61,5 @@ module.exports = io => {
           }))
       )
     })
-
-    console.log(io.sockets.adapter.rooms['#chat'])
   })
 }

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import socket from './socket'
 
-import { Navbar, Nav, Dropdown } from 'react-bootstrap'
+import { Navbar, Nav, Dropdown, DropdownButton, Button } from 'react-bootstrap'
 import uuid from 'uuid'
 import moment from 'moment'
 
@@ -9,7 +9,8 @@ const initialState = {
   loading: true,
   messages: [],
   message: '',
-  rooms: [],
+  allRooms: [],
+  myRooms: [],
   room: '/',
   users: [],
   user: {},
@@ -48,6 +49,11 @@ class App extends React.Component {
       console.log(rooms)
       this.setState({ rooms })
     })
+
+    this.socket.on('get user rooms', roomArray => {
+      const myRooms = roomArray.filter(roomString => roomString[0] === '#')
+      this.setState({ myRooms })
+    })
   }
 
   handleChange(e) {
@@ -106,7 +112,7 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.rooms.map(r => (
+                  {this.state.allRooms.map(r => (
                     <Dropdown.Item className="bg-dark text-light">
                       {r.roomName}
                     </Dropdown.Item>
@@ -114,6 +120,30 @@ class App extends React.Component {
                 </Dropdown.Menu>
               </Dropdown>
             </Nav>
+            <Button
+              variant="dark"
+              onClick={() => {
+                this.socket.emit('get all users')
+              }}
+            >
+              Get All Users
+            </Button>
+            <Button
+              variant="dark"
+              onClick={() => {
+                this.socket.emit('get all rooms')
+              }}
+            >
+              Get All Rooms
+            </Button>
+            <Button
+              variant="dark"
+              onClick={() => {
+                this.socket.emit('get my rooms')
+              }}
+            >
+              Get My Rooms
+            </Button>
           </Navbar.Collapse>
         </Navbar>
 
@@ -125,7 +155,7 @@ class App extends React.Component {
           >
             <h5 className=" border-bottom pb-2">User Channels</h5>
             <p>this currently shows all channels</p>
-            {this.state.rooms.map(r => (
+            {this.state.myRooms.map(r => (
               <button
                 key={r.roomName}
                 className="btn btn-dark d-flex"