Wednesday, 14 April 2021

Ionic 5 Firebase Realtime - Favorites in a list

I have an Ionic 5 app with a list of motorcycles. In that, the user can favorite them, using a toggle star icon. Then, I create a register in the user's node containing the motorcycle data, like this:

enter image description here

The problem is that I am not able to display the "star" icon in the list (always displays "star-outline") when the motorcycle was previously marked as "favorite" by the current user, although I can obtain this data from Firebase.

So far I have tried this way, unsuccessfully (the star icon keeps "star-outline" in all items):

list.page.html

<ion-col size="6" *ngFor="let item of motos; let i = index;">
  <ion-card>
    <ion-card-header>
      <ion-fab vertical="top" horizontal="start">
        <ion-fab-button (click)="addToFavorites(item, i)" icon-only color="clear">
          <ion-icon [name]="item.favourited ? 'star' : 'star-outline'"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-card-header>
    <ion-card-content>
        <div> </div>
        <div></div>
    </ion-card-content>
  </ion-card>
</ion-col>

list.page.ts

import { CrudMethodsService } from './services/crud-methods.service';

basePath = 'motos';
basePathU = 'users';

constructor(private crudServices: CrudMethodsService, public afAuth: AngularFireAuth) {      
 this.crudServices.getMotos(this.basePath).subscribe(res => {
    this.motos = res;
    this.afAuth.authState.subscribe(user => {
      if (user){
        this.userId = user.uid;
        const favoritas = 'favoritas';
        this.crudServices.getFavorites(this.basePathU, this.userId, favoritas).subscribe(us => {
          this.isFavorite = us;
          this.isFavorite.forEach(resp => {
            const item = this.motos;
            const p = this.favorites.indexOf(item);
            item.favourited = item.favourited ? false : true;
            for (let j = 0; j < this.motos.length; j++) {
              if (resp.item.key === this.motos[j].key && p === -1) {
                this.favorites.push(item);
                item.favourited = true;
              }
            }
          });
        });
      }
    });
  });
}

crud-methods.service.ts

getMotos(basePath: string) {
  return this.db.list(basePath).snapshotChanges().pipe(map(changes => {
    return changes.map(c => {
      const data = c.payload.val();
      const id = c.payload.key;
      return { key: id, ...(data as object) };
    });
  }));
}

getFavorites(basePath: string, key: string, path: string) {
  return this.db.list(basePath + '/' + key + '/' + path).snapshotChanges().pipe(map(changes => {
    return changes.map(c => {
      const data = c.payload.val();
      const id = c.payload.key;
      return { key: id, ...(data as object) };
    });
  }));
}


from Ionic 5 Firebase Realtime - Favorites in a list

No comments:

Post a Comment