How can I get my my notification badge to stay visible in the navbar when the current page is refreshed or navigated away from?

Viewed 9

This may be a dumb question but I've been staring at this for a few days. I can't get my head wrapped around ActionCable and I've been trying out some really hacky ways (eventListeners with mutationObservers) to get these inbox notifications working. I've created a channel:

inbox_channel.coffee

inboxChannel = ->
  App.inbox = App.cable.subscriptions.create "InboxChannel",
    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) ->
      # Called when there's incoming data on the websocket for this channel
      bell = document.querySelector('.bell')
      inboxNotification = document.createElement('span')
   
      bell.append(inboxNotification)
      inboxNotification.classList.add('badge', 'rounded-pill', 'bg-danger', 'unread-count')

window.addEventListener 'turbolinks:load', inboxChannel

inbox_channel.rb:

class InboxChannel < ApplicationCable::Channel
  def subscribed
    stream_from "inbox_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

With the intention that the red badge would appear in the navbar:

_header.html.erb:

 <li class="nav-item <%= 'active'.freeze if current_path == inbox_path %>">
     <a class="nav-link inbox" href="/inbox">
        Inbox
        <i class='fa fa-thin fa-bell bell'></i>
     </a>
 </li>

It functions, sort of as intended, but when I navigate to another link, or refresh the page the badge disappears. I've not yet set up a job and I think that may be where I'm going wrong, but I'm also confused on how to go about it. Any help would be appreciated

0 Answers
Related