From c01052c5b0771d02088b10d873141d77ca7fc71d Mon Sep 17 00:00:00 2001
From: Nick Warner <nickwarner@gmail.com>
Date: Thu, 6 Sep 2018 22:10:29 -0400
Subject: [PATCH] Display incoming messages in correct channel

BONUS: add a count of unread messages in other channels
---
 app/actions.js             | 34 +++++++++++++++++++++++-----------
 app/containers/messages.js |  4 ++--
 app/containers/sidebar.js  |  4 ++++
 app/styles/style.scss      | 18 ++++++++++++++++++
 package.json               |  2 +-
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/app/actions.js b/app/actions.js
index 3f346ad..44dc1cf 100644
--- a/app/actions.js
+++ b/app/actions.js
@@ -81,17 +81,15 @@ export const changeUsername = ({addr, username}) => dispatch => {
 export const getMessages = ({addr, channel, count}) => dispatch => {
   if (channel.length === 0) return
   var cabal = cabals[addr]
-  if (!cabal.client.messages) cabal.client.messages = []
-
   let rs = cabal.messages.read(channel, {limit: count, lt: '~'})
   collect(rs, (err, msgs) => {
     if (err) return
     msgs.reverse()
-    cabal.client.messages = []
+    cabal.client.channelMessages[channel] = []
     msgs.forEach((msg) => {
       let author = cabal.client.users[msg.key].name
       let {type, timestamp, content} = msg.value
-      cabal.client.messages.push({
+      cabal.client.channelMessages[channel].push({
         author,
         content: content.text,
         key: msg.key + timestamp,
@@ -99,7 +97,7 @@ export const getMessages = ({addr, channel, count}) => dispatch => {
         type
       })
     })
-    dispatch({type: 'UPDATE_CABAL', addr, messages: cabal.client.messages})
+    dispatch({type: 'UPDATE_CABAL', addr, messages: cabal.client.channelMessages[channel]})
   })
 }
 
@@ -107,13 +105,13 @@ export const viewChannel = ({addr, channel}) => dispatch => {
   if (channel.length === 0) return
   var cabal = cabals[addr]
   cabal.client.channel = channel
-  cabal.client.messages = []
+  cabal.client.channelMessagesUnread[channel] = 0
   storeOnDisk()
 
   // dont pass around swarm and watcher, only the things that matter.
   dispatch({type: 'ADD_CABAL',
     addr,
-    messages: cabal.client.messages,
+    messages: cabal.client.channelMessages[channel],
     username: cabal.username,
     users: cabal.client.users,
     channel: cabal.client.channel,
@@ -172,14 +170,19 @@ const initializeCabal = ({addr, username, dispatch}) => {
     cabal.client.channels = []
     cabal.client.user = {}
     cabal.client.users = {}
-    cabal.client.messages = []
+    cabal.client.channelMessages = {}
+    cabal.client.channelMessagesUnread = {}
     cabal.client.channelListeners = {}
 
     const onMessage = (message) => {
+      let {type, timestamp, content} = message.value
+      let channel = content.channel
       if (cabal.client.users[message.key]) {
         let author = cabal.client.users[message.key].name
-        let {type, timestamp, content} = message.value
-        cabal.client.messages.push({
+        if (!cabal.client.channelMessages[channel]) {
+          cabal.client.channelMessages[channel] = []
+        }
+        cabal.client.channelMessages[channel].push({
           author,
           content: content.text,
           key: message.key + timestamp,
@@ -193,7 +196,16 @@ const initializeCabal = ({addr, username, dispatch}) => {
           })
         }
       }
-      dispatch({type: 'UPDATE_CABAL', addr, messages: cabal.client.messages})
+      if (cabal.client.channel === channel) {
+        dispatch({type: 'UPDATE_CABAL', addr, messages: cabal.client.channelMessages[channel]})
+      } else {
+        if (!cabal.client.channelMessagesUnread[channel]) {
+          cabal.client.channelMessagesUnread[channel] = 1
+        } else {
+          cabal.client.channelMessagesUnread[channel] = cabal.client.channelMessagesUnread[channel] + 1
+        }
+        dispatch({type: 'UPDATE_CABAL', addr, channelMessagesUnread: cabal.client.channelMessagesUnread})
+      }
     }
 
     cabal.channels.events.on('add', (channel) => {
diff --git a/app/containers/messages.js b/app/containers/messages.js
index 8f2053a..c42084e 100644
--- a/app/containers/messages.js
+++ b/app/containers/messages.js
@@ -15,7 +15,7 @@ export default function MessagesContainer (props) {
   if (messages.length === 0) {
     return (
       <div className='messages starterMessage'>
-        'This is a new channel. Send a message to start things off!'
+        This is a new channel. Send a message to start things off!
       </div>
     )
   }
@@ -58,7 +58,7 @@ export default function MessagesContainer (props) {
               <div key={index} className='messages__item messages__item--emote'>
                 <div className='messages__item__avatar'>
                   <div className='messages__item__avatar__img'>
-                  {repeatedAuthor ? null : <Avatar name={message.author} />}
+                    {repeatedAuthor ? null : <Avatar name={message.author} />}
                   </div>
                 </div>
                 <div className='messages__item__metadata'>
diff --git a/app/containers/sidebar.js b/app/containers/sidebar.js
index bc04263..afe0a2b 100644
--- a/app/containers/sidebar.js
+++ b/app/containers/sidebar.js
@@ -12,6 +12,7 @@ const mapStateToProps = state => {
     addr: state.currentCabal,
     cabals: state.cabals,
     cabal,
+    channelMessagesUnread: cabal.channelMessagesUnread,
     username: cabal.username
   }
 }
@@ -99,6 +100,9 @@ class SidebarScreen extends React.Component {
                 <div key={channel} onClick={this.selectChannel.bind(this, channel)} className={cabal.channel === channel ? 'collection__item active' : 'collection__item'}>
                   <div className='collection__item__icon'><img src='static/images/icon-channel.svg' /></div>
                   <div className='collection__item__content'>{channel}</div>
+                  {this.props.channelMessagesUnread && this.props.channelMessagesUnread[channel] > 0 &&
+                    <div className='collection__item__messagesUnreadCount'>{this.props.channelMessagesUnread[channel]}</div>
+                  }
                   <div className='collection__item__handle' />
                 </div>
               )}
diff --git a/app/styles/style.scss b/app/styles/style.scss
index f174c43..8e0bac6 100644
--- a/app/styles/style.scss
+++ b/app/styles/style.scss
@@ -272,6 +272,7 @@ form {
     width: 100%;
     padding: 0.25rem 1rem 0.25rem 1rem;
     transition: all 0.05s ease-in-out;
+    position: relative;
   }
 
   .collection .collection__item:hover {
@@ -309,6 +310,23 @@ form {
     overflow: hidden;
   }
 
+  .collection .collection__item .collection__item__messagesUnreadCount {
+    display: table-cell;
+    display: inline-block;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    color: #fff;
+    background-color: #693AFA;
+    padding: 0 0.5rem;
+    border-radius: 5rem;
+    vertical-align: middle;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    position: absolute;
+    right: 1rem;
+  }
+
   .collection .collection__item .collection__item__handle {
     display: table-cell;
     width: 1.25rem;
diff --git a/package.json b/package.json
index b82d443..240b059 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cabal-desktop",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Cabal p2p offline-first desktop application",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack",