color chat on unread messages

src/App.js

@@ -33,7 +33,7 @@ class App extends React.Component {
   componentDidMount() {
     this.fetchData()
     this.socket.on('connect', () => {
-      console.log('connected!')
+      console.log(`I am ${socket.id}`)
       const user = { socketId: this.socket.id }
       this.setState({ user })
     })
@@ -127,6 +127,10 @@ class App extends React.Component {
     this.setState({ messages })
   }
 
+  activateChat(namespace) {
+    this.readMessages(namespace)
+    this.setState({ namespace })
+  }
   renderApp() {
     const title =
       this.state.namespace[0] === '#'
@@ -182,32 +186,34 @@ class App extends React.Component {
             className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
             id="sidebar2"
           >
-            <h5 className=" border-bottom pb-2">User Channels</h5>
+            <h5 className=" border-bottom pb-2">Chats</h5>
-
             <Button
               key="/"
               className="btn btn-dark d-flex"
-              onClick={() => this.setState({ namespace: '/' })}
+              onClick={() => this.activateChat('/')}
             >
               <div className="mr-auto">server</div>
               {/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
             </Button>
             {this.state.namespaces
               .filter(
-                r =>
+                r => r.sockets && r.sockets.includes(this.state.user.socketId)
-                  r.namespace[0] === '#' &&
-                  r.sockets.includes(this.state.user.socketId)
               )
               .map(r => (
                 <Button
                   key={r.namespace}
                   className="btn btn-dark d-flex"
-                  onClick={() => {
+                  onClick={() => this.activateChat(r.namespace)}
-                    this.readMessages(r.namespace)
-                    this.setState({ namespace: r.namespace })
-                  }}
                 >
-                  <div className="mr-auto">{r.namespace}</div>
+                  <div
+                    className={`mr-auto ${
+                      this.findUnreadMessages(r.namespace) > 0
+                        ? 'text-danger'
+                        : ''
+                    }`}
+                  >
+                    {r.namespace}
+                  </div>
                   {/*<div className="mr-auto badge bg-success">
                       this.state.messages.filter(
                         m => m.namespace === r.namespace