chats

server/socket/index.js

@@ -1,6 +1,9 @@
+const users = {}
+
 module.exports = io => {
   io.on('connection', async socket => {
     console.log(`A socket connection to the server has been made: ${socket.id}`)
+    users[socket.id] = { socketId: socket.id, nick: socket.id }
     socket.join('#projex', () => {
       sendUsers()
       sendNamespaces()
@@ -23,9 +26,14 @@ module.exports = io => {
       })
     })
 
+    socket.on('chat', (from, to) => io.to(to).emit('chat', from))
+
     socket.on('part', () => {
       console.log('part')
     })
+    socket.on('change nick', (socketId, nick) => {
+      users[socketId]['nick'] = nick
+    })
 
     socket.on('get namespaces', () => sendNamespaces())
 
@@ -38,7 +46,10 @@ module.exports = io => {
     }
 
     const sendUsers = () =>
-      socket.emit('got users', Object.keys(io.sockets.sockets))
+      io.emit(
+        'got users',
+        Object.keys(io.sockets.sockets).map(socketId => users[socketId])
+      )
 
     socket.on('disconnect', async () => {
       io.emit('user disconnected', { socketId: socket.id })

src/App.js

@@ -9,7 +9,8 @@ const initialState = {
   loading: true,
   messages: [],
   message: '',
-  namespaces: [],
+  allNamespaces: [],
+  chats: [],
   namespace: '/',
   allUsers: [],
   user: {},
@@ -23,6 +24,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() {
@@ -32,9 +34,9 @@ class App extends React.Component {
   componentDidMount() {
     this.fetchData()
     this.socket.on('connect', () => {
-      console.log('connected!')
-      const user = { socketId: this.socket.id }
-      this.setState({ user })
+      console.log(`I am ${socket.id}`)
+      const user = { socketId: this.socket.id, nick: this.socket.id }
+      this.setState({ user, namespace: this.socket.id })
     })
 
     this.socket.on('user connected', payload => {
@@ -45,9 +47,9 @@ class App extends React.Component {
       console.log('a user disconnected.', payload)
     })
 
-    this.socket.on('got namespaces', namespaces => {
-      console.log('got namespaces:', namespaces)
-      this.setState({ namespaces })
+    this.socket.on('got all namespaces', allNamespaces => {
+      console.log('got all namespaces:', allNamespaces)
+      this.setState({ allNamespaces })
     })
 
     this.socket.on('got users', allUsers => {
@@ -55,10 +57,25 @@ class App extends React.Component {
       this.setState({ allUsers })
     })
 
+    this.socket.on('nick change', (socketId, nick) => {
+      const allUsers = this.state.allUsers
+      allUsers.map(u => {
+        if (u.socketId === socketId) u.nick = nick
+        return u
+      })
+      this.setState({ allUsers })
+    })
+
     this.socket.on('message', msg => {
+      if (msg.namespace === this.state.namespace) msg.read = true
       const messages = this.state.messages.concat(msg)
       this.setState({ messages })
     })
+
+    this.socket.on('chat', socketId => {
+      const chats = this.state.chats.concat(socketId)
+      this.setState({ chats })
+    })
   }
 
   handleChange(e) {
@@ -80,9 +97,10 @@ class App extends React.Component {
     const message = {
       id: uuid(),
       date: moment().format('MMMM D YYYY, h:mm a'),
-      socketId: this.socket.id,
       text: this.state.message,
-      namespace: this.state.namespace,
+      from: this.state.user.socketId,
+      to: this.state.namespace,
+      read: false,
     }
 
     this.sendMessage(message)
@@ -98,12 +116,40 @@ class App extends React.Component {
   join(namespace) {
     if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
     console.log('joining', namespace)
+    const chats = this.state.chats.concat(namespace)
     this.socket.emit('join', namespace)
-    this.setState({ namespace })
+    this.setState({ namespace, chats })
+  }
+  query(user) {
+    console.log(`starting query with ${user.socketId}`)
+    const chats = this.state.chats.concat(user.socketId)
+    this.setState({ namespace: user.socketId, chats })
   }
   sendMessage(msg) {
+    if (msg.to[0] !== '#' && !this.state.messages.find(m => m.to === msg.to)) {
+      console.log(`openign a chat with ${msg.to}`)
+      this.socket.emit('chat', msg.to)
+    }
     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 +157,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*/}
@@ -124,11 +171,17 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.allUsers.map(u => (
-                    <Dropdown.Item key={u} className="bg-dark text-light">
-                      {u}
-                    </Dropdown.Item>
-                  ))}
+                  {this.state.allUsers
+                    .filter(u => u.socketId !== this.socket.id)
+                    .map(u => (
+                      <Dropdown.Item
+                        key={u.socketId}
+                        className="bg-dark text-light"
+                        onClick={() => this.query(u)}
+                      >
+                        {u.socketId}
+                      </Dropdown.Item>
+                    ))}
                 </Dropdown.Menu>
               </Dropdown>
               <Dropdown>
@@ -137,15 +190,17 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.namespaces.map(r => (
-                    <Dropdown.Item
-                      key={r.namespace}
-                      className="bg-dark text-light"
-                      onClick={() => this.join(r.namespace)}
-                    >
-                      {r.namespace}
-                    </Dropdown.Item>
-                  ))}
+                  {this.state.allNamespaces
+                    .filter(n => n.namespace[0] === '#')
+                    .map(r => (
+                      <Dropdown.Item
+                        key={r.namespace}
+                        className="bg-dark text-light"
+                        onClick={() => this.join(r.namespace)}
+                      >
+                        {r.namespace}
+                      </Dropdown.Item>
+                    ))}
                 </Dropdown.Menu>
               </Dropdown>
             </Nav>
@@ -168,22 +223,32 @@ class App extends React.Component {
               <div className="mr-auto">server</div>
               {/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
             </Button>
-            {this.state.namespaces
-              .filter(
-                r =>
-                  r.namespace[0] === '#' &&
-                  r.sockets.includes(this.state.user.socketId)
-              )
-              .map(r => (
-                <Button
-                  key={r.namespace}
-                  className="btn btn-dark d-flex"
-                  onClick={() => this.setState({ namespace: r.namespace })}
+            {this.state.chats.map(c => (
+              <Button
+                key={c}
+                className="btn btn-dark d-flex"
+                onClick={() => this.activateChat(c)}
+              >
+                <div
+                  className={`mr-auto ${
+                    this.findUnreadMessages(c) > 0 ? 'text-danger' : ''
+                  }`}
                 >
-                  <div className="mr-auto">{r.namespace}</div>
-                  <div className="ml-auto">{r.sockets.length}</div>
-                </Button>
-              ))}
+                  {c}
+                </div>
+                {/*<div className="mr-auto badge bg-success">
+                      this.state.messages.filter(
+                        m => m.namespace === r.namespace
+                      ).length
+                  </div>  */}
+                {this.findUnreadMessages(c) > 0 ? (
+                  <div className="mr-auto badge bg-danger">
+                    {this.findUnreadMessages(c)}
+                  </div>
+                ) : null}
+                <div className="ml-auto">count</div>
+              </Button>
+            ))}
           </div>
 
           {/*Main Section*/}
@@ -198,7 +263,7 @@ class App extends React.Component {
             <div className="d-flex flex-column border border-secondary flex-grow-1">
               <div className="bg-dark flex-grow-1 p-2 text-light">
                 {this.state.messages
-                  .filter(m => m.namespace === this.state.namespace)
+                  .filter(m => m.to === this.state.namespace)
                   .map(m => (
                     <div className="d-flex justify-content-between" key={m.id}>
                       <div>{m.date}</div>
@@ -220,7 +285,7 @@ class App extends React.Component {
                   type="submit"
                   onSubmit={this.handleSubmit}
                 >
-                  submit
+                  submit as {this.state.user.nick}
                 </Button>
               </form>
             </div>