optimize remote #3

src/app/modules/presentation/remote/remote.component.ts

@@ -83,14 +83,13 @@ export class RemoteComponent implements OnDestroy {
     globalSettingsService: GlobalSettingsService,
     private cRef: ChangeDetectorRef
   ) {
-    const currentShowId$ = globalSettingsService.get$
+    const currentShowId$ = globalSettingsService.get$.pipe(
-      .pipe(
+      filter((settings): settings is NonNullable<typeof settings> => !!settings),
-        filter((settings): settings is NonNullable<typeof settings> => !!settings),
+      map(_ => _.currentShow),
-        map(_ => _.currentShow),
+      filter((showId): showId is string => !!showId),
-        filter((showId): showId is string => !!showId),
+      distinctUntilChanged(),
-        distinctUntilChanged(),
+      takeUntil(this.destroy$)
-        takeUntil(this.destroy$)
+    );
-      );
 
     const show$ = currentShowId$.pipe(
       switchMap(showId => this.showService.read$(showId)),

src/app/modules/shows/list/filter/filter.component.ts

@@ -5,8 +5,8 @@ import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angula
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
 import {ShowService} from '../../services/show.service';
-import {distinctUntilChanged, map} from 'rxjs/operators';
+import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
-import {combineLatest, Observable} from 'rxjs';
+import {combineLatest, Observable, of} from 'rxjs';
 import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
 import {UserService} from '../../../../services/user/user.service';
 import {isEqual} from 'lodash';
@@ -66,21 +66,31 @@ export class FilterComponent {
   }
 
   public owners$ = (): Observable<{key: string; value: string}[]> => {
-    return combineLatest([
+    return this.showService.list$().pipe(
-      this.showService.list$().pipe(
+      map(shows =>
-        map(shows => {
+        shows
-          return shows.map(show => show.owner).filter(onlyUnique);
+          .map(show => show.owner)
-        })
+          .filter(onlyUnique)
+          .filter((ownerId): ownerId is string => !!ownerId)
       ),
-      this.userService.users$,
+      switchMap(ownerIds => {
-    ]).pipe(
+        if (ownerIds.length === 0) {
-      map(([owners, users]) => {
+          return of([] as {key: string; value: string}[]);
-        return owners
+        }
-          .map(ownerId => ({
+
-            key: ownerId,
+        return combineLatest(
-            value: users.find(user => user.id === ownerId)?.name,
+          ownerIds.map(ownerId =>
-          }))
+            this.userService.getUserbyId$(ownerId).pipe(
-          .sort(dynamicSort('value'));
+              map(user => ({
+                key: ownerId,
+                value: user?.name,
+              }))
+            )
+          )
+        );
+      }),
+      map(owners => {
+        return owners.sort(dynamicSort('value'));
       }),
       distinctUntilChanged(isEqual),
       map(_ => _ as {key: string; value: string}[])

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

@@ -35,10 +35,13 @@ export class NewComponent implements OnInit, OnDestroy {
     this.form.reset();
 
     this.subs.push(
-      this.songService.list$().pipe(take(1)).subscribe(songs => {
+      this.songService
-        const freeSongnumber = this.getFreeSongNumber(songs);
+        .list$()
-        this.form.controls.number.setValue(freeSongnumber);
+        .pipe(take(1))
-      })
+        .subscribe(songs => {
+          const freeSongnumber = this.getFreeSongNumber(songs);
+          this.form.controls.number.setValue(freeSongnumber);
+        })
     );
   }
 

src/app/widget-modules/components/card/card.component.less

@@ -10,6 +10,7 @@
   width: 800px;
   position: relative;
   color: var(--text);
+  padding-bottom: 5px;
 
   @media screen and (max-width: 860px) {
     width: 100vw;