Added participant list to backend

Author: murtaza1112

.gitignore

@@ -1,3 +1,4 @@
 **/node_modules
 .vscode
-**/.env
+**/.env
+.DS_Store

backend/server/index.js

@@ -1,41 +1,60 @@
-const app = require('express')()
-const server = require('http').createServer(app)
-const io = require('socket.io')(server)
-const cors = require('cors');
+const app = require("express")();
+const server = require("http").createServer(app);
+const io = require("socket.io")(server);
+const cors = require("cors");
 
+// set up domain for local development
+io.origins(["http://localhost:3000"]);
 
 app.use(cors());
 
-io.on('connection', socket => {
-
+io.on("connection", (socket) => {
   let roomId = 0;
   let userName = "";
-  
   //joining in a room
-  socket.on('joinroom', function(data) {
-    roomId = data.room;
-    userName = data.name;
+  socket.on("joinroom", function (data) {
+    const { name, room } = data;
+    roomId = room;
+    userName = name;
+
+    socket.userName = name;
     socket.join(roomId);
-    socket.to(roomId).emit('userjoined', userName)
+
+    console.log(socket.id, data);
+    // add user
+    var clients = io.sockets.adapter.rooms[roomId].sockets;
+    console.log(clients);
+    let users = {};
+    for (clientId in clients) {
+      //this is the socket of each client in the room.
+      const clientSocket = io.sockets.connected[clientId];
+      if (clientSocket.userName) users[clientId] = clientSocket.userName;
+    };
+    
+    console.log(users);
+    socket.emit("Users Data", users);
+    socket.to(roomId).emit("userjoined", userName);
   });
 
-  socket.on('message', (message) => {
-    socket.to(roomId).emit('message', message)
-  })
+  socket.on("message", (message) => {
+    console.log(message);
+    socket.to(roomId).emit("message", message);
+  });
 
-  socket.on('chatmessage', (data) => {
-    socket.to(roomId).emit('chatmessage', data)
-  })
+  socket.on("chatmessage", (data) => {
+    console.log(data);
+    socket.to(roomId).emit("chatmessage", data);
+  });
 
-  socket.on('disconnect', function() {
-    socket.to(roomId).emit('userleft', userName)
-  })
-})
+  socket.on("disconnect", function () {
+    socket.to(roomId).emit("userleft", userName);
+  });
+});
 
 app.get("/", (req, res) => {
   res.send({ response: "Server is up and running." }).status(200);
 });
 
-server.listen(process.env.PORT || 4000, function() {
-  console.log('server is working')
-})
+server.listen(process.env.PORT || 4000, function () {
+  console.log("server is working");
+});

frontend/syntaxmeets/package-lock.json

@@ -10,7 +10,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "ace-builds": "^1.4.12",
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "bootstrap": "^4.5.3",
     "copy-to-clipboard": "^3.3.1",
     "fontsource-poppins": "^3.0.9",

frontend/syntaxmeets/package.json

@@ -8,6 +8,7 @@ import copy from "copy-to-clipboard";
 import About from '../About/About.js';
 import CloseIcon from '@material-ui/icons/Close';
 import Slide from '@material-ui/core/Slide';
+import ParticpantsList from "../SyntaxChat/ParticipantsList";
 
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
@@ -19,7 +20,7 @@ const Navbar = (props) => {
   const Copytext = (value) => {  
     copy(value);  
     alert("Copied Room ID : " + value)
-  }  
+  };
 
   const [open, setOpen] = React.useState(false);
 
@@ -54,6 +55,7 @@ const Navbar = (props) => {
           RoomId : {props.roomId}
         </Button>
           <SyntaxChat name = {props.name} roomId = {props.roomId} socket = {props.socket} />
+          <ParticpantsList socket = {props.socket} users={props.users} />
           <Button variant="contained" onClick={handleClickOpen} color = "secondary" style={{ 'fontFamily': "poppins", 'marginLeft': "15px", 'fontWeight': "600", 'color': "white" }}>
           About Us
         </Button>

frontend/syntaxmeets/src/components/Navbar/Navbar.js

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import GroupIcon from "@material-ui/icons/Group";
+import {
+  ListItem,
+  ListItemText,
+  ListItemAvatar,
+  Avatar,
+  Button,
+  Drawer,
+  Typography,
+  Divider,
+  List
+} from "@material-ui/core";
+
+function ParticipantsList(props) {
+  const { users } = props;
+  const [openList, setOpenList] = useState(false);
+  //   console.log(users);
+  const renderParticipants = () => {
+    console.log(users);
+    return Object.keys(users).map((elem) => {
+      const name = users[elem];
+      console.log(name);
+      return (
+        <>
+          <ListItem alignItems="flex-start">
+            <ListItemAvatar>
+              <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+            </ListItemAvatar>
+            <ListItemText
+              primary={name}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+        </>
+      );
+    });
+  };
+  return (
+    <div>
+      <Button
+        onClick={() => setOpenList(true)}
+        variant="contained"
+        color="primary"
+        startIcon={<GroupIcon />}
+        style={{
+          fontFamily: "poppins",
+          marginLeft: "15px",
+          fontWeight: "600",
+          color: "white",
+        }}
+      >
+        Participants
+      </Button>
+      <Drawer
+        anchor={"right"}
+        open={openList}
+        onClose={() => setOpenList(false)}
+      >
+        <div
+          style={{ display: "flex", flexDirection: "column" }}
+          role="presentation"
+        >
+          Participants
+          <List>{renderParticipants()}</List>
+        </div>
+      </Drawer>
+    </div>
+  );
+}
+
+export default ParticipantsList;

frontend/syntaxmeets/src/components/SyntaxChat/ParticipantsList.js

@@ -23,7 +23,7 @@ const SyntaxChat = (props) => {
   const [messages, setMessages] = useState([]);
 
   const messagesEndRef = useRef(null);
-  
+
   const [mCount, setMCount] = useState(0);
   const [state, setState] = useState(false);
 
@@ -34,6 +34,7 @@ const SyntaxChat = (props) => {
       roomId: props.roomId,
       message: message,
     };
+    console.log(data);
     props.socket.emit("chatmessage", data);
     setMessages(messages => [ ...messages, data ]);
     setMCount(mCount + 1);
@@ -42,6 +43,7 @@ const SyntaxChat = (props) => {
 
   useEffect(() => {
     props.socket.on("chatmessage", (data) => {
+      console.log("The new is message are:",data);
       setMessages(messages => [ ...messages, data ]);
     });
   }, []);