Add new message notification for allconversations screen

Related to #34

Add a feature to notify user 1 of new messages when they are not inside the chat.

* Create a new React component `AllConversations` to display all conversations and bold the ones with new messages.
* Add styles for the `AllConversations` component in `AllConversations.css`.
* Import the `AllConversations` component and add a route for it in `App.js`.
* Add a new socket event in `server/index.js` to notify the allconversations screen of new messages.
* Emit a new socket event when a new message is received in `Chat.js`.

Author: vishwamartur

client/src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Chat from './components/Chat/Chat';
 import Join from './components/Join/Join';
+import AllConversations from './components/AllConversations/AllConversations';
 
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
@@ -10,6 +11,7 @@ const App = () => {
     <Router>
       <Route path="/" exact component={Join} />
       <Route path="/chat" component={Chat} />
+      <Route path="/allconversations" component={AllConversations} />
     </Router>
   );
 }

client/src/components/AllConversations/AllConversations.css

@@ -0,0 +1,14 @@
+.allConversations {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.conversation {
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+}
+
+.conversation.bold {
+  font-weight: bold;
+}

client/src/components/AllConversations/AllConversations.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import io from 'socket.io-client';
+
+import './AllConversations.css';
+
+const ENDPOINT = 'https://project-chat-application.herokuapp.com/';
+
+let socket;
+
+const AllConversations = () => {
+  const [conversations, setConversations] = useState([]);
+
+  useEffect(() => {
+    socket = io(ENDPOINT);
+
+    socket.on('newMessage', ({ conversationId, message }) => {
+      setConversations(conversations => {
+        const updatedConversations = conversations.map(conversation => {
+          if (conversation.id === conversationId) {
+            return { ...conversation, hasNewMessage: true };
+          }
+          return conversation;
+        });
+        return updatedConversations;
+      });
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="allConversations">
+      {conversations.map(conversation => (
+        <div
+          key={conversation.id}
+          className={`conversation ${conversation.hasNewMessage ? 'bold' : ''}`}
+        >
+          {conversation.name}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AllConversations;

client/src/components/Chat/Chat.js

@@ -53,6 +53,12 @@ const Chat = ({ location }) => {
     }
   }
 
+  useEffect(() => {
+    socket.on('newMessage', ({ conversationId, message }) => {
+      // Handle new message event
+    });
+  }, []);
+
   return (
     <div className="outerContainer">
       <div className="container">

server/index.js

@@ -35,6 +35,9 @@ io.on('connect', (socket) => {
 
     io.to(user.room).emit('message', { user: user.name, text: message });
 
+    // Notify allconversations screen of new message
+    socket.broadcast.emit('newMessage', { conversationId: user.room, message });
+
     callback();
   });
 
@@ -48,4 +51,4 @@ io.on('connect', (socket) => {
   })
 });
 
-server.listen(process.env.PORT || 5000, () => console.log(`Server has started.`));
+server.listen(process.env.PORT || 5000, () => console.log(`Server has started.`));