From 0b31e141329b319f00b52cbc8b6c12867a514f53 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Sun, 2 Feb 2020 22:34:16 +0530
Subject: [PATCH] Feature: Add online status to each user (#452)

* Feature: Add online status to each user
* Add OnlineStatusable, add availability status to thumbnail
---
 app/channels/room_channel.rb                  |  5 ++++
 app/controllers/api/v1/agents_controller.rb   |  2 +-
 .../components/widgets/Thumbnail.vue          | 30 +++++++++++++++++--
 .../dashboard/conversation/ContactPanel.vue   |  1 +
 .../dashboard/settings/agents/Index.vue       |  3 +-
 .../widget/store/modules/conversation.js      | 10 +++----
 .../specs/conversation/getters.spec.js        | 23 ++++++++++++--
 .../concerns/availability_statusable.rb       | 11 +++++++
 app/models/contact.rb                         |  1 +
 app/models/user.rb                            |  1 +
 app/views/api/v1/agents/index.json.jbuilder   | 10 +++++++
 app/views/api/v1/contacts/show.json.jbuilder  |  3 +-
 .../widget/inbox_members/index.json.jbuilder  |  1 +
 lib/online_status_tracker.rb                  | 19 ++++++++++++
 14 files changed, 106 insertions(+), 14 deletions(-)
 create mode 100644 app/models/concerns/availability_statusable.rb
 create mode 100644 app/views/api/v1/agents/index.json.jbuilder
 create mode 100644 lib/online_status_tracker.rb

diff --git a/app/channels/room_channel.rb b/app/channels/room_channel.rb
index c04b72877..df1a05d6b 100644
--- a/app/channels/room_channel.rb
+++ b/app/channels/room_channel.rb
@@ -1,5 +1,10 @@
 class RoomChannel < ApplicationCable::Channel
   def subscribed
     stream_from params[:pubsub_token]
+    ::OnlineStatusTracker.add_subscription(params[:pubsub_token])
+  end
+
+  def unsubscribed
+    ::OnlineStatusTracker.remove_subscription(params[:pubsub_token])
   end
 end
diff --git a/app/controllers/api/v1/agents_controller.rb b/app/controllers/api/v1/agents_controller.rb
index 681422515..a1758b40b 100644
--- a/app/controllers/api/v1/agents_controller.rb
+++ b/app/controllers/api/v1/agents_controller.rb
@@ -4,7 +4,7 @@ class Api::V1::AgentsController < Api::BaseController
   before_action :build_agent, only: [:create]
 
   def index
-    render json: agents
+    @agents = agents
   end
 
   def destroy
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index d2a0a50b2..b27a49028 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -16,12 +16,17 @@
       :size="avatarSize"
     />
     <img
-      v-if="badge === 'Channel::FacebookPage'"
+      v-if="badge === 'Channel::FacebookPage' && status !== ''"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
       src="~dashboard/assets/images/fb-badge.png"
     />
+    <div
+      v-else-if="status === 'online'"
+      class="source-badge user--online"
+      :style="statusStyle"
+    ></div>
   </div>
 </template>
 <script>
@@ -41,6 +46,7 @@ export default {
   props: {
     src: {
       type: String,
+      default: '',
     },
     size: {
       type: String,
@@ -52,6 +58,11 @@ export default {
     },
     username: {
       type: String,
+      default: '',
+    },
+    status: {
+      type: String,
+      default: '',
     },
   },
   data() {
@@ -67,6 +78,10 @@ export default {
       const badgeSize = `${this.avatarSize / 3}px`;
       return { width: badgeSize, height: badgeSize };
     },
+    statusStyle() {
+      const statusSize = `${this.avatarSize / 4}px`;
+      return { width: statusSize, height: statusSize };
+    },
   },
   methods: {
     onImgError() {
@@ -78,6 +93,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/foundation-settings';
 @import '~dashboard/assets/scss/mixins';
 
 .user-thumbnail-box {
@@ -91,11 +107,21 @@ export default {
   }
 
   .source-badge {
-    bottom: -$space-micro / 2;
+    bottom: -$space-micro;
     height: $space-slab;
     position: absolute;
     right: $zero;
     width: $space-slab;
   }
+
+  .user--online {
+    background: $success-color;
+    border-radius: 50%;
+    bottom: $space-micro;
+
+    &:after {
+      content: ' ';
+    }
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 1a8179b31..ad270ddc9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -7,6 +7,7 @@
           size="56px"
           :badge="contact.channel"
           :username="contact.name"
+          :status="contact.availability_status"
         />
         <div class="contact--details">
           <div class="contact--name">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index d2e5267a4..44934487e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -26,10 +26,11 @@
                 <!-- Gravtar Image -->
                 <td>
                   <thumbnail
-                    :src="gravatarUrl(agent.email)"
+                    :src="agent.thumbnail"
                     class="columns"
                     :username="agent.name"
                     size="40px"
+                    :status="agent.availability_status"
                   />
                 </td>
                 <!-- Agent Name + Email -->
diff --git a/app/javascript/widget/store/modules/conversation.js b/app/javascript/widget/store/modules/conversation.js
index 81a19fd13..34d8688bf 100755
--- a/app/javascript/widget/store/modules/conversation.js
+++ b/app/javascript/widget/store/modules/conversation.js
@@ -49,7 +49,6 @@ export const getters = {
       Object.values(_state.conversations),
       message => new DateHelper(message.created_at).format()
     );
-
     return Object.keys(conversationGroupedByDate).map(date => {
       const messages = conversationGroupedByDate[date].map((message, index) => {
         let showAvatar = false;
@@ -59,12 +58,11 @@ export const getters = {
           const nextMessage = conversationGroupedByDate[date][index + 1];
           const currentSender = message.sender ? message.sender.name : '';
           const nextSender = nextMessage.sender ? nextMessage.sender.name : '';
-          showAvatar = currentSender !== nextSender;
+          showAvatar =
+            currentSender !== nextSender ||
+            message.message_type !== nextMessage.message_type;
         }
-        return {
-          showAvatar,
-          ...message,
-        };
+        return { showAvatar, ...message };
       });
 
       return {
diff --git a/app/javascript/widget/store/modules/specs/conversation/getters.spec.js b/app/javascript/widget/store/modules/specs/conversation/getters.spec.js
index 57efafa19..4a4011621 100644
--- a/app/javascript/widget/store/modules/specs/conversation/getters.spec.js
+++ b/app/javascript/widget/store/modules/specs/conversation/getters.spec.js
@@ -61,19 +61,27 @@ describe('#getters', () => {
           id: 1,
           content: 'Thanks for the help',
           created_at: 1574075964,
+          message_type: 0,
         },
         2: {
           id: 2,
           content: 'Yes, It makes sense',
           created_at: 1574092218,
+          message_type: 0,
         },
         3: {
           id: 3,
           content: 'Hey',
-          created_at: 1576340623,
+          created_at: 1574092218,
+          message_type: 1,
         },
         4: {
           id: 4,
+          content: 'Hey',
+          created_at: 1576340623,
+        },
+        5: {
+          id: 5,
           content: 'How may I help you',
           created_at: 1576340626,
         },
@@ -88,12 +96,21 @@ describe('#getters', () => {
             content: 'Thanks for the help',
             created_at: 1574075964,
             showAvatar: false,
+            message_type: 0,
           },
           {
             id: 2,
             content: 'Yes, It makes sense',
             created_at: 1574092218,
             showAvatar: true,
+            message_type: 0,
+          },
+          {
+            id: 3,
+            content: 'Hey',
+            created_at: 1574092218,
+            showAvatar: true,
+            message_type: 1,
           },
         ],
       },
@@ -101,13 +118,13 @@ describe('#getters', () => {
         date: 'Dec 14, 2019',
         messages: [
           {
-            id: 3,
+            id: 4,
             content: 'Hey',
             created_at: 1576340623,
             showAvatar: false,
           },
           {
-            id: 4,
+            id: 5,
             content: 'How may I help you',
             created_at: 1576340626,
             showAvatar: true,
diff --git a/app/models/concerns/availability_statusable.rb b/app/models/concerns/availability_statusable.rb
new file mode 100644
index 000000000..c7a3541e2
--- /dev/null
+++ b/app/models/concerns/availability_statusable.rb
@@ -0,0 +1,11 @@
+module AvailabilityStatusable
+  extend ActiveSupport::Concern
+
+  def online?
+    ::OnlineStatusTracker.subscription_count(pubsub_token) != 0
+  end
+
+  def availability_status
+    online? ? 'online' : 'offline'
+  end
+end
diff --git a/app/models/contact.rb b/app/models/contact.rb
index aaeef0ea5..a21f1b2d5 100644
--- a/app/models/contact.rb
+++ b/app/models/contact.rb
@@ -20,6 +20,7 @@
 class Contact < ApplicationRecord
   include Pubsubable
   include Avatarable
+  include AvailabilityStatusable
   validates :account_id, presence: true
 
   belongs_to :account
diff --git a/app/models/user.rb b/app/models/user.rb
index 3c2729aa1..7d1e8391d 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -48,6 +48,7 @@ class User < ApplicationRecord
   include Events::Types
   include Pubsubable
   include Avatarable
+  include AvailabilityStatusable
   include Rails.application.routes.url_helpers
 
   devise :database_authenticatable,
diff --git a/app/views/api/v1/agents/index.json.jbuilder b/app/views/api/v1/agents/index.json.jbuilder
new file mode 100644
index 000000000..b2883ad2e
--- /dev/null
+++ b/app/views/api/v1/agents/index.json.jbuilder
@@ -0,0 +1,10 @@
+json.array! @agents do |agent|
+  json.account_id agent.account_id
+  json.availability_status agent.availability_status
+  json.confirmed agent.confirmed?
+  json.email agent.email
+  json.id agent.id
+  json.name agent.name
+  json.role agent.role
+  json.thumbnail agent.avatar_url
+end
diff --git a/app/views/api/v1/contacts/show.json.jbuilder b/app/views/api/v1/contacts/show.json.jbuilder
index 63842f142..f9b8b19ca 100644
--- a/app/views/api/v1/contacts/show.json.jbuilder
+++ b/app/views/api/v1/contacts/show.json.jbuilder
@@ -1,7 +1,8 @@
 json.payload do
+  json.availability_status @contact.availability_status
+  json.email @contact.email
   json.id @contact.id
   json.name @contact.name
-  json.email @contact.email
   json.phone_number @contact.phone_number
   json.thumbnail @contact.avatar_url
 end
diff --git a/app/views/api/v1/widget/inbox_members/index.json.jbuilder b/app/views/api/v1/widget/inbox_members/index.json.jbuilder
index 0cff79c74..24b5e5063 100644
--- a/app/views/api/v1/widget/inbox_members/index.json.jbuilder
+++ b/app/views/api/v1/widget/inbox_members/index.json.jbuilder
@@ -2,5 +2,6 @@ json.payload do
   json.array! @inbox_members do |inbox_member|
     json.name inbox_member.user.name
     json.avatar_url inbox_member.user.avatar_url
+    json.availability_status inbox_member.user.availability_status
   end
 end
diff --git a/lib/online_status_tracker.rb b/lib/online_status_tracker.rb
new file mode 100644
index 000000000..fa66453ad
--- /dev/null
+++ b/lib/online_status_tracker.rb
@@ -0,0 +1,19 @@
+module OnlineStatusTracker
+  def self.add_subscription(channel_id)
+    count = subscription_count(channel_id)
+    ::Redis::Alfred.setex(channel_id, count + 1)
+  end
+
+  def self.remove_subscription(channel_id)
+    count = subscription_count(channel_id)
+    if count == 1
+      ::Redis::Alfred.delete(channel_id)
+    elsif count != 0
+      ::Redis::Alfred.setex(channel_id, count - 1)
+    end
+  end
+
+  def self.subscription_count(channel_id)
+    ::Redis::Alfred.get(channel_id).to_i
+  end
+end