tg is reactive

client/stillbox/src/app/app.component.ts

@@ -5,7 +5,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { CommonModule } from '@angular/common';
 import { AuthService } from './login/auth.service';
 import { NavigationComponent } from './navigation/navigation.component';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 import { UpdateNagComponent } from './version/update-nag/update-nag.component';
 import {
@@ -34,6 +34,7 @@ export class AppComponent {
   title = 'stillbox';
   opened!: boolean;
   toggleNavSubject: Subject<void> = new Subject<void>();
+  titleSub!: Subscription;
 
   constructor(
     private router: Router,
@@ -45,7 +46,7 @@ export class AppComponent {
   }
 
   ngOnInit() {
-    this.router.events
+    this.titleSub = this.router.events
       .pipe(
         filter((event) => event instanceof NavigationEnd),
         map(() => {
@@ -68,6 +69,7 @@ export class AppComponent {
   }
 
   logout() {
+    this.titleSub.unsubscribe();
     this.auth.logout();
   }
 }

client/stillbox/src/app/auth.guard.ts

@@ -7,16 +7,16 @@ export const AuthGuard: CanActivateFn = (route, state) => {
   const authSvc: AuthService = inject(AuthService);
   if (localStorage.getItem('jwt') == null) {
     let success = false;
-    authSvc.refresh().subscribe(
-      (event) => {
+    authSvc.refresh().subscribe({
+      next: (event) => {
         if (event?.status == 200) {
           success = true;
         }
       },
-      (err) => {
+      error: (err) => {
         router.navigate(['/login']);
       },
-    );
+    });
     return success;
   } else {
     return true;

client/stillbox/src/app/login/login.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { AuthService } from '../login/auth.service';
-import { catchError, of } from 'rxjs';
+import { catchError, of, Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -18,23 +18,30 @@ export class LoginComponent {
   username: string = '';
   password: string = '';
   failed: boolean = false;
+  private subscriptions = new Subscription();
 
   onSubmit() {
     this.failed = false;
-    this.apiService
-      .login(this.username, this.password)
-      .pipe(
-        catchError(() => {
-          this.failed = true;
-          return of(null);
+    this.subscriptions.add(
+      this.apiService
+        .login(this.username, this.password)
+        .pipe(
+          catchError(() => {
+            this.failed = true;
+            return of(null);
+          }),
+        )
+        .subscribe((event) => {
+          if (event?.status == 200) {
+            this.router.navigateByUrl('/');
+          } else {
+            this.failed = true;
+          }
         }),
-      )
-      .subscribe((event) => {
-        if (event?.status == 200) {
-          this.router.navigateByUrl('/');
-        } else {
-          this.failed = true;
-        }
-      });
+    );
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
   }
 }

client/stillbox/src/app/navigation/toolbar-context.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { map, shareReplay } from 'rxjs/operators';
 
@@ -11,6 +11,7 @@ export class ToolbarContextService {
   filterBtn: BehaviorSubject<boolean>;
   isHandset$: Observable<boolean>;
   filterPanel: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  subscriptions = new Subscription();
 
   showFilterButton() {
     this.filterBtn.next(true);
@@ -30,12 +31,16 @@ export class ToolbarContextService {
     console.log('hide');
   }
 
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+
   constructor() {
     this.filterBtn = new BehaviorSubject(false);
     this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
       map((result) => result.matches),
       shareReplay(),
     );
-    this.isHandset$.subscribe(this.filterPanel);
+    this.subscriptions.add(this.isHandset$.subscribe(this.filterPanel));
   }
 }

client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts

@@ -17,7 +17,7 @@ import {
   MatAutocompleteActivatedEvent,
 } from '@angular/material/autocomplete';
 import { CommonModule } from '@angular/common';
-import { catchError, of } from 'rxjs';
+import { BehaviorSubject, catchError, of } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 import {

client/stillbox/src/app/talkgroups/talkgroups.component.ts

@@ -8,7 +8,7 @@ import { TalkgroupTableComponent } from './talkgroup-table/talkgroup-table.compo
 import { PageEvent } from '@angular/material/paginator';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { PrefsService } from '../prefs/prefs.service';
-import { Subject } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -43,7 +43,9 @@ export class TalkgroupsComponent {
   perPage = 25;
   filter = new FormControl('');
   curPage = <PageEvent>{ pageIndex: 0, pageSize: this.perPage };
+  private getPage = new BehaviorSubject<PageEvent>(this.curPage);
   constructor(private route: ActivatedRoute) {}
+  subs = new Subscription();
 
   pageReset: Subject<void> = new Subject<void>();
 
@@ -53,30 +55,44 @@ export class TalkgroupsComponent {
 
   switchPage(p: PageEvent) {
     this.curPage = p;
-    this.route.paramMap
-      .pipe(
-        switchMap((params) => {
-          this.perPage = p!.pageSize;
-          this.selectedSys = Number(params.get('sys'));
-          this.selectedId = Number(params.get('tg'));
-          return this.tgService.getTalkgroupsPag({
-            page: p!.pageIndex + 1,
-            perPage: p!.pageSize,
-            filter: this.filter.value == '' ? null : this.filter.value,
-          });
-        }),
-      )
-      .subscribe((ev) => {
-        this.tgs = ev;
-      });
-    this.prefsService.set('tgsPerPage', p!.pageSize);
+
+    if (p.pageSize != this.perPage) {
+      this.perPage = p.pageSize;
+      this.prefsService.set('tgsPerPage', this.perPage);
+    }
+    this.getPage.next(p);
+  }
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
   }
 
   ngOnInit() {
     this.prefsService.get('tgsPerPage').subscribe((tgpp) => {
       this.perPage = tgpp;
-      this.switchPage(this.curPage);
     });
+    this.subs.add(
+      this.getPage
+        .pipe(
+          switchMap((p) =>
+            this.route.paramMap.pipe(
+              switchMap((params) => {
+                this.selectedSys = Number(params.get('sys'));
+                this.selectedId = Number(params.get('tg'));
+                return this.tgService.getTalkgroupsPag({
+                  page: p.pageIndex + 1,
+                  perPage: p.pageSize,
+                  filter: this.filter.value == '' ? null : this.filter.value,
+                });
+              }),
+            ),
+          ),
+        )
+        .subscribe((ev) => {
+          this.tgs = ev;
+        }),
+    );
+    this.switchPage(this.curPage);
   }
 
   ngAfterViewInit() {