Chore: use rxjs instead of JS setInterval for timers (#8461)

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -37,7 +37,7 @@
       </div>
     </div>
     <div class="form-check form-switch mb-0 ms-2">
-      <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" (click)="toggleAutoRefresh()" [attr.checked]="autoRefreshInterval">
+      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
       <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
     </div>
   </div>

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -283,9 +283,7 @@ describe('TasksComponent', () => {
     expect(reloadSpy).toHaveBeenCalledTimes(1)
     jest.advanceTimersByTime(5000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
-
-    component.toggleAutoRefresh()
-    expect(component.autoRefreshInterval).toBeNull()
+    component.autoRefreshEnabled = false
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -8,6 +8,7 @@ import {
   first,
   Subject,
   takeUntil,
+  timer,
 } from 'rxjs'
 import { PaperlessTask } from 'src/app/data/paperless-task'
 import { TasksService } from 'src/app/services/tasks.service'
@@ -48,7 +49,7 @@ export class TasksComponent
   public pageSize: number = 25
   public page: number = 1
 
-  public autoRefreshInterval: any
+  public autoRefreshEnabled: boolean = true
 
   private _filterText: string = ''
   get filterText() {
@@ -86,7 +87,14 @@ export class TasksComponent
 
   ngOnInit() {
     this.tasksService.reload()
-    this.toggleAutoRefresh()
+    timer(5000, 5000)
+      .pipe(
+        filter(() => this.autoRefreshEnabled),
+        takeUntil(this.unsubscribeNotifier)
+      )
+      .subscribe(() => {
+        this.tasksService.reload()
+      })
 
     this.filterDebounce
       .pipe(
@@ -101,7 +109,6 @@ export class TasksComponent
   ngOnDestroy() {
     super.ngOnDestroy()
     this.tasksService.cancelPending()
-    clearInterval(this.autoRefreshInterval)
   }
 
   dismissTask(task: PaperlessTask) {
@@ -212,17 +219,6 @@ export class TasksComponent
     }
   }
 
-  toggleAutoRefresh(): void {
-    if (this.autoRefreshInterval) {
-      clearInterval(this.autoRefreshInterval)
-      this.autoRefreshInterval = null
-    } else {
-      this.autoRefreshInterval = setInterval(() => {
-        this.tasksService.reload()
-      }, 5000)
-    }
-  }
-
   public resetFilter() {
     this._filterText = ''
   }