dynamicbible/app/db/src/app/app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AppService } from './services/app.service';
import { NavService } from './services/nav.service';
import { StorageService } from './services/storage.service';
import { Observable } from 'rxjs';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { map, shareReplay } from 'rxjs/operators';
import { MatSidenav } from '@angular/material/sidenav';
import { SubscriberComponent } from './common/components/subscriber.component';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent extends SubscriberComponent implements AfterViewInit {
  savedPages$ = this.appService.select((state) => state.savedPages.value);
  mainPages$ = this.appService.select((state) => state.mainPages);
  fontSize$ = this.appService.select((state) => state.displaySettings.value.cardFontSize + 'pt');
  cardFont$ = this.appService.select((state) => state.displaySettings.value.cardFontFamily);
  error$ = this.appService.select((state) => state.error);

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map((result) => result.matches),
    shareReplay()
  );

  @ViewChild('drawer') public sidenav: MatSidenav;
  @ViewChild('settings') public settings: MatSidenav;

  constructor(
    private appService: AppService,
    private navService: NavService,
    private storageService: StorageService,
    private breakpointObserver: BreakpointObserver,
    private snackBar: MatSnackBar
  ) {
    super();

    this.storageService.initSavedPages();
    this.storageService.initDisplaySettings();

    this.addSubscription(
      this.error$.subscribe((err) => {
        if (err) {
          this.snackBar.open(`Oh no! ${err.msg}`, 'Error', {
            duration: 4 * 1000,
          });
        }
      })
    );

    //#region  Handle recieving updates from firebase

    this.addSubscription(
      // when the user object changes, respond
      this.appService
        // this should trigger only once, when the user logs in.
        .select((state) => state.user)
        .subscribe((user) => {
          if (!user) {
            return; // if the user is null, avoid this.
          }
          this.storageService.initRemote(user);
        })
    );

    //#endregion

    //#region handle font settings

    this.addSubscription(
      this.fontSize$.subscribe((size) => {
        if (size) {
          document.documentElement.style.setProperty('--card-font-size', size);
        }
      })
    );
    this.addSubscription(
      this.cardFont$.subscribe((family) => {
        if (family) {
          document.documentElement.style.setProperty('--card-font-family', family);
        }
      })
    );

    //#endregion
  }

  ngAfterViewInit(): void {
    this.navService.setSidenav(this.sidenav, this.settings);
  }
}