chore(): news pages closes #7

Jaspero · Oct 4, 2020 · 75e1e5c · 75e1e5c
1 parent deae161
commit 75e1e5c
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 87 deletions.
diff --git a/client/projects/website/src/app/modules/home/components/news/news.component.html b/client/projects/website/src/app/modules/home/components/news/news.component.html
@@ -1,6 +1,6 @@
 <h3 class="m-b-m"><span class="title-lt">News</span></h3>
 
-<article class="bg-lt-primary m-b-m p-a-m" *ngFor="let item of news$ | async; jpTrackByField">
+<article class="bg-lt-primary m-b-m p-a-m" *ngFor="let item of news; jpTrackByField">
   <p><small class="ff-secondary">{{item.createdAt | date:'mediumDate'}}</small></p>
   <a [routerLink]="['/news', item.url]">
     <h5 class="m-b-s">{{item.title}}</h5>

diff --git a/client/projects/website/src/app/modules/home/components/news/news.component.ts b/client/projects/website/src/app/modules/home/components/news/news.component.ts
@@ -5,7 +5,7 @@ import {ImageSizeModification} from '../../../../shared/classes/image-modificati
 import {News} from '../../../../shared/interfaces/collections/news.interface';
 import {FirestoreCollection} from '../../../../shared/enums/firestore-collection.enum';
 import {AngularFirestore, QueryDocumentSnapshot} from '@angular/fire/firestore';
