Firebase + Ionic + Displaying Activity

[sjmellor39]

I’ve connected to firebase and can pull data, push data, etc. and am having trouble with displaying a header with the date and all the activity under that date.

I have it structured as: User Profile > UID > Workouts > UID > Exercise, Date, Reps, Sets, Weight

First, is this a good structure (I’m a noob with databases)…

Second, how do i display the data in my activity feed with just one date and all the workouts for that date under that date header? … right now they’re pulling in all the data in order by date.

[aaronksaunders]

i would determine what are all of the potential queries before trying to lock into a specific data structure… based on your current question, i would restructure my data so that all workouts are stored under a date key.

Also you are using firebase realtime database, it might be easier to use firebase firestore

https://firebase.google.com/docs/database/rtdb-vs-firestore

[robinyo]

+1 Move to Firestore

See:

• https://firebase.google.com/docs/firestore/manage-data/structure-data
• https://angularfirebase.com/lessons/advanced-firestore-nosql-data-structure-examples/

So you might consider:

• workouts
  • uid

For example:

export interface Workout {
  id?: string;
  uid?: string;
  userDisplayName?: string;
  ...
  createdAt?: firebase.database.ServerValue.TIMESTAMP;
  updatedAt?: firebase.database.ServerValue.TIMESTAMP;
}

  public list(uid: string): Observable<Workout[]>  {
    return this.db.colWithIds$('workouts', ref => ref.orderBy('updatedAt', 'asc').
      where('uid', '==', uid));
  }


  ...

type CollectionPredicate<T> = string | AngularFirestoreCollection<T>;
type DocPredicate<T> = string | AngularFirestoreDocument<T>;

  ...

  col<T>(ref: CollectionPredicate<T>, queryFn?): AngularFirestoreCollection<T> {
    return typeof ref === 'string' ? this.afs.collection<T>(ref, queryFn) : ref;
  }

  doc<T>(ref: DocPredicate<T>): AngularFirestoreDocument<T> {
    return typeof ref === 'string' ? this.afs.doc<T>(ref) : ref;
  }

  colWithIds$<T>(ref: CollectionPredicate<T>, queryFn?): Observable<any[]> {
    return this.col(ref, queryFn).snapshotChanges().map(actions => {
      return actions.map(a => {
        const data: Object = a.payload.doc.data() as T;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }

To format a TIMESTAMP:

{{item.updatedAt.toDate() | date: 'medium'}}

[aaronksaunders]

i am about to go cross-eyed with all the types defined here…

[sjmellor39]

Thank you guys! I’m def going to attempt to move to Firestore, seems like a cleaner, simpler way. Was just scared off since it’s in Beta in the Ionic docs…

[robinyo]

@aaronksaunders

i am about to go cross-eyed with all the types defined here

It looks complicated (its not really) but it saves you a lot of boiler plate.

See:

• https://github.com/angular/angularfire2/blob/5.0.0-rc.6/src/firestore/observable/fromRef.ts
• Advanced Firestore Usage Guide with Angular

[8tomo8]

Can’t exactly see why you have different nested user Id’s under workout.

If you’re using angular fire then it will be a little different, but for straight firebase then:

export class YourClass {

theUserId;
theDate;
theExercise;
theReps;
theSets;
theWeight;

  constructor() {}

ionViewDidLoad() {
//get the user id however you were and assign to theUserId

firebase.database().ref('users/' + theUserId + 'workouts/' + theUserId).on('value', (snap) => {
this.theDate = snap.val().mydate;
this.theExercise= snap.val().exercise;
this.theReps= snap.val().reps;
this.theSets = snap.val().sets;
this.theWeight: snap.val().sets
})
}

Then bind the variables to your template as you already are