fix: fix loading behaviour for events/notices

farscrl · Jan 11, 2024 · ebc16d5 · ebc16d5
1 parent 3be2c16
commit ebc16d5
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 37 deletions.
diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.ts b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.ts
@@ -20,6 +20,7 @@ export class EventsListCardsComponent implements OnInit, OnDestroy {
 
     public categorizedEvents: CategorizedEvents[] = [];
     private datesSubscription?: Subscription;
+    private moreDatesSubscription?: Subscription;
 
     constructor(
         private modalService: NgbModal,
@@ -34,15 +35,22 @@ export class EventsListCardsComponent implements OnInit, OnDestroy {
         dayjs.extend(customParseFormat);
         dayjs.locale('rm', rmLocale);
 
-        this.datesSubscription = this.eventsFilterService.getSearchResultsObservable().subscribe(dates => {
-            this.categorizedEvents = this.datesUtil.groupEvents(dates);
+        this.datesSubscription = this.eventsFilterService.getSearchResultsObservable().subscribe(events => {
+            this.categorizedEvents = [];
+            this.datesUtil.addGroupEvents(this.categorizedEvents, events);
+        });
+        this.moreDatesSubscription = this.eventsFilterService.getSearchMoreResultsObservable().subscribe(events => {
+            this.datesUtil.addGroupEvents(this.categorizedEvents, events);
         });
     }
 
     ngOnDestroy(): void {
         if (this.datesSubscription) {
             this.datesSubscription.unsubscribe();
         }
+        if (this.moreDatesSubscription) {
+            this.moreDatesSubscription.unsubscribe();
+        }
     }
 
     openMobileFilter(): void {

diff --git a/src/app/components/events/events-list/events-list-table/events-list-table.component.ts b/src/app/components/events/events-list/events-list-table/events-list-table.component.ts
@@ -20,6 +20,7 @@ export class EventsListTableComponent {
 
     public categorizedEvents: CategorizedEvents[] = [];
     private datesSubscription?: Subscription;
+    private moreDatesSubscription?: Subscription;
 
     constructor(
         private modalService: NgbModal,
@@ -34,15 +35,22 @@ export class EventsListTableComponent {
         dayjs.extend(customParseFormat);
         dayjs.locale('rm', rmLocale);
 
-        this.datesSubscription = this.eventsFilterService.getSearchResultsObservable().subscribe(dates => {
-            this.categorizedEvents = this.datesUtil.groupEvents(dates);
+        this.datesSubscription = this.eventsFilterService.getSearchResultsObservable().subscribe(events => {
+            this.categorizedEvents = [];
+            this.datesUtil.addGroupEvents(this.categorizedEvents, events);
+        });
+        this.moreDatesSubscription = this.eventsFilterService.getSearchMoreResultsObservable().subscribe(events => {
+            this.datesUtil.addGroupEvents(this.categorizedEvents, events);
         });
     }
 
     ngOnDestroy(): void {
         if (this.datesSubscription) {
             this.datesSubscription.unsubscribe();
         }
+        if (this.moreDatesSubscription) {
+            this.moreDatesSubscription.unsubscribe();
+        }
     }
 
     openMobileFilter(): void {

diff --git a/src/app/components/notices/notices-list/notices-list-cards/notices-list-cards.component.ts b/src/app/components/notices/notices-list/notices-list-cards/notices-list-cards.component.ts
@@ -19,6 +19,7 @@ export class NoticesListCardsComponent {
     notices: NoticeBoardItemDto[] = [];
 
     private datesSubscription?: Subscription;
+    private moreDatesSubscription?: Subscription;
 
     constructor(
         private modalService: NgbModal,
@@ -35,12 +36,18 @@ export class NoticesListCardsComponent {
         this.datesSubscription = this.noticesFilterService.getSearchResultsObservable().subscribe(notices => {
             this.notices = notices;
         });
+        this.moreDatesSubscription = this.noticesFilterService.getSearchMoreResultsObservable().subscribe(notices => {
+            this.notices.push(...notices);
+        });
     }
 
     ngOnDestroy(): void {
         if (this.datesSubscription) {
             this.datesSubscription.unsubscribe();
         }
+        if (this.moreDatesSubscription) {
+            this.moreDatesSubscription.unsubscribe();
+        }
     }
 
     openMobileFilter(): void {

diff --git a/src/app/components/notices/notices-list/notices-list-table/notices-list-table.component.ts b/src/app/components/notices/notices-list/notices-list-table/notices-list-table.component.ts
@@ -18,7 +18,9 @@ export class NoticesListTableComponent {
     @Output() toggleFilter: EventEmitter<void> = new EventEmitter<void>();
 
     public notices: NoticeBoardItemDto[] = [];
+
     private datesSubscription?: Subscription;
+    private moreDatesSubscription?: Subscription;
 
     constructor(
         private modalService: NgbModal,
@@ -33,6 +35,10 @@ export class NoticesListTableComponent {
         dayjs.locale('rm', rmLocale);
 
         this.datesSubscription = this.noticesFilterService.getSearchResultsObservable().subscribe(notices => {
+            this.notices = []
+            this.notices = notices;
+        });
+        this.moreDatesSubscription = this.noticesFilterService.getSearchMoreResultsObservable().subscribe(notices => {
             this.notices = notices;
         });
     }
@@ -41,6 +47,9 @@ export class NoticesListTableComponent {
         if (this.datesSubscription) {
             this.datesSubscription.unsubscribe();
         }
+        if (this.moreDatesSubscription) {
+            this.moreDatesSubscription.unsubscribe();
+        }
     }
 
     openMobileFilter(): void {

diff --git a/src/app/shared/services/events-filter.service.ts b/src/app/shared/services/events-filter.service.ts
@@ -19,13 +19,12 @@ export class EventsFilterService {
 
     public isSearching = false;
 
-    private events: EventLookup[] = [];
-
     private selectedRegions = new BehaviorSubject<number[]>([]);
     private selectedGenres = new BehaviorSubject<number[]>([]);
     private selectedStartDate = new BehaviorSubject<NgbDateStruct>(this.calendar.getToday());
     private searchTerm = new BehaviorSubject<string>('');
-    private searchResults = new BehaviorSubject<EventLookup[]>([]);
+    private searchResults = new Subject<EventLookup[]>();
+    private moreSearchResults = new Subject<EventLookup[]>();
     private urlParams = new BehaviorSubject<EventFilterUrlParams>(new EventFilterUrlParams());
 
     private pageSize = 10;
@@ -69,15 +68,13 @@ export class EventsFilterService {
     private debouncedSearch() {
         this.eventsService.getEvents(this.eventFilter, this.page, this.pageSize).subscribe((page: Page<EventLookup>) => {
             if (page.first) {
-                this.events = page.content;
+                this.searchResults.next(page.content);
             } else {
-                this.events = [...this.events, ...page.content];
+                this.moreSearchResults.next(page.content);
             }
             if (page.last) {
                 this.hasMorePages = false;
             }
-
-            this.searchResults.next(this.events);
             this.isSearching = false;
         });
     }
@@ -154,6 +151,10 @@ export class EventsFilterService {
         return this.searchResults.asObservable();
     }
 
+    getSearchMoreResultsObservable(): Observable<EventLookup[]> {
+        return this.moreSearchResults.asObservable();
+    }
+
     getEventFilterUrlParamsObservable(): Observable<EventFilterUrlParams> {
         return this.urlParams.asObservable();
     }

diff --git a/src/app/shared/services/notices-filter.service.ts b/src/app/shared/services/notices-filter.service.ts
@@ -19,11 +19,10 @@ export class NoticesFilterService {
 
     public isSearching = false;
 
-    private noticeBoardItems: NoticeBoardItemDto[] = [];
-
     private selectedGenres = new BehaviorSubject<number[]>([]);
     private searchTerm = new BehaviorSubject<string>('');
     private searchResults = new BehaviorSubject<NoticeBoardItemDto[]>([]);
+    private moreSearchResults = new BehaviorSubject<NoticeBoardItemDto[]>([]);
     private urlParams = new BehaviorSubject<EventFilterUrlParams>(new EventFilterUrlParams());
 
     private pageSize = 10;
@@ -67,15 +66,15 @@ export class NoticesFilterService {
     private debouncedSearch() {
         this.noticesService.getNotices(this.noticeBoardFilter, this.page, this.pageSize).subscribe((page: Page<NoticeBoardItemDto>) => {
             if (page.first) {
-                this.noticeBoardItems = page.content;
+                this.searchResults.next(page.content);
             } else {
-                this.noticeBoardItems = [...this.noticeBoardItems, ...page.content];
+                this.moreSearchResults.next(page.content);
             }
             if (page.last) {
                 this.hasMorePages = false;
             }
 
-            this.searchResults.next(this.noticeBoardItems);
+
             this.isSearching = false;
         });
     }
@@ -119,6 +118,10 @@ export class NoticesFilterService {
         return this.searchResults.asObservable();
     }
 
+    getSearchMoreResultsObservable(): Observable<NoticeBoardItemDto[]> {
+        return this.moreSearchResults.asObservable();
+    }
+
     getNoticesFilterUrlParamsObservable(): Observable<EventFilterUrlParams> {
         return this.urlParams.asObservable();
     }

diff --git a/src/app/shared/utils/dates.util.ts b/src/app/shared/utils/dates.util.ts
@@ -6,27 +6,21 @@ import { CategorizedEvents, EventLookup } from '../data/event';
     providedIn: 'root'
 })
 export class DatesUtil {
-    groupEvents(events: EventLookup[]): CategorizedEvents[] {
-        const dates = [...new Set(events.map(event => event.date))];
-        const sortedDates = dates.sort((a, b) => {
-            const dateA = dayjs(a, "DD-MM-YYYY");
-            const dateB = dayjs(b, "DD-MM-YYYY");
-            if (dateA.isBefore(dateB)) {
-                return -1;
-            }
-            if (dateA.isAfter(dateB)) {
-                return 1;
-            }
-            return 0;
-        });
-        return sortedDates.map(date => {
-            const dateObj = dayjs(date, "DD-MM-YYYY");
-
-            return {
-                date: date,
-                formattedDateShort: dateObj.format('DD-MM-YYYY'),
-                formattedWeekday: dateObj.format('dddd'),
-                events: events.filter(e => e.date === date),
+    addGroupEvents(groups: CategorizedEvents[], events: EventLookup[]) {
+        events.forEach(el => {
+            const group = groups.find(g => g.date === el.date);
+
+            if (group) {
+                group.events.push(el);
+            } else {
+                const dateObj = dayjs(el.date, "DD-MM-YYYY");
+
+                groups.push({
+                    date: el.date,
+                    formattedDateShort: dateObj.format('DD-MM-YYYY'),
+                    formattedWeekday: dateObj.format('dddd'),
+                    events: [el],
+                })
             }
         });
     }