My experience with RxJS and Async data is limited, and I have been struggling with nesting subscriptions when working with multiple data sources. I am curious about the correct approach to combine or utilize multiple data points, such as retrieving a user profile and their posts simultaneously. Below is my current implementation:
constructor(private storage: AngularFireStorage, private db: AngularFirestore, private route: ActivatedRoute) {
// Get profile
this.route.paramMap.subscribe(params => {
const profileName = params.get('id');
const username = db.doc<any>('usernames/' + profileName).valueChanges();
username.subscribe(val => {
this.user = db.doc<User>('users/' + val.user).valueChanges();
this.user.subscribe(val => {
const userPosts = this.db.collection<Post>('posts', ref => ref.where('user', '==', val.uid)).snapshotChanges();
this.posts = userPosts.pipe(map(actions => actions.map(a => {
const data = a.payload.doc.data() as Post;
const mediaUrl = this.storage.ref('post/m/' + data.mediaM).getDownloadURL();
const userData: Observable<User> = db.doc<User>('users/' + data.user).valueChanges();
return {mediaUrl, userData, ...data}
})))
});
});
});
}