In a scenario where users can mark an item as a favorite, the following code demonstrates how data is retrieved from the database for display in the user interface.
Favorite service
async fetchFavoriteItems(): Promise<firebase.firestore.QuerySnapshot> {
const currentUser: firebase.User = await this.authService.getCurrentUser();
if (currentUser) {
this.favoriteItemsRef = firebase
.firestore()
.collection(`userFavorites`);
return this.favoriteItemsRef.where('uid', '==', currentUser.uid).get();
}
}
Favorite.ts
ngOnInit() {
this.favoriteService.fetchFavoriteItems().then(favoriteItemsSnapshot => {
this.favoriteItems = [];
favoriteItemsSnapshot.forEach(snap => {
this.favoriteItems.push({
id: snap.id,
name: snap.data().name
});
console.log(snap.data().name);
return false;
});
});
}
An issue arises when a user marks an item as a favorite and navigates to the favorites page to view it. The page does not update automatically, requiring a manual refresh. This disrupts the user experience. How can I address this issue and update the view without having to refresh the entire page?