created input, message-display, mssage and closeIcon components

client/public/index.html

@@ -10,7 +10,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/components/chat/Chat.jsx

@@ -1,23 +1,30 @@
 import React, { useState, useEffect } from "react";
 import io from "socket.io-client";
 import queryString from "query-string";
+import ChatBar from "../chatBar/ChatBar";
+import ChatInput from "../chatInput/ChatInput";
+import MessageDisplay from "../messageDisplay/MessageDisplay";
+
+import "./chat.css";
 
 let socket;
 
 export const Chat = ({ location }) => {
   const [name, setName] = useState("");
   const [room, setRoom] = useState("");
+  const [message, setMessage] = useState("");
+  const [messages, setMessages] = useState([]);
+
   const HOST = "http://localhost:3001/";
 
   useEffect(() => {
+    // Parsing Query string passed to the url
     const { name, room } = queryString.parse(location.search);
     socket = io(HOST);
 
     setName(name);
     setRoom(room);
 
-    console.log(name, room);
-
     socket.emit("join", { name, room }, () => {});
 
     return () => {
@@ -26,5 +33,32 @@ export const Chat = ({ location }) => {
     };
   }, [location.search, HOST]);
 
-  return <div>Chat</div>;
+  //Listening for Events from the backend
+  useEffect(() => {
+    socket.on("message", message => {
+      setMessages([...messages, message]);
+    });
+  }, [messages]);
+
+  const sendMessage = event => {
+    event.preventDefault();
+    if (message) {
+      socket.emit("sendMessage", message, () => setMessage(""));
+    }
+  };
+
+  console.log(messages, message);
+  return (
+    <div className="outerContainer">
+      <div className="chatinnerContainer">
+        <ChatBar room={room} />
+        <MessageDisplay messages={messages} />
+        <ChatInput
+          setMessage={setMessage}
+          sendMessage={sendMessage}
+          message={message}
+        />
+      </div>
+    </div>
+  );
 };

client/src/components/chat/chat.css

@@ -0,0 +1,10 @@
+.chatinnerContainer {
+  background: #fff;
+  padding: 1rem;
+  position: absolute;
+  border-radius: 1.2rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}

client/src/components/chatBar/ChatBar.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import CloseIcon from "../closeIcon/CloseIcon";
+
+import "./charBar.css";
+
+const ChatBar = ({ room }) => (
+  <div className="appBarContainer">
+    <div className="leftContainer">
+      <h2 className="roomHeader">{room}</h2>
+    </div>
+    <div className="rightContainer">
+      <CloseIcon />
+    </div>
+  </div>
+);
+
+export default ChatBar;

client/src/components/chatBar/charBar.css

@@ -0,0 +1,18 @@
+.appBarContainer {
+  display: flex;
+}
+
+.leftContainer {
+  margin-right: auto;
+  padding: 2rem;
+}
+.rightContainer {
+  padding: 2rem;
+}
+
+.roomHeader {
+  text-transform: uppercase;
+  color: #f0f;
+  font-weight: 700;
+  font-size: 2.3rem;
+}

client/src/components/chatInput/ChatInput.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const ChatInput = ({ message, setMessage, sendMessage }) => (
+  <>
+    <input
+      value={message}
+      onChange={e => {
+        setMessage(e.target.value);
+      }}
+      onKeyPress={e => (e.key === "Enter" ? sendMessage(e) : null)}
+      type="text"
+    />
+  </>
+);
+
+export default ChatInput;

client/src/components/closeIcon/CloseIcon.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ReactComponent as CrossSvg } from "../../assets/cross.svg";
+
+const CloseIcon = () => {
+  return (
+    <Link to="/">
+      <CrossSvg />
+    </Link>
+  );
+};
+
+export default CloseIcon;

client/src/components/join/join.css

@@ -23,10 +23,9 @@
 }
 
 input {
-  display: inline-block;
+  display: block;
   padding: 2rem;
   font-size: 2rem;
-  width: 80%;
   margin-bottom: 3rem;
   height: 3rem;
   border: none;

client/src/components/message/Message.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import "./message.css";
+
+const Message = ({ message }) => (
+  <div className="msgRight">
+    <div className="msgcontainer">
+      <div className="messageAuthor">
+        {message.user},{new Date(Date.now()).toLocaleString("en-us")}
+      </div>
+      <div className="content">{message.message}</div>
+    </div>
+  </div>
+);
+
+export default Message;

client/src/components/message/message.css

@@ -0,0 +1,20 @@
+.msgcontainer {
+  box-shadow: 0 0 0.3rem 0.3rem #00000024;
+  border-radius: 0.3rem;
+  display: grid;
+  flex-direction: column;
+  margin-bottom: 2rem;
+  width: 70%;
+}
+.msgRight {
+  display: flex;
+}
+.messageAuthor {
+  background: #00000024;
+  color: #f0f;
+  text-transform: capitalize;
+  font-size: 1.2rem;
+}
+.content {
+  font-size: 1rem;
+}

client/src/components/messageDisplay/MessageDisplay.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Message from "../message/Message";
+import "./messageDisplay.css";
+
+const MessageDisplay = ({ messages }) => (
+  <div className="MessageDisplayStyles">
+    {messages.map((message, key) => (
+      <Message key={key} message={message} />
+    ))}
+  </div>
+);
+
+export default MessageDisplay;

client/src/components/messageDisplay/messageDisplay.css

@@ -0,0 +1,4 @@
+.MessageDisplayStyles {
+  padding: 1rem;
+  background: #fff;
+}

server/server.js

@@ -14,14 +14,14 @@ io.on("connection", socket => {
   socket.on("join", ({ name, room }, callback) => {
     const { error, user } = addUsers({ id: socket.id, name, room });
     if (error) return callback(error);
-    console.log(user);
+
     // message to only the newly joined user
     socket.emit("message", {
       user: "admin",
       message: ` ${user.name}, welcome to to ${user.room} room`
     });
 
-    // Message to the roomexcept to the newly joined user
+    // Message to the room except to the newly joined user
     socket.broadcast.to(user.room).emit({
       user: "admin",
       message: `${user.name} has just join the ${user.name} room}`
@@ -33,7 +33,7 @@ io.on("connection", socket => {
   // Created an instances of messages of room members and send back to the client
   socket.on("sendMessage", (message, callback) => {
     const user = getUser(socket.id);
-    socket.to(user.room).emit("message", { user: user.name, message });
+    io.to(user.room).emit("message", { user: user.name, message });
     callback();
   });
   socket.on("disconnection", () => console.log("A user has just left !"));

server/user.js

@@ -25,7 +25,7 @@ const removeUser = id => {
   }
 };
 
-const getUser = id => users.find(id => id === user.id);
+const getUser = id => users.find(user => user.id === id);
 
 const getAllUsers = room => users.filter(room => room === user.room);