docs: refactor to use UTC YYYY-MM-DD format and moved date range function into a pipe

Author: ijz953

projects/ngrx.io/content/marketing/events.json

@@ -3,111 +3,113 @@
     "name": "NgColombia",
     "url": "http://www.ngcolombia.com",
     "location": "Medellín, Colombia",
-    "startDate": "09-06-2018",
-    "endDate": "09-07-2018"
+    "startDate": "2018-09-06",
+    "endDate": "2018-09-07"
   },
   {
     "name": "DevFestATL",
     "url": "http://devfestatl.com",
     "location": "Atlanta, Georgia",
-    "endDate": "09-22-2018"
+    "endDate": "2018-09-22"
   },
   {
     "name": "Framework Summit",
     "url": "http://frameworksummit.com",
     "location": "Park City, Utah",
-    "endDate": "09-22-2018"
+    "endDate": "2018-09-22"
   },
   {
     "name": "DevFestATL",
     "url": "http://devfestatl.com",
     "location": "Atlanta, Georgia",
-    "startDate": "10-02-2018",
-    "endDate": "10-03-2018"
+    "startDate": "2018-10-02",
+    "endDate": "2018-10-03"
   },
   {
     "name": "AngularMix",
     "url": "http://www.angularmix.com",
     "location": "Orlando, Florida",
-    "startDate": "10-10-2018",
-    "endDate": "10-12-2018"
+    "startDate": "2018-10-10",
+    "endDate": "2018-10-12"
   },
   {
     "name": "AngularConnect",
-    "url": "http://www.angularconnect.com",
+    "url": "https://www.angularconnect.com",
     "location": "Excel, London",
-    "startDate": "11-06-2018",
-    "endDate": "11-07-2018"
+    "startDate": "2018-11-06",
+    "endDate": "2018-11-07"
   },
   {
     "name": "ngAtlanta",
     "url": "http://ng-atl.org/",
     "location": "Atlanta, Georgia",
-    "startDate": "01-09-2019",
-    "endDate": "01-12-2019"
+    "startDate": "2019-01-09",
+    "endDate": "2019-01-12"
   },
   {
     "name": "ng-India",
     "url": "https://www.ng-ind.com",
     "location": "Gurgaon, India",
-    "endDate": "02-23-2019"
+    "endDate": "2019-02-23"
   },
   {
     "name": "Open Source 101",
     "url": "https://opensource101.com/",
     "location": "Columbia, South Carolina",
-    "endDate": "04-18-2019"
+    "endDate": "2019-04-18"
   },
   {
     "name": "NG-Conf",
     "url": "https://www.ng-conf.org",
     "location": "Salt Lake City, Utah",
-    "startDate": "05-01-2019", "endDate": "05-03-2019"},
+    "startDate": "2019-05-01",
+    "endDate": "2019-05-03"
+  },
   {
     "name": "ngVikings",
     "url": "https://ngvikings.org/",
     "location": "Copenhagen, Denmark",
-    "startDate": "05-26-2019",
-    "endDate": "05-28-2019"
+    "startDate": "2019-05-26",
+    "endDate": "2019-05-28"
   },
   {
     "name": "REFACTR.TECH",
     "url": "https://refactr.tech/",
     "location": "Atlanta, Georgia",
-    "startDate": "06-05-2019",
-    "endDate": "06-07-2019"
+    "startDate": "2019-06-05",
+    "endDate": "2019-06-07"
   },
   {
     "name": "AngularUP",
     "url": "https://angular-up.com/",
     "location": "Tel Aviv, Israel",
-    "endDate": "06-12-2019"
+    "endDate": "2019-06-12"
   },
   {
     "name": "NG-MY",
     "url": "https://ng-my.org/",
     "location": "Kuala Lumpur, Malaysia",
-    "startDate": "07-06-2019",
-    "endDate": "07-07-2019"
+    "startDate": "2019-07-06",
+    "endDate": "2019-07-07"
   },
   {
     "name": "ngDenver",
     "url": "http://angulardenver.com/",
     "location": "Denver, Colorado",
-    "startDate": "08-01-2019",
-    "endDate": "08-02-2019"
+    "startDate": "2019-08-01",
+    "endDate": "2019-08-02"
   },
   {
     "name": "AngularConnect",
     "url": "https://www.angularconnect.com/",
     "location": "London, United Kingdom",
-    "startDate": "09-19-2019",
-    "endDate": "09-20-2019"
+    "startDate": "2019-09-19",
+    "endDate": "2019-09-20"
   },
   {
     "name": "NG-Rome",
     "url": "https://ngrome.io/",
     "location": "Rome, Italy",
-    "endDate": "10-07-2019"
+    "endDate": "2019-10-07"
   }
 ]

