Add relative date display (#57)

* Refactor into date-utils

Author: derme302

src/app/feed/feed.page.html

@@ -88,7 +88,7 @@
                     }
                     <ion-card-header>
                       <ion-card-subtitle>
-                        {{entry.source}} | {{formatDate(entry.isoDate, settingsService.getSettings().locale)}}
+                        {{entry.source}} | {{formatDateRelative(entry.isoDate, settingsService.getSettings().locale)}}
                       </ion-card-subtitle>
                       <ion-card-title>
                         <!---ToDo: We override the background as the colour is slightly different on iOS-->

src/app/feed/feed.page.ts

@@ -30,6 +30,7 @@ import { PlatformService } from '../services/platform.service';
 import { SettingsService } from '../services/settings.service';
 import { SourcesService } from '../services/sources.service';
 import { SettingsComponent } from '../settings/settings.component';
+import { formatDateAsDay, formatDateAsLong, formatDateRelative } from '../lib/date-utils';
 
 @Component({
   selector: 'app-feed',
@@ -51,6 +52,10 @@ export class FeedPage {
   public filter: string = '';
   public currentScrollOffset: number = 0;
 
+  public formatDateAsDay = formatDateAsDay;
+  public formatDateAsLong = formatDateAsLong;
+  public formatDateRelative = formatDateRelative;
+
   constructor(public sourcesService: SourcesService, public platformService: PlatformService, 
               public bookmarkService: BookmarkService, public feedService: FeedService,
               private modalController: ModalController, public elementRef: ElementRef,
@@ -59,36 +64,6 @@ export class FeedPage {
       chevronUpOutline });
   }
 
-  public formatDate(dateStr: string | number, locale: string) {
-    const date = new Date(dateStr);
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric'
-    };
-    return date.toLocaleDateString(locale, dateOptions);        
-  }
-
-  public formatDateAsDay(dateStr: string | number, locale: string) {
-    const date = new Date(dateStr);
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short'
-    };
-    return date.toLocaleDateString(locale, dateOptions);     
-  }
-
-  public formatDateAsLong(dateStr: string | number, locale: string) {
-    const date = new Date(dateStr);
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      hour: 'numeric',
-      minute: 'numeric',
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric'
-    };
-    return date.toLocaleDateString(locale, dateOptions);        
-  }
-
   public scrollToTop() {
     this.mainFeed.scrollToTop(400);
   }

src/app/lib/date-utils.ts

@@ -0,0 +1,52 @@
+// src/app/lib/date-utils.ts
+// Utility functions for date formatting and display
+
+export function formatDate(dateStr: string | number, locale: string): string {
+  const date = new Date(dateStr);
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  };
+  return date.toLocaleDateString(locale, dateOptions);
+}
+
+export function formatDateAsDay(dateStr: string | number, locale: string): string {
+  const date = new Date(dateStr);
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    weekday: 'short'
+  };
+  return date.toLocaleDateString(locale, dateOptions);
+}
+
+export function formatDateAsLong(dateStr: string | number, locale: string): string {
+  const date = new Date(dateStr);
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric'
+  };
+  return date.toLocaleDateString(locale, dateOptions);
+}
+
+export function formatDateRelative(dateStr: string | number, locale: string): string {
+  const date = new Date(dateStr);
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+
+  // Remove time for comparison
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const yesterdayOnly = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
+
+  if (dateOnly.getTime() === todayOnly.getTime()) {
+    return 'Today';
+  } else if (dateOnly.getTime() === yesterdayOnly.getTime()) {
+    return 'Yesterday';
+  } else {
+    return formatDate(dateStr, locale);
+  }
+}

src/app/saved/saved.page.html

@@ -20,7 +20,7 @@
         <ion-card [button]="true" (click)="platformService.openUrlInPlatformBrowser(entry.link)">
           <ion-card-header>
             <ion-card-subtitle>
-              {{entry.source}} | {{formatDate(entry.pubDate, "en-AU")}}
+              {{entry.source}} | {{formatDateRelative(entry.pubDate, "en-AU")}}
             </ion-card-subtitle>
             <ion-card-title>
               <ion-item class="ion-no-padding">

src/app/saved/saved.page.ts

@@ -7,6 +7,7 @@ import { addIcons } from 'ionicons';
 import { bookmark } from 'ionicons/icons';
 import { BookmarkService } from '../services/bookmark.service';
 import { PlatformService } from '../services/platform.service';
+import { formatDateRelative } from '../lib/date-utils';
 
 @Component({
   selector: 'app-saved',
@@ -17,21 +18,12 @@ import { PlatformService } from '../services/platform.service';
     IonCardSubtitle, IonCardTitle, IonButton, IonLabel, IonList, IonIcon, IonItem],
 })
 export class SavedPage {
+  public formatDateRelative = formatDateRelative;
+
   constructor(public bookmarks: BookmarkService, public platformService: PlatformService) {
     addIcons({ bookmark });
   }
 
-  public formatDate(dateStr: string, locale: string)
-  {
-    const date = new Date(dateStr);
-    const dateOptions: Intl.DateTimeFormatOptions = {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric'
-    };
-    return date.toLocaleDateString(locale, dateOptions);        
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public removeBookmark(event: any, entry: any) {
     this.bookmarks.removeEntry(entry);