I'm currently working on a project that involves Angular and Firebase integration. Among the components in this project are profile, gallery, user pages, and others. However, I have encountered an issue that needs to be resolved.
In the navigation bar of the application, the main menu allows users to navigate between different pages. Of particular importance are:
- Profile
- Gallery
The Profile component displays publications posted by users. When navigating to the Profile page, the publications by a specific user are loaded using ngFor to iterate through and display them.
The Gallery component showcases all publications stored in Firebase. This page is also the main landing page when users log into the platform. The publications are loaded and displayed using a ngFor loop.
The problem arises after logging in: when transitioning from the Profile page back to the Gallery page, only the publications shown in the Profile are loaded again, instead of all the publications available.
Even with separate services for each component, the issue persists. Any assistance would be greatly appreciated. Below is some example code showcasing the problem:
HTML Code for Gallery Component
<div class="col-lg-9">
<div id="showResultList" class="row mt-5">
<app-loading-spinner *ngIf="page.loading | async"></app-loading-spinner>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-6" id='megustanlaspapas' loading="lazy" *ngFor="let pub of page.data | async">
<app-card-publication [pubR]='pub'></app-card-publication>
</div>
</div>
<div id="loadMore" *ngIf='!loadAll' class="row mt-2 mb-3">
<button class="btn btn-outline-info" (click)='loadMore()'>
<i class="fas fa-search-plus"></i> Load More
</button>
</div>
</div>
Gallery Component ngOnInit
constructor(private route: ActivatedRoute, public page : ScrollPaginationPublicationsService) {}
ngOnInit(): void {
this.loadAll = false;
this.page.reset();
this.page.init('publications', 'date');
}
Component Used in Gallery This component searches the Firestore Database using various attributes.
... (additional content omitted for brevity)Thank you for any help or insights into resolving this issue.
UPDATE:
Upon further investigation, I have identified the source of the error. In the Profile service, a search is conducted within the 'publications' collection in Firebase. This query retrieves documents using valueChanges and a pipe function which may be causing the issue.
... (additional content omitted for brevity)