chore(): education page #7

client/projects/website/src/app/modules/education/education.component.html

@@ -10,7 +10,7 @@ <h1 class="c-dt-primary"><span class="title-dt">Education</span></h1>
   <div class="grid">
     <div class="col-6 col-m-8 col-s-10 col-xs-12">
 
-      <div class="read-format" *ngFor="let edu of education$ | async">
+      <div class="read-format" *ngFor="let edu of education">
         <h4>{{edu.title}}</h4>
         <p><small>{{edu.createdAt | date:'mediumDate'}}</small></p>
         <p>{{edu.shortDescription}}</p>
@@ -19,7 +19,7 @@ <h4>{{edu.title}}</h4>
       </div>
 
       <div class="ta-center">
-        <button class="btn" (click)="loadMore()">
+        <button class="btn" (click)="loadMore$.next(true)" [disabled]="loadMoreDisable$ | async">
           Load more
         </button>
       </div>

client/projects/website/src/app/modules/education/education.component.ts

@@ -1,10 +1,11 @@
-import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
-import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
-import {filter, map, switchMap, tap, withLatestFrom} from 'rxjs/operators';
-import {TIME_PERIODS} from '../../shared/consts/time-periods.const';
-import {ObjectIdHelper} from '../../shared/helpers/object-id.helper';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, queue, Subject} from 'rxjs';
+import {map, scan, startWith, switchMap, take} from 'rxjs/operators';
 import {Education} from '../../shared/interfaces/education/education-interface';
-import {JasperoApiService} from '../../shared/services/jaspero-api/jaspero-api.service';
+import {untilDestroyed} from '@ngneat/until-destroy';
+import {FirestoreCollection} from '../../shared/enums/firestore-collection.enum';
+import {AngularFirestore, QueryDocumentSnapshot} from '@angular/fire/firestore';
+
 
 @Component({
   selector: 'hg-education',
@@ -13,58 +14,73 @@ import {JasperoApiService} from '../../shared/services/jaspero-api/jaspero-api.s
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EducationComponent implements OnInit {
-  constructor(private _jasperoApi: JasperoApiService) {}
-
-  education$: Observable<Education[]>;
+  constructor(private afs: AngularFirestore, private cdr: ChangeDetectorRef) {}
 
   loading$ = new BehaviorSubject(false);
-  currentPage$ = new BehaviorSubject(1);
-  totalPages$ = new BehaviorSubject(1);
-  cantLoadMore$: Observable<boolean>;
-  itemsAccumulator = [];
+  pageSize = 5;
+  cursor: QueryDocumentSnapshot<Education>;
+  hasMore$ = new BehaviorSubject(true);
+  loadMore$ = new Subject();
+  education: Education[];
+  loadMoreDisable$: Observable<boolean>;
+
 
   ngOnInit() {
-    this.cantLoadMore$ = combineLatest(
-      this.totalPages$,
-      this.currentPage$
-    ).pipe(
-      map(([total, current]) => {
-        return total <= current;
-      })
-    );
 
-    this.education$ = this.currentPage$.pipe(
-      withLatestFrom(this.totalPages$),
-      filter(([current, total]) => total >= current),
-      tap(() => this.loading$.next(true)),
-      switchMap(([current]) =>
-        this._jasperoApi.paginated(
-          'education',
-          {
-            current,
-            size: 5
-          },
-          TIME_PERIODS.tenMinutes
-        )
-      ),
-      map(results => {
-        this.totalPages$.next(results.data.total);
-        this.itemsAccumulator = [
-          ...this.itemsAccumulator,
-          ...results.data.results.map(item => ({
-            ...item,
-            createdAt: ObjectIdHelper.dateFromId(item._id)
-          }))
-        ];
 
-        return this.itemsAccumulator;
-      }),
-      tap(() => this.loading$.next(false))
+    this.loadMoreDisable$ = combineLatest([this.hasMore$, this.loading$]).pipe(
+      map(([hasMore, loading]) => loading || !hasMore)
     );
-  }
 
-  loadMore() {
-    const current = this.currentPage$.getValue();
-    this.currentPage$.next(!current ? 2 : current + 1);
+    this.loadMore$
+      .pipe(
+        startWith({}),
+        switchMap(() => {
+          this.loading$.next(true);
+
+          return this.afs
+            .collection<Education>(
+              FirestoreCollection.Education,
+              ref => {
+                let final = ref
+                  .limit(this.pageSize);
+
+                if (this.cursor) {
+                  final = final.startAfter(this.cursor);
+                }
+                return final;
+              }
+            )
+            .get()
+            .pipe(
+              take(1),
+              map((actions: any) => {
+                this.loading$.next(false);
+
+                if (actions.docs.length < this.pageSize) {
+                  this.hasMore$.next(false);
+                } else {
+                  this.cursor = actions.docs[
+                  actions.docs.length - 2
+                    ] as QueryDocumentSnapshot<Education>;
+                }
+                return actions.docs.reduce((acc, cur, ind) => {
+                  if (ind < this.pageSize - 1) {
+                    acc.push({
+                      id: cur.id,
+                      ...cur.data()
+                    });
+                  }
+                  return acc;
+                }, []);
+              })
+            );
+        }),
+        scan((acc, curr) => acc.concat(curr), []),
+      )
+      .subscribe(education => {
+        this.education = education;
+        this.cdr.markForCheck();
+      });
   }
 }

client/projects/website/src/app/modules/education/education.module.ts

@@ -1,48 +1,52 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
 import {SanitizeModule} from '@jaspero/ng-helpers';
 import {log} from 'util';
 import {MetaResolver} from '../../shared/resolvers/meta.resolver';
 import {StateService} from '../../shared/services/state/state.service';
 import {EducationComponent} from './education.component';
 import {EducationSinglePageComponent} from './single-page/education-single-page.component';
+import {EducationResolver} from './resolver/education.resolver';
 
-export function educationMeta([state]: [StateService]) {
+/*export function educationMeta([state]: [StateService]) {
   return {
     title: state.currentItem.title,
     description: state.currentItem.shortDescription
   };
-}
+}*/
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EducationComponent,
+    data: {
+      meta: {
+        title: 'Education',
+        description: `Educational videos, sites, and blogs endorsed by the Human Glycome Project.`
+      }
+    },
+    resolve: {
+      meta: MetaResolver
+    }
+  },
+  {
+    path: ':_id',
+    component: EducationSinglePageComponent,
+    /*        data: {
+              meta: educationMeta
+            },*/
+    resolve: {
+      meta: MetaResolver,
+      education: EducationResolver
+    }
+  }
+];
 
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule.forChild([
-      {
-        path: '',
-        component: EducationComponent,
-        data: {
-          meta: {
-            title: 'Education',
-            description: `Educational videos, sites, and blogs endorsed by the Human Glycome Project.`
-          }
-        },
-        resolve: {
-          meta: MetaResolver
-        }
-      },
-      {
-        path: ':_id',
-        component: EducationSinglePageComponent,
-        data: {
-          meta: educationMeta
-        },
-        resolve: {
-          meta: MetaResolver
-        }
-      }
-    ]),
+    RouterModule.forChild(routes),
     SanitizeModule
   ],
   declarations: [EducationComponent, EducationSinglePageComponent]