Cleaning code

client/src/components/Chat/Chat.js

@@ -16,7 +16,7 @@ let socket;
 const Chat = ({ location }) => {
   const [name, setName] = useState('');
   const [room, setRoom] = useState('');
-  const [users, setUsers] = useState('');
+  const [users, setUsers] = useState([]);
   const [message, setMessage] = useState('');
   const [messages, setMessages] = useState([]);
 
@@ -33,7 +33,7 @@ const Chat = ({ location }) => {
         alert(error);
       }
     });
-  }, [ENDPOINT, location.search]);
+  }, [location.search]);
 
   useEffect(() => {
     socket.on('message', message => {
@@ -43,7 +43,7 @@ const Chat = ({ location }) => {
     socket.on("roomData", ({ users }) => {
       setUsers(users);
     });
-}, []);
+}, [messages]);
 
   const sendMessage = (event) => {
     event.preventDefault();

client/src/components/Input/Input.js

@@ -10,9 +10,8 @@ const Input = ({ setMessage, sendMessage, message }) => (
       placeholder="Type a message..."
       value={message}
       onChange={({ target: { value } }) => setMessage(value)}
-      onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null}
     />
-    <button className="sendButton" onClick={e => sendMessage(e)}>Send</button>
+    <button className="sendButton" onClick={()=> sendMessage(message)}>Send</button>
   </form>
 )
 

client/src/components/TextContainer/TextContainer.js

@@ -1,36 +1,48 @@
-import React from 'react';
+import React from "react";
 
-import onlineIcon from '../../icons/onlineIcon.png';
+import onlineIcon from "../../icons/onlineIcon.png";
 
-import './TextContainer.css';
+import "./TextContainer.css";
 
 const TextContainer = ({ users }) => (
-  <div className="textContainer">
-    <div>
-      <h1>Realtime Chat Application <span role="img" aria-label="emoji">💬</span></h1>
-      <h2>Created with React, Express, Node and Socket.IO <span role="img" aria-label="emoji">❤️</span></h2>
-      <h2>Try it out right now! <span role="img" aria-label="emoji">⬅️</span></h2>
-    </div>
-    {
-      users
-        ? (
-          <div>
-            <h1>People currently chatting:</h1>
-            <div className="activeContainer">
-              <h2>
-                {users.map(({name}) => (
-                  <div key={name} className="activeItem">
-                    {name}
-                    <img alt="Online Icon" src={onlineIcon}/>
-                  </div>
-                ))}
-              </h2>
-            </div>
-          </div>
-        )
-        : null
-    }
-  </div>
+	<div className="textContainer">
+		<div>
+			<h1>
+				Realtime Chat Application{" "}
+				<span role="img" aria-label="emoji">
+					💬
+				</span>
+			</h1>
+			<h2>
+				Created with React, Express, Node and Socket.IO{" "}
+				<span role="img" aria-label="emoji">
+					❤️
+				</span>
+			</h2>
+			<h2>
+				Try it out right now!{" "}
+				<span role="img" aria-label="emoji">
+					⬅️
+				</span>
+			</h2>
+		</div>
+		{users.length !== 0 && (
+			<div>
+				<h1>People currently chatting:</h1>
+				<div className="activeContainer">
+					<h2>
+						{users.map(({ name }) => (
+							<div key={name} className="activeItem">
+								{name}
+								<img alt="Online Icon" src={onlineIcon} />
+							</div>
+						))}
+					</h2>
+				</div>
+			</div>
+		)}
+		{users.length === 0 && <span>Nobody is chatting right now</span>}
+	</div>
 );
 
-export default TextContainer;
+export default TextContainer;