Added pipes to get localized readable date.

Author: gnu4cn

src/app/home/components/reading-record-dialog.component.ts

@@ -18,7 +18,6 @@ import { MessageService } from '../../services/message.service';
 import { 
     IBookWithPath, 
     sortBy, 
-    getReadableDate,
     IMessage,
 } from '../../vendor';
 
@@ -66,10 +65,6 @@ export class ReadingRecordDialog implements OnInit{
         });
     }
 
-    readableDate = (date: Date) => {
-        return getReadableDate(date, this.i18n.browserLang);
-    }
-
     moveTo = (path: string, sectionAnchor?: string) => {
         const msg: IBookWithPath = {
             book: this.data,

src/app/home/components/reading-record.dialog.html

@@ -10,7 +10,7 @@ <h2 mat-dialog-title>
                 style="height: 40px; padding: 0">
                 <ion-label color="dark" class="ion-float-left" style="width: 360px;">
                     <ion-text class="ion-float-left" style="width: 350px;">
-                        <b>{{readableDate(record.dateCreated)}}</b> - <i>{{record.dateCreated | date : 'yyyy-MM-dd HH:mm:ss' : 'GMT+8' }}</i>
+                        <b>{{record.dateCreated | readableDate | async}}</b> - <i>{{record.dateCreated | date : 'yyyy-MM-dd HH:mm:ss' : 'GMT+8' }}</i>
                     </ion-text>
                 </ion-label>
             </mgl-timeline-entry-header>

src/app/home/components/search.component.html

@@ -26,7 +26,7 @@
             {{'home.search.stars' | translate}}<ion-icon name="star"></ion-icon>：<i>{{book.stars}}</i>
         </ion-label>
         <ion-label>
-            {{'home.search.dateUpdated' | translate}}<i><b>{{readableDate(book.dateUpdated)}}</b> - {{book.dateUpdated | date : 'yyyy-MM-dd HH:mm:ss' : 'GMT+8' }}</i>
+            {{'home.search.dateUpdated' | translate}}<i><b>{{book.dateUpdated | stringToDate | readableDate | async}}</b> - {{book.dateUpdated | date : 'yyyy-MM-dd HH:mm:ss' : 'GMT+8' }}</i>
         </ion-label>
     </mat-card-footer>
 </mat-card>

src/app/home/components/search.component.ts

@@ -4,7 +4,6 @@ import { parseISO } from 'date-fns';
 import { 
     ICloudBook,
     IAddBookDialogResData,
-    getReadableDate,
 } from '../../vendor';
 
 import { I18nService } from '../../i18n/i18n.service';
@@ -41,10 +40,5 @@ export class SearchComponent implements OnInit {
         dialogRef.afterClosed().subscribe((res: IAddBookDialogResData) => {
             if(res) this.book.save(res);
         });
-
-    }
-
-    readableDate = (date: Date) => {
-        return getReadableDate(parseISO(date.toString()), this.i18n.browserLang);
     }
 }

src/app/home/home.module.ts

@@ -30,6 +30,8 @@ import { MatPaginatorIntlHans } from '../vendor';
 
 import { HomePageRoutingModule } from './home-routing.module';
 import { HomePage } from './home.page';
+import { ReadableDatePipe } from './pipes/readable-date.pipe';
+import { StringToDatePipe } from './pipes/string-to-date.pipe';
 
 @NgModule({
     imports: [
@@ -50,7 +52,9 @@ import { HomePage } from './home.page';
         ReadmeDialog,
         ReadingRecordDialog,
         SnackbarComponent,
-        SearchComponent
+        SearchComponent,
+        ReadableDatePipe,
+        StringToDatePipe
     ],
     providers: [
         BookService,
@@ -59,6 +63,8 @@ import { HomePage } from './home.page';
         CateService,
         OpMessageService,
         PrivateTokensService,
+        ReadableDatePipe,
+        StringToDatePipe,
         FetchService,
         { provide: MatPaginatorIntl, useClass: MatPaginatorIntlHans}
     ]

src/app/home/home.page.html

@@ -143,7 +143,7 @@ <h2>{{'search.histories' | translate}}</h2>
                       style="width: 95%"
                 *ngFor="let history of searchHistory">
                 <mat-card-title>“{{history.keywords}}”</mat-card-title>
-                <mat-card-subtitle>@{{history.platform}} - <i>{{readableDate(history.date)}}</i></mat-card-subtitle>
+                <mat-card-subtitle>@{{history.platform}} - <i>{{history.date | readableDate | async}}</i></mat-card-subtitle>
             </mat-card>
         </div>
         <mat-paginator [length]="_searchHistory.length"

src/app/home/home.page.ts

@@ -40,7 +40,6 @@ import {
     IFilter,
     filterFn,
     sortBy,
-    getReadableDate,
     IMessage,
     IQueryResult,
     TAvatarIds, 
@@ -369,8 +368,4 @@ export class HomePage implements OnInit, AfterViewInit {
     clearKeywords = () => {
         this.keywords = '';
     }
-
-    readableDate = (date: Date) => {
-        return getReadableDate(date, this.i18n.browserLang);
-    }
 }

src/app/home/pipes/readable-date.pipe.ts

@@ -0,0 +1,58 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import {
+    differenceInYears,
+    differenceInMonths,
+    differenceInWeeks,
+    differenceInDays,
+    differenceInHours,
+    differenceInMinutes
+} from 'date-fns';
+
+
+@Pipe({
+    name: 'readableDate'
+})
+export class ReadableDatePipe implements PipeTransform {
+    constructor (private translate: TranslateService) {}
+
+    transform(date: Date, ...args: unknown[]): Promise<string> {
+        const now = new Date();
+
+        const years = differenceInYears(now, date);
+        if(years > 0) {
+            return this.translate.get(years>1 ? 'readableDate.yearsAgo' : 'readableDate.yearAgo').toPromise()
+                .then(_ => { return years + ' ' + _; });
+        }
+
+        const months = differenceInMonths(now, date);
+        if(months > 0) {
+            return this.translate.get(months> 1 ? 'readableDate.monthsAgo' : 'readableDate.monthAgo').toPromise()
+                .then(_ => { return months + ' ' + _; });
+        }
+
+        const weeks = differenceInWeeks(now, date);
+        if(weeks > 0) {
+            return this.translate.get(weeks>1 ? 'readableDate.weeksAgo' : 'readableDate.weekAgo').toPromise()
+                .then(_ => { return weeks + ' ' + _; });
+        }
+
+        const days = differenceInDays(now, date);
+        if(days > 0) {
+            return this.translate.get(days>1 ? 'readableDate.daysAgo' : 'readableDate.dayAgo').toPromise()
+                .then(_ => { return days + ' ' + _; });
+        }
+
+        const hours = differenceInHours(now, date);
+        if(hours > 0) {
+            return this.translate.get(hours>1 ? 'readableDate.hoursAgo' : 'readableDate.hourAgo').toPromise()
+                .then(_ => { return hours + ' ' + _; });
+        }
+
+        const minutes = differenceInMinutes(now, date);
+        return this.translate.get(minutes>1 ? 'readableDate.minutesAgo' : 'readableDate.minuteAgo').toPromise()
+            .then(_ => { return minutes + ' ' + _; });
+    }
+
+}

src/app/home/pipes/string-to-date.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import {
+    parseISO,
+} from 'date-fns';
+
+
+@Pipe({
+  name: 'stringToDate'
+})
+export class StringToDatePipe implements PipeTransform {
+
+  transform(value: string, ...args: unknown[]): Date {
+    return parseISO(value);
+  }
+
+}

src/app/i18n/i18n.service.ts

@@ -13,8 +13,8 @@ export class I18nService {
     ) {
         translate.addLangs(this.languages);
         translate.setDefaultLang('en');
-        translate.use(this.browserLang.match(/zh|en/) ? this.browserLang : 'en');
-        //translate.use('en');
+        //translate.use(this.browserLang.match(/zh|en/) ? this.browserLang : 'en');
+        translate.use('en');
     }
 
     get browserLang () {