projects/ngrx.io/src/app/custom-elements/events/event-date-range.pipe.spec.ts

@@ -0,0 +1,64 @@
+import { EventDateRangePipe } from './event-date-range.pipe';
+import { Event } from './event.model';
+
+describe('Pipe: Event Date Range', () => {
+  let pipe: EventDateRangePipe;
+
+  beforeEach(() => {
+    pipe = new EventDateRangePipe();
+  });
+
+  it('providing no startDate should format only the endDate in MM DD, YYYY', () => {
+    const event: Event = {
+      name: '',
+      url: '',
+      location: '',
+      endDate: new Date('2019-01-01')
+    };
+    expect(pipe.transform(event)).toBe('January 1, 2019');
+  });
+
+  it('providing the same startDate and endDate should format only one in MM DD, YYYY', () => {
+    const event: Event = {
+      name: '',
+      url: '',
+      location: '',
+      startDate: new Date('2019-01-01'),
+      endDate: new Date('2019-01-01')
+    };
+    expect(pipe.transform(event)).toBe('January 1, 2019');
+  });
+
+  it('providing different days in the same month and year should format in MM DD - DD, YYYY format', () => {
+    const event: Event = {
+      name: '',
+      url: '',
+      location: '',
+      startDate: new Date('2019-01-01'),
+      endDate: new Date('2019-01-02')
+    };
+    expect(pipe.transform(event)).toBe('January 1 - 2, 2019');
+  });
+
+  it('providing different days and months in the same year should format in MM DD - MM DD, YYYY format', () => {
+    const event: Event = {
+      name: '',
+      url: '',
+      location: '',
+      startDate: new Date('2019-01-01'),
+      endDate: new Date('2019-01-02')
+    };
+    expect(pipe.transform(event)).toBe('January 1 - 2, 2019');
+  });
+
+  it('providing different days, months, and years should format in MM DD, YYYY - MM DD, YYYY format', () => {
+    const event: Event = {
+      name: '',
+      url: '',
+      location: '',
+      startDate: new Date('2018-12-31'),
+      endDate: new Date('2019-01-01')
+    };
+    expect(pipe.transform(event)).toBe('December 31, 2018 - January 1, 2019');
+  });
+});

projects/ngrx.io/src/app/custom-elements/events/event-date-range.pipe.ts

@@ -0,0 +1,55 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Event } from './event.model';
+
+/**
+ * Transforms the startDate and endDate for a given event into a dange range string.
+ * undefined until '01-01-2019' -> 'January 1, 2019'
+ * '01-01-2019' until '01-01-2019' -> 'January 1, 2019'
+ * '01-01-2019' until '01-02-2019' -> 'January 1 - 2, 2019'
+ * '01-28-2019' until '02-01-2019' -> 'January 28 - February 1, 2019'
+ * '12-31-2018' until '01-01-2019' -> 'December 31, 2018 - January 1, 2019'
+ */
+@Pipe({name: 'eventDateRange'})
+export class EventDateRangePipe implements PipeTransform {
+  transform(event: Event): string {
+    const startDate = event.startDate;
+    const endDate = event.endDate;
+    if (!startDate || startDate.getTime() === endDate.getTime()) {
+      return getDateString(endDate);
+    } else {
+      if (getMonth(startDate) === getMonth(endDate) && getYear(startDate) === getYear(endDate)) {
+        return getMonth(startDate)
+          + ' ' + getDay(startDate) + ' - ' + getDay(endDate)
+          + ', ' + getYear(startDate);
+      } else if (getYear(startDate) === getYear(endDate)) {
+        return getMonth(startDate)
+          + ' ' + getDay(startDate)
+          + ' - ' + getMonth(endDate)
+          + ' ' + getDay(endDate)
+          + ', ' + getYear(startDate);
+      } else {
+        return getDateString(startDate)
+          + ' - ' + getDateString(endDate);
+      }
+    }
+  }
+}
+
+const getDay = (date: Date) => date.getUTCDate();
+const getMonth = (date: Date) => months[date.getUTCMonth()];
+const getYear = (date: Date) => date.getUTCFullYear();
+const getDateString = (date: Date) => getMonth(date) + ' ' + getDay(date) + ', ' + getYear(date);
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+];

