Class UpboatsComponent

sample/src/app/upboats/upboats.component.ts:40–111

  imports: [AsyncPipe],
})
export class UpboatsComponent implements OnInit {

  private readonly transferState = inject(TransferState);
  private readonly transferStateKeys = {
    disableInputs: makeStateKey<boolean>("upboats:disableInputs"),
    animals: makeStateKey<Animal[]>("upboats:animals"),
  } as const;

  protected readonly disableInputs = authState(inject(Auth)).pipe(
    map(it => !it),
    isPlatformServer(inject(PLATFORM_ID)) ?
        tap(it => this.transferState.set(this.transferStateKeys.disableInputs, it)) :
        startWith(this.transferState.get(this.transferStateKeys.disableInputs, true))
  );

  public readonly animals: Observable<Animal[]>;

  private readonly firestore;

  constructor() {
    this.firestore = getFirestore(inject(FirebaseApp));;
    if (!(this.firestore as any)._settingsFrozen && environment.emulatorPorts?.firestore) {
      connectFirestoreEmulator(this.firestore, "localhost", environment.emulatorPorts.firestore);
    }

    const animalsCollection = collection(this.firestore, 'animals').withConverter<Animal>({
      fromFirestore: snapshot => {
        const { name, upboats } = snapshot.data();
        const { id } = snapshot;
        const { hasPendingWrites } = snapshot.metadata;
        return { id, name, upboats, hasPendingWrites };
      },
      toFirestore: (it: any) => it,
    });
    const animalsQuery = query(animalsCollection, orderBy('upboats', 'desc'), orderBy('updatedAt', 'desc'));

    this.animals = collectionData(animalsQuery).pipe(
      traceUntilFirst('animals'),
      isPlatformServer(inject(PLATFORM_ID)) ?
        tap(it => this.transferState.set(this.transferStateKeys.animals, it)) :
        this.transferState.hasKey(this.transferStateKeys.animals) ?
          startWith(this.transferState.get(this.transferStateKeys.animals, [])) :
          tap()
    );
  }

  ngOnInit(): void {
  }

  async upboat(id: string) {
    return await updateDoc(doc(this.firestore, `animals/${id}`), {
        upboats: increment(1),
        updatedAt: serverTimestamp(),
    });
  }

  async downboat(id: string) {
    return await updateDoc(doc(this.firestore, `animals/${id}`), {