fix ex2

itenium-socks/package.json

@@ -20,6 +20,7 @@
     "@angular/router": "^18.0.0",
     "@fortawesome/angular-fontawesome": "^0.15.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "date-fns": "^3.6.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

itenium-socks/src/app/pipes/time-ago.pipe.spec.ts

@@ -0,0 +1,59 @@
+import { TimeAgoPipe } from './time-ago.pipe';
+
+describe('TimeAgoPipe', () => {
+  let pipe: TimeAgoPipe;
+
+  beforeEach(() => {
+    pipe = new TimeAgoPipe();
+  });
+
+  it('should return "Just now" for a date less than 30 seconds ago', () => {
+    const date = new Date(Date.now() - 25 * 1000); // 25 seconds ago
+    expect(pipe.transform(date)).toBe('less than a minute ago');
+  });
+
+  it('should return 1 minute for a date just less than 1 minute ago', () => {
+    const date = new Date(Date.now() - 55 * 1000); // 55 seconds ago
+    expect(pipe.transform(date)).toBe('1 minute ago');
+  });
+
+  it('should return "44 minutes ago" for a date less than 1 hour ago', () => {
+    const date = new Date(Date.now() - 44 * 60 * 1000); // 44 minutes ago
+    expect(pipe.transform(date)).toBe('44 minutes ago');
+  });
+
+  it('should return "about 1 hour ago" for a date less than 2 hours ago', () => {
+    const date = new Date(Date.now() - 61 * 60 * 1000); // 61 minutes ago
+    expect(pipe.transform(date)).toBe('about 1 hour ago');
+  });
+
+  it('should return "about 23 hours ago" for a date less than 1 day ago', () => {
+    const date = new Date(Date.now() - 23 * 60 * 60 * 1000); // 23 hours ago
+    expect(pipe.transform(date)).toBe('about 23 hours ago');
+  });
+
+  it('should return "1 day ago" for a date less than 2 days ago', () => {
+    const date = new Date(Date.now() - 25 * 60 * 60 * 1000); // 25 hours ago
+    expect(pipe.transform(date)).toBe('1 day ago');
+  });
+
+  it('should return "30 days ago" for a date less than 1 month ago', () => {
+    const date = new Date(Date.now() - 30 * 24 * 60 * 60 * 999); // 30 days ago
+    expect(pipe.transform(date)).toBe('30 days ago');
+  });
+
+  it('should return "1 month ago" for a date less than 2 months ago', () => {
+    const date = new Date(Date.now() - 44 * 24 * 60 * 60 * 1000); // 44 days ago
+    expect(pipe.transform(date)).toBe('about 1 month ago');
+  });
+
+  it('should return "11 months ago" for a date less than 1 year ago', () => {
+    const date = new Date(Date.now() - 11 * 30 * 24 * 60 * 60 * 1000); // 11 months ago
+    expect(pipe.transform(date)).toBe('11 months ago');
+  });
+
+  it('should return "1 year ago" for a date less than 2 years ago', () => {
+    const date = new Date(Date.now() - 13 * 30 * 24 * 60 * 60 * 1000); // 13 months ago
+    expect(pipe.transform(date)).toBe('about 1 year ago');
+  });
+});

itenium-socks/src/app/pipes/time-ago.pipe.ts

@@ -0,0 +1,37 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { formatDistance } from 'date-fns';
+
+@Pipe({
+  name: 'timeAgo',
+  standalone: true
+})
+export class TimeAgoPipe implements PipeTransform {
+  // rules for date-fns
+  // 0 ... 30 secs	-> less than a minute
+  // 30 secs ... 1 min 30 secs ->	1 minute
+  // 1 min 30 secs ... 44 mins 30 secs	-> [2..44] minutes
+  // 44 mins ... 30 secs ... 89 mins 30 secs	-> about 1 hour
+  // 89 mins 30 secs ... 23 hrs 59 mins 30 secs	about -> [2..24] hours
+  // 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs	-> 1 day
+  // 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs	-> [2..30] days
+  // 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs	-> about 1 month
+  // 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs	-> about 2 months
+  // 59 days 23 hrs 59 mins 30 secs ... 1 yr	-> [2..12] months
+  // 1 yr ... 1 yr 3 months	-> about 1 year
+  // 1 yr 3 months ... 1 yr 9 month s	-> over 1 year
+  // 1 yr 9 months ... 2 yrs	-> almost 2 years
+  // N yrs ... N yrs 3 months	-> about N years
+  // N yrs 3 months ... N yrs 9 months	-> over N years
+  // N yrs 9 months ... N+1 yrs	-> almost N+1 years
+
+  transform(value: Date): string {
+    if (!value) {
+      return '';
+    }
+
+    const now = new Date();
+    const date = new Date(value);
+
+    return formatDistance(date, now, { addSuffix: true });
+  }
+}

itenium-socks/src/app/socks/sock-reviews.component.html

@@ -17,7 +17,7 @@ <h5>
                   {{ review.socksId }}
                   <i *ngFor="let _ of [].constructor(review.rating)" class="fa fa-star" style="color: gold"></i>
                 </h5>
-                <h6>On {{ review.added }} by {{ review.email }}</h6>
+                <h6>{{ review.added | timeAgo}} by {{ review.email }}</h6>
               </div>
               <i class="fa fa-quote-left" aria-hidden="true"></i>
             </div>

itenium-socks/src/app/socks/sock-reviews.component.ts

@@ -3,11 +3,12 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { SocksService } from './socks.service';
 import { Review } from './sock.model';
+import { TimeAgoPipe } from '../pipes/time-ago.pipe';
 
 @Component({
   selector: 'app-sock-reviews',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [NgFor, AsyncPipe, TimeAgoPipe],
   templateUrl: './sock-reviews.component.html'
 })
 export class SockReviewsComponent {