-import {untilDestroyed} from '@ngneat/until-destroy';
+import {Education} from '../../../../shared/interfaces/education/education-interface';
 
 @Component({
   selector: 'hg-news',
@@ -20,62 +20,70 @@ export class NewsComponent implements OnInit {
   news$: Observable<News[]>;
   cantLoadMore$: Observable<boolean>;
   loadMore$ = new Subject();
-  cursor: QueryDocumentSnapshot<News>;
+  pageSize = 5;
+  cursor: QueryDocumentSnapshot<Education>;
   news;
   hasMore$ = new BehaviorSubject(true);
   imageModifications = [new ImageSizeModification(480)];
+  loadMoreDisable$: Observable<boolean>;
+
 
   ngOnInit() {
-    this.cantLoadMore$ = combineLatest([this.hasMore$, this.loading$])
+
+
+    this.loadMoreDisable$ = combineLatest([this.hasMore$, this.loading$]).pipe(
+      map(([hasMore, loading]) => loading || !hasMore)
+    );
+
+    this.loadMore$
       .pipe(
-        map(([hasMore, loading]) => loading || !hasMore)
-      );
+        startWith({}),
+        switchMap(() => {
+          this.loading$.next(true);
 
-    this.loadMore$.pipe(
-      startWith({}),
-      switchMap(() => {
-        this.loading$.next(true);
+          return this.afs
+            .collection<Education>(
+              FirestoreCollection.News,
+              ref => {
+                let final = ref
+                  .limit(this.pageSize);
 
-        return this.afs
-          .collection(
-            FirestoreCollection.News,
-            ref => {
-              let final;
-              if (this.cursor) {
-                final = final.startAfter(this.cursor);
+                if (this.cursor) {
+                  final = final.startAfter(this.cursor);
+                }
+                return final;
               }
-              return final;
-            }
-          )
-          .get()
-          .pipe(
-            take(1),
-            map((actions: any) => {
-              this.loading$.next(false);
+            )
+            .get()
+            .pipe(
+              take(1),
+              map((actions: any) => {
+                this.loading$.next(false);
 
-              if (actions.docs.length < 5) {
-                this.hasMore$.next(false);
-              } else {
-                this.cursor = actions.docs[
-                actions.docs.length - 2
-                  ] as QueryDocumentSnapshot<News>;
-              }
-              return actions.docs.reduce((acc, cur, ind) => {
-                if (ind < 5 - 1) {
-                  acc.push({
-                    id: cur.id,
-                    ...cur.data()
-                  });
+                if (actions.docs.length < this.pageSize) {
+                  this.hasMore$.next(false);
+                } else {
+                  this.cursor = actions.docs[
+                  actions.docs.length - 2
+                    ] as QueryDocumentSnapshot<Education>;
                 }
-                return acc;
-              }, []);
-            })
-          );
-      }),
-      scan((acc, curr) => acc.concat(curr), []),
-    ).subscribe(news => {
-      this.news = news;
-      this.cdr.markForCheck();
-    });
+                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(news => {
+        this.news = news;
+        this.cdr.markForCheck();
+      });
   }
 }
diff --git a/client/projects/website/src/app/modules/news-page/news-page.component.ts b/client/projects/website/src/app/modules/news-page/news-page.component.ts
@@ -1,16 +1,10 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnInit,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
 
 import {ImageSizeModification} from '../../shared/classes/image-modifications/image-size-modification.class';
-import {ObjectIdHelper} from '../../shared/helpers/object-id.helper';
 import {News} from '../../shared/interfaces/collections/news.interface';
-import {StateService} from '../../shared/services/state/state.service';
 import {MatDialog} from '@angular/material/dialog';
+import {map} from 'rxjs/operators';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'hg-news-page',
@@ -19,7 +13,7 @@ import {MatDialog} from '@angular/material/dialog';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NewsPageComponent implements OnInit {
-  constructor(private _state: StateService, public dialog: MatDialog) {}
+  constructor(public dialog: MatDialog, private activatedRoute: ActivatedRoute) {}
 
   @ViewChild('galleryDialog', {read: TemplateRef})
   galleryDialogTemplate: TemplateRef<any>;
@@ -30,13 +24,15 @@ export class NewsPageComponent implements OnInit {
   indexNumb: number;
 
   ngOnInit() {
-    this.getInitialData();
+    this.activatedRoute.data
+      .pipe(
+        map(({news}) => news),
+      )
+      .subscribe(item => {
+        this.newsInfo = item;
+      });
   }
 
-  getInitialData() {
-    this.newsInfo = this._state.currentItem;
-    this.newsInfo['createdAt'] = ObjectIdHelper.dateFromId(this.newsInfo._id);
-  }
 
   change(direction) {
     if (direction === 'left') {

diff --git a/client/projects/website/src/app/modules/news-page/news-page.module.ts b/client/projects/website/src/app/modules/news-page/news-page.module.ts
@@ -1,12 +1,11 @@
 import {NgModule} from '@angular/core';
 import {MatDialogModule} from '@angular/material/dialog';
-import {RouterModule} from '@angular/router';
-import {ItemGuard} from '../../shared/guards/item.guard';
+import {RouterModule, Routes} from '@angular/router';
 import {MetaResolver} from '../../shared/resolvers/meta.resolver';
 import {StateService} from '../../shared/services/state/state.service';
 import {SharedModule} from '../../shared/shared.module';
-import {guardQuery} from '../resources/resources.module';
 import {NewsPageComponent} from './news-page.component';
+import {NewsResolver} from './resolvler/news.resolver';
 
 export function newsMeta([state]: [StateService]) {
   return {
@@ -15,30 +14,28 @@ export function newsMeta([state]: [StateService]) {
   };
 }
 
+const routes: Routes = [
+  {
+    path: ':url',
+    component: NewsPageComponent,
+    /*data: {
+      meta: newsMeta,
+      metaDeps: [StateService]
+    },*/
+    resolve: {
+      meta: MetaResolver,
+      news: NewsResolver
+    }
+  }
+]
+
 @NgModule({
   imports: [
     SharedModule,
     MatDialogModule,
-    RouterModule.forChild([
-      {
-        path: ':url',
-        component: NewsPageComponent,
-        canActivate: [ItemGuard],
-        data: {
-          itemGuard: {
-            collection: 'news',
-            cache: 'url',
-            query: guardQuery
-          },
-          meta: newsMeta,
-          metaDeps: [StateService]
-        },
-        resolve: {
-          meta: MetaResolver
-        }
-      }
-    ])
+    RouterModule.forChild(routes)
   ],
-  declarations: [NewsPageComponent]
+  declarations: [NewsPageComponent],
+  providers: [NewsResolver]
 })
 export class NewsPageModule {}
diff --git a/client/projects/website/src/app/modules/news-page/resolvler/news.resolver.ts b/client/projects/website/src/app/modules/news-page/resolvler/news.resolver.ts
@@ -15,8 +15,9 @@ export class NewsResolver implements Resolve<News> {
   }
 
   resolve(route: ActivatedRouteSnapshot) {
+    console.log(route);
     return this.afs
-      .doc(FirestoreCollection.News + '/' + route.params.id)
+      .doc(FirestoreCollection.News + '/' + route.params.url)
       .valueChanges()
       .pipe(
         take(1),