optimize firebase reads

src/app/modules/songs/services/song-data.service.ts

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Song} from './song';
 import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
-import {map, shareReplay, startWith} from 'rxjs/operators';
+import {shareReplay, startWith} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -22,10 +22,7 @@ export class SongDataService {
     // this.list$.subscribe();
   }
 
-  // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
-
-  //public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
-  public read$ = (songId: string): Observable<Song | null> => this.list$.pipe(map(_ => _.find(s => s.id === songId) || null));
+  public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
   public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
   public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
   public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();

src/app/modules/songs/song/song.component.html

@@ -28,8 +28,7 @@
           <div *ngIf="song.artist">Künstler: {{ song.artist }}</div>
           <div *ngIf="song.label">Verlag: {{ song.label }}</div>
           <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
-          <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
-          <div *ngIf="songCount$()|async as count">Wie oft verwendet: {{ count }}</div>
+          <div>Wie oft verwendet: {{ songCount$ | async }}</div>
         </div>
       </div>
 

src/app/modules/songs/song/song.component.ts

@@ -56,6 +56,7 @@ export class SongComponent implements OnInit {
   public song$: Observable<Song | null> | null = null;
   public files$: Observable<File[] | null> | null = null;
   public user$: Observable<User | null> | null = null;
+  public songCount$: Observable<number> | null = null;
   public faEdit = faEdit;
   public faDelete = faTrash;
   public faFileCirclePlus = faFileCirclePlus;
@@ -85,6 +86,17 @@ export class SongComponent implements OnInit {
       map(param => param.songId),
       switchMap(songId => this.fileService.read$(songId))
     );
+
+    this.songCount$ = combineLatest([this.user$, this.song$]).pipe(
+      map(([user, song]) => {
+        if (!song) {
+          return 0;
+        }
+
+        return user?.songUsage?.[song.id] ?? 0;
+      }),
+      distinctUntilChanged()
+    );
   }
 
   public getFlags = (flags: string): string[] => {
@@ -105,12 +117,4 @@ export class SongComponent implements OnInit {
     await this.showService.update$(show?.id, {order: [...show.order, newId ?? '']});
     await this.router.navigateByUrl('/shows/' + show.id);
   }
-
-  public songCount$ = () =>
-    combineLatest([this.user$, this.song$]).pipe(
-      map(([user, song]) => {
-        return user.songUsage[song.id];
-      }),
-      distinctUntilChanged()
-    );
 }