feat(ngx-utils): updated formatTimeInWords Pipe to reflect new date-f…

…ns changes in 2.0.0-alpha.27

libs/core/src/lib/services/media-query.service.ts

@@ -1,15 +1,14 @@
 import { Injectable } from '@angular/core';
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Observable } from 'rxjs/internal/Observable';
 import { ReplaySubject } from 'rxjs/internal/ReplaySubject';
 
 @Injectable({
   providedIn: 'root',
 })
 export class MediaQueryService {
-  constructor(media: ObservableMedia) {
-    media
-      .asObservable()
+  constructor(mediaObserver: MediaObserver) {
+    mediaObserver.media$
       .subscribe(res => this._changes$.next(res), err => this._changes$.error(err), () => this._changes$.complete());
 
     this._changes$.subscribe(change => {

libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { NavigationEnd, Router } from '@angular/router';
 import { routeAnimation, hierarchicalRouteAnimation } from '@ngx-starter-kit/animations';
 import { Actions, Store } from '@ngxs/store';
@@ -34,7 +34,7 @@ export class DashboardLayoutComponent implements OnInit, OnDestroy {
     private router: Router,
     private store: Store,
     private actions$: Actions,
-    private media: ObservableMedia,
+    private mediaObserver: MediaObserver,
     private oauthService: OAuthService,
     @Inject(WINDOW) private window: Window,
   ) {}
@@ -47,8 +47,7 @@ export class DashboardLayoutComponent implements OnInit, OnDestroy {
 
     this.depth$ = this.store.select<any>(RouterState.state).pipe(map(state => state.data.depth));
 
-    this.media
-      .asObservable()
+    this.mediaObserver.media$
       .pipe(untilDestroy(this))
       .subscribe((change: MediaChange) => {
         const isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';

libs/navigator/src/lib/services/menu.service.ts

@@ -6,7 +6,7 @@ import { Tree } from '@ngx-starter-kit/tree';
 import { NavigationEnd, Router } from '@angular/router';
 import { SidenavState } from './sidenav-state.enum';
 import { MENU_ITEMS } from '../symbols';
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { map } from 'rxjs/operators';
 
 @Injectable()
@@ -68,7 +68,7 @@ export class MenuService {
   constructor(
     @Inject(MENU_ITEMS) private menuItems: MenuItem[],
     private router: Router,
-    private media: ObservableMedia,
+    mediaObserver: MediaObserver
   ) {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -81,8 +81,7 @@ export class MenuService {
       }
     });
 
-    media
-      .asObservable()
+    mediaObserver.media$
       .pipe(map((change: MediaChange) => change.mqAlias === 'xs' || change.mqAlias === 'sm' || change.mqAlias === 'md'))
       .subscribe(isLowerThanLarge => {
         this.isLowerThanLarge = isLowerThanLarge;

libs/ngx-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-starter-kit/ngx-utils",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": ">=6.0.0 <8.0.0",
     "@angular/core": ">=6.0.0 <8.0.0",

libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts

@@ -3,10 +3,10 @@ import { AsyncPipe } from '@angular/common';
 import { interval, Observable, of } from 'rxjs';
 import { delayWhen, map, repeatWhen, takeWhile, tap } from 'rxjs/operators';
 
-import { Options } from 'date-fns';
 import { differenceInMinutes, formatDistance } from 'date-fns/esm';
+import { parseISO } from 'date-fns/esm';
 
-const defaultConfig: Options = { addSuffix: true };
+const defaultConfig = { addSuffix: true };
 /**
  * impure pipe, which in general can lead to bad performance
  * but the backoff function limits the frequency the pipe checks for updates
@@ -34,7 +34,7 @@ export class FormatTimeInWordsPipe implements PipeTransform, OnDestroy {
     this.isDestroyed = true; // pipe will stop executing after next iteration
   }
 
-  transform(date: string | number | Date, options?: Options): string {
+  transform(date: string | number | Date, options?): string {
     if (date == null) {
       throw new Error(FormatTimeInWordsPipe.NO_ARGS_ERROR);
     }
@@ -46,19 +46,19 @@ export class FormatTimeInWordsPipe implements PipeTransform, OnDestroy {
     return this.async.transform(this.agoExpression);
   }
 
-  private timeAgo(date: string | number | Date, options?: Options): Observable<string> {
+  private timeAgo(date: string | number | Date, options?): Observable<string> {
     let nextBackoff = this.backoff(date);
     return of(true).pipe(
       // will not recheck input until delay completes
-      repeatWhen(notify => notify.pipe(delayWhen( () => interval(nextBackoff)))),
+      repeatWhen(notify => notify.pipe(delayWhen(() => interval(nextBackoff)))),
       takeWhile(_ => !this.isDestroyed),
-      map(_ => formatDistance(date, new Date(), options)),
-      tap(_ => nextBackoff = this.backoff(date)),
+      map(_ => formatDistance(this.stringToDate(date), new Date(), options)),
+      tap(_ => (nextBackoff = this.backoff(date))),
     );
   }
 
   private backoff(date: string | number | Date): number {
-    const minutesElapsed = Math.abs(differenceInMinutes(new Date(), date)); // this will always be positive
+    const minutesElapsed = Math.abs(differenceInMinutes(new Date(), this.stringToDate(date))); // this will always be positive
     let backoffAmountInSeconds: number;
     if (minutesElapsed < 2) {
       backoffAmountInSeconds = 5;
@@ -71,4 +71,13 @@ export class FormatTimeInWordsPipe implements PipeTransform, OnDestroy {
     }
     return backoffAmountInSeconds * 1000; // return an amount of milliseconds
   }
+
+  private stringToDate(date: string | number | Date): number | Date {
+    const isString = s  => typeof(s) === 'string' || s instanceof String;
+    console.log(date);
+    console.log(new Date(date as string));
+    console.log(new Date(Date.parse(date as string)));
+
+    return isString(date) ? parseISO(date) : date;
+  }
 }

libs/sidenav/src/lib/components/icon-sidenav/icon-sidenav.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, HostBinding, HostListener, Inject, OnInit, OnDestroy } from '@angular/core';
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Subscription } from 'rxjs';
 import { MenuItem, MenuService } from '@ngx-starter-kit/navigator';
 import { Store } from '@ngxs/store';
@@ -44,10 +44,10 @@ export class IconSidenavDirective implements OnInit, OnDestroy {
     }
   }
 
-  constructor(private store: Store, private menuService: MenuService, private media: ObservableMedia) {}
+  constructor(private store: Store, private menuService: MenuService, private mediaObserver: MediaObserver) {}
 
   ngOnInit() {
-    this._mediaSubscription = this.media.subscribe((change: MediaChange) => {
+    this._mediaSubscription = this.mediaObserver.media$.subscribe((change: MediaChange) => {
       this.isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';
     });
   }