added findUnreadMessages and readMessages

src/App.js

@@ -23,6 +23,7 @@ class App extends React.Component {
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
     this.join = this.join.bind(this)
+    this.readMessages = this.readMessages.bind(this)
   }
 
   async fetchData() {
@@ -56,6 +57,7 @@ class App extends React.Component {
     })
 
     this.socket.on('message', msg => {
+      if (msg.namespace === this.state.namespace) msg.read = true
       const messages = this.state.messages.concat(msg)
       this.setState({ messages })
     })
@@ -83,6 +85,9 @@ class App extends React.Component {
       socketId: this.socket.id,
       text: this.state.message,
       namespace: this.state.namespace,
+      from: this.socket.id,
+      to: this.state.namespace,
+      read: false,
     }
 
     this.sendMessage(message)
@@ -104,6 +109,24 @@ class App extends React.Component {
   sendMessage(msg) {
     this.socket.emit('message', msg)
   }
+
+  findUnreadMessages(nsp) {
+    return this.state.messages.filter(
+      m => m.read === false && m.namespace === nsp
+    ).length
+  }
+
+  readMessages(nsp) {
+    const messages = this.state.messages
+    messages.map(m => {
+      if (m.namespace === nsp && m.read === false) {
+        m.read = true
+      }
+      return m
+    })
+    this.setState({ messages })
+  }
+
   renderApp() {
     const title =
       this.state.namespace[0] === '#'
@@ -111,6 +134,7 @@ class App extends React.Component {
         : this.state.namespace[0] === '/'
         ? 'server messages'
         : 'User'
+
     return (
       <main role="main" className="d-flex h-100 flex-column">
         {/*Navbar*/}
@@ -178,9 +202,22 @@ class App extends React.Component {
                 <Button
                   key={r.namespace}
                   className="btn btn-dark d-flex"
-                  onClick={() => this.setState({ namespace: r.namespace })}
+                  onClick={() => {
+                    this.readMessages(r.namespace)
+                    this.setState({ namespace: r.namespace })
+                  }}
                 >
                   <div className="mr-auto">{r.namespace}</div>
+                  {/*<div className="mr-auto badge bg-success">
+                      this.state.messages.filter(
+                        m => m.namespace === r.namespace
+                      ).length
+                  </div>  */}
+                  {this.findUnreadMessages(r.namespace) > 0 ? (
+                    <div className="mr-auto badge bg-danger">
+                      {this.findUnreadMessages(r.namespace)}
+                    </div>
+                  ) : null}
                   <div className="ml-auto">{r.sockets.length}</div>
                 </Button>
               ))}