projects/ngrx.io/src/app/custom-elements/events/event-list.component.spec.ts

@@ -3,14 +3,14 @@ import { EventListComponent } from './event-list.component';
 import { of } from 'rxjs';
 import { EventService } from './event.service';
 import { Event } from './event.model';
+import { EventDateRangePipe } from './event-date-range.pipe';
 
 const mockUpcomingEvents: Event[] = [
   {
     name: 'NG-Rome',
     url: 'https://ngrome.io/',
     location: 'Rome, Italy',
-    endDate: new Date('10-07-2019'),
-    dateRangeString: 'October 7, 2019'
+    endDate: new Date('2019-10-07')
   }
 ];
 
@@ -19,8 +19,7 @@ const mockPastEvents: Event[] = [
     name: 'DevFestATL',
     url: 'http://devfestatl.com',
     location: 'Atlanta, Georgia',
-    endDate: new Date('09-22-2018'),
-    dateRangeString: 'September 22, 2018'
+    endDate: new Date('2018-09-22')
   }
 ];
 
@@ -36,7 +35,7 @@ describe('Event List Component', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ EventListComponent ],
+      declarations: [ EventListComponent, EventDateRangePipe ],
       providers: [{ provide: EventService, useClass: TestEventService }]
     });
 

projects/ngrx.io/src/app/custom-elements/events/event-list.component.ts

@@ -19,7 +19,7 @@ import { Observable } from 'rxjs';
         <tr *ngFor="let upcomingEvent of upcomingEvents$ | async">
           <th><a [href]="upcomingEvent.url" [title]="upcomingEvent.name">{{upcomingEvent.name}}</a></th>
           <td>{{upcomingEvent.location}}</td>
-          <td>{{upcomingEvent.dateRangeString}}</td>
+          <td>{{upcomingEvent | eventDateRange}}</td>
         </tr>
       </tbody>
     </table>
@@ -36,7 +36,7 @@ import { Observable } from 'rxjs';
         <tr *ngFor="let pastEvent of pastEvents$ | async">
           <th><a [href]="pastEvent.url" [title]="pastEvent.name">{{pastEvent.name}}</a></th>
           <td>{{pastEvent.location}}</td>
-          <td>{{pastEvent.dateRangeString}}</td>
+          <td>{{pastEvent | eventDateRange}}</td>
         </tr>
       </tbody>
     </table>

projects/ngrx.io/src/app/custom-elements/events/event-list.module.ts

@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 import { WithCustomElementComponent } from '../element-registry';
 import { EventListComponent } from './event-list.component';
 import { EventService } from './event.service';
+import { EventDateRangePipe } from './event-date-range.pipe';
 
 @NgModule({
   imports: [ CommonModule ],
-  declarations: [ EventListComponent ],
+  declarations: [ EventListComponent, EventDateRangePipe ],
   entryComponents: [ EventListComponent ],
   providers: [ EventService ]
 })

projects/ngrx.io/src/app/custom-elements/events/event.model.ts

@@ -12,5 +12,4 @@ export interface Event {
   location: string;
   startDate?: Date;
   endDate: Date;
-  dateRangeString: string;
 }