fix(ngx-utils): fix date-fns formatTimeInWords pipe's change detection

xmlking · Nov 30, 2018 · 7c5c240 · 7c5c240
1 parent 0dc4e2e
commit 7c5c240
Show file tree

Hide file tree

Showing 7 changed files with 801 additions and 1,158 deletions.
diff --git a/libs/auth/src/lib/auth.guard.ts b/libs/auth/src/lib/auth.guard.ts
@@ -19,6 +19,7 @@ export class AuthGuard implements CanActivate {
         return true;
       } else {
         this.store.dispatch(new Login({ infoMsg: 'Please login to Enter' }));
+        // TODO return router.parseUrl('/notauthorized');
         return false;
       }
     }

diff --git a/libs/grid/src/lib/containers/accounts-grid-list/accounts-grid-list.component.html b/libs/grid/src/lib/containers/accounts-grid-list/accounts-grid-list.component.html
@@ -51,7 +51,7 @@
         <mat-card-content>
           Address: {{ account.location.street }}, {{ account.location.city }}, {{ account.location.state }}
           {{ account.location.zip }}<br />
-          Date of Birth: {{ account.dob | amCalendar }}<br />
+          Date of Birth: {{ account.dob.date | date }}<br />
           email: {{ account.email }}<br />
           phone: {{ account.phone }}, cell: {{ account.cell }}<br />
         </mat-card-content>

diff --git a/libs/grid/src/lib/services/random-account.service.ts b/libs/grid/src/lib/services/random-account.service.ts
@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
 
+// generated using https://transform.now.sh/json-to-ts-interface/
 export interface ResponseObject {
   results?: (RandomAccount)[] | null;
   info: Info;
@@ -19,7 +20,7 @@ export interface RandomAccount {
   name: Name;
   location: Location;
   email: string;
-  dob: string;
+  dob: Dob;
   phone: string;
   cell: string;
   id: Id;
@@ -38,6 +39,23 @@ export interface Location {
   city: string;
   state: string;
   postcode: number;
+  coordinates: Coordinates;
+  timezone: Timezone;
+}
+
+export interface Coordinates {
+  latitude: string;
+  longitude: string;
+}
+
+export interface Timezone {
+  offset: string;
+  description: string;
+}
+
+export interface Dob {
+  date: string;
+  age: number;
 }
 
 export interface Id {

diff --git a/libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts b/libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts
@@ -1,11 +1,12 @@
-import { OnDestroy, ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
-import { of, Observable } from 'rxjs';
-import { repeatWhen, takeWhile, map, tap, delay } from 'rxjs/operators';
+import { interval, Observable, of } from 'rxjs';
+import { delayWhen, map, repeatWhen, takeWhile, tap } from 'rxjs/operators';
 
 import { Options } from 'date-fns';
-// import { formatDistance, differenceInMinutes } from 'date-fns/esm';
-import { formatDistance, differenceInMinutes } from 'date-fns';
+// FIXME: esm modules not working with Jest Tests
+import { differenceInMinutes, formatDistance } from 'date-fns/esm';
+// import { formatDistance, differenceInMinutes } from 'date-fns';
 
 const defaultConfig: Options = { addSuffix: true };
 /**
@@ -50,10 +51,11 @@ export class FormatTimeInWordsPipe implements PipeTransform, OnDestroy {
   private timeAgo(date: string | number | Date, options?: Options): Observable<string> {
     let nextBackoff = this.backoff(date);
     return of(true).pipe(
-      repeatWhen(emitTrue => emitTrue.pipe(delay(nextBackoff))), // will not recheck input until delay completes
+      // will not recheck input until delay completes
+      repeatWhen(notify => notify.pipe(delayWhen( () => interval(nextBackoff)))),
       takeWhile(_ => !this.isDestroyed),
       map(_ => formatDistance(date, new Date(), options)),
-      tap(_ => (nextBackoff = this.backoff(date))),
+      tap(_ => nextBackoff = this.backoff(date)),
     );
   }