https://activerubyist.com/assets/controllers/notification_badge_controller-b7c743ea.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="notification-badge"
4export default class extends Controller {
5  static targets = ["count", "container"]
6  
7  connect() {
8    // Initialize the badge
9    this.refreshBadge()
10    
11    // Set up polling to refresh the badge every 10 seconds
12    this.refreshInterval = setInterval(() => {
13      this.refreshBadge()
14    }, 10000)
15    
16    // Listen for page visibility changes
17    document.addEventListener("visibilitychange", this.handleVisibilityChange.bind(this))
18  }
19  
20  disconnect() {
21    // Clean up when the controller disconnects
22    if (this.refreshInterval) {
23      clearInterval(this.refreshInterval)
24    }
25    document.removeEventListener("visibilitychange", this.handleVisibilityChange.bind(this))
26  }
27  
28  handleVisibilityChange() {
29    // Refresh the badge when the page becomes visible
30    if (document.visibilityState === "visible") {
31      this.refreshBadge()
32    }
33  }
34  
35  refreshBadge() {
36    fetch('/notifications/unread_count', {
37      headers: {
38        'Accept': 'application/json'
39      }
40    })
41    .then(response => response.json())
42    .then(data => {
43      // Update the badge count
44      if (this.hasCountTarget) {
45        this.countTarget.textContent = data.count
46      }
47      
48      // Show/hide the badge based on count
49      if (this.hasContainerTarget) {
50        if (data.count > 0) {
51          this.containerTarget.classList.remove('hidden')
52        } else {
53          this.containerTarget.classList.add('hidden')
54        }
55      }
56    })
57    .catch(error => console.error('Error updating notification badge:', error))
58  }
59}