Rex

Hi Chris,

I just finished episode 7 of Group Chat with ActionCable. When I send a message, the "unread messages" div appears in the browser window of the sender as well as the recipient's window. Any ideas why it's appearing in the message sender's window?

barrooms/show
<% unread_messages = false %>
<div data-behavior="messages" data-barroom-id="&lt;%= @barroom.id %&gt;">
<% @messages.each do |message| %>
<% if !unread_messages && @barroom_user.last_read_at < message.created_at %>
<% unread_messages = true %>
<div class="strike">
Unread Messages
</div>
<% end %>
<%= render message %>
<% end %>
</div>

barrooms_controller
def show
@messages = @barroom.messages.order(created_at: :desc).limit(100).reverse
@barroom_user = current_user.barroom_users.find_by(barroom_id: @barroom.id)
end

channels/barrooms.coffee
App.barrooms = App.cable.subscriptions.create "BarroomsChannel",
connected: ->
# Called when the subscription is ready for use on the server

disconnected: ->
# Called when the subscription has been terminated by the server

received: (data) ->
active_barroom = $("[data-behavior='messages'][data-barroom-id='#{data.barroom_id}']")
if active_barroom.length > 0

if document.hidden
if $(".strike").length == 0
active_barroom.append("<div class="strike">Unread Meassages</div>")

if Notification.permission == "granted"
new Notification(data.username, {body: data.body})

else
App.last_read.update(data.barroom_id)

active_barroom.append("<div>#{data.username}: #{data.body}</div>")

else
$("[data-behavior='barroom-link'][data-barroom-id='#{data.barroom_id}']").css("font-weight", "bold")

send_message: (barroom_id, message) ->
@perform "send_message", {barroom_id: barroom_id, body: message}

I just finished episode 7 of Group Chat with ActionCable. When I send a message, the "unread messages" div appears in the browser window of the sender as well as the recipient's window. Any ideas why it's apearing in the message sender's window?

barrooms/show

<% unread_messages = false %>
<div data-behavior='messages' data-barroom-id='<%= @barroom.id %>'>
  <% @messages.each do |message| %>
    <% if !unread_messages && @barroom_user.last_read_at < message.created_at %>
      <% unread_messages = true %>
      <div class="strike">
        <span>Unread Messages</span>
      </div>
    <% end %>
    <%= render message %>
  <% end %>
</div>

barrooms_controller

def show
    @messages = @barroom.messages.order(created_at: :desc).limit(100).reverse
    @barroom_user = current_user.barroom_users.find_by(barroom_id: @barroom.id)
  end

channels/barrooms.coffee

App.barrooms = App.cable.subscriptions.create "BarroomsChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    active_barroom = $("[data-behavior='messages'][data-barroom-id='#{data.barroom_id}']")
    if active_barroom.length > 0

      if document.hidden
        if $(".strike").length == 0
          active_barroom.append("<div class='strike'><span>Unread Meassages</span></div>")

        if Notification.permission == "granted"
          new Notification(data.username, {body: data.body})

      else
        App.last_read.update(data.barroom_id)

      active_barroom.append("<div><strong>#{data.username}:</strong> #{data.body}</div>")


    else
      $("[data-behavior='barroom-link'][data-barroom-id='#{data.barroom_id}']").css("font-weight", "bold")

      send_message: (barroom_id, message) ->
        @perform "send_message", {barroom_id: barroom_id, body: message}

js/barrooms.coffee

handleVisibilityChange = ->
  $strike = $(".strike")
  if $strike.length > 0
    barroom_id = $("[data-behavior='messages']").data("barroom-id")
    App.last_read.update(barroom_id)
    $strike.remove()

$(document).on "turbolinks:load", ->
  $(document).on "click", handleVisibilityChange

  $("#new_message").on "keypress", (e) ->
    if e && e.keyCode == 13
      e.preventDefault()
      $(this).submit()

$("#new_message").on "submit", (e) ->
    e.preventDefault()

    barroom_id = $("[data-behavior='messages']").data("barroom-id")
    body        = $("#message_body")

    App.barrooms.send_message(barroom_id, body.val())

    body.val("")