fix(ui): make notification countdown update reactively
The "Time Until" field in NotificationsView was not updating when refresh was clicked or over time because the computed property used Date.now() directly, which is evaluated once and doesn't trigger reactive updates. Changes: - Add reactive currentTime property that updates every second - Set up interval in mounted() to keep countdown live - Clean up interval in beforeUnmount() to prevent memory leaks - Update timeUntilNext computed to use reactive currentTime - Update refreshNotifications() to immediately refresh currentTime The countdown now updates automatically every second and immediately when the refresh button is clicked, without requiring navigation away and back to the view.
This commit is contained in:
@@ -139,9 +139,22 @@ class NotificationsView extends Vue {
|
||||
errorMessage = ''
|
||||
notificationStatus: NotificationStatus | null = null
|
||||
rolloverInfo: RolloverInfo | null = null
|
||||
currentTime = Date.now()
|
||||
private timeUpdateInterval: number | null = null
|
||||
|
||||
async mounted() {
|
||||
await this.refreshNotifications()
|
||||
// Update current time every second to keep countdown reactive
|
||||
this.timeUpdateInterval = window.setInterval(() => {
|
||||
this.currentTime = Date.now()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.timeUpdateInterval !== null) {
|
||||
clearInterval(this.timeUpdateInterval)
|
||||
this.timeUpdateInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
goBack() {
|
||||
@@ -151,6 +164,8 @@ class NotificationsView extends Vue {
|
||||
async refreshNotifications() {
|
||||
this.isLoading = true
|
||||
this.errorMessage = ''
|
||||
// Update current time immediately to refresh countdown
|
||||
this.currentTime = Date.now()
|
||||
|
||||
try {
|
||||
const platform = Capacitor.getPlatform()
|
||||
@@ -231,8 +246,7 @@ class NotificationsView extends Vue {
|
||||
|
||||
get timeUntilNext(): string | null {
|
||||
if (!this.nextNotificationTime) return null
|
||||
const now = Date.now()
|
||||
const diff = this.nextNotificationTime - now
|
||||
const diff = this.nextNotificationTime - this.currentTime
|
||||
|
||||
if (diff < 0) return 'Past due'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user