docs: move date range and upcoming vs past logic into event service

Author: ijz953

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

@@ -26,34 +26,88 @@
     "endDate": "10-03-2018"
   },
   {
-    "name": "AngularMix - Use the discount code "RYAN" or "ROBERTS" to receive $50 off your registration!",
+    "name": "AngularMix - Use the discount code \"RYAN\" or \"ROBERTS\" to receive $50 off your registration!",
     "url": "http://www.angularmix.com",
     "location": "Orlando, Florida",
     "startDate": "10-10-2018",
     "endDate": "10-12-2018"
   },
   {
-    "name": "AngularConnect", "url": "http://www.angularconnect.com", "location": "Excel, London", "startDate": "11-06-2018", "endDate": "11-07-2018"},
+    "name": "AngularConnect",
+    "url": "http://www.angularconnect.com",
+    "location": "Excel, London",
+    "startDate": "11-06-2018",
+    "endDate": "11-07-2018"
+  },
   {
-    "name": "ngAtlanta", "url": "http://ng-atl.org/", "location": "Atlanta, Georgia", "startDate": "01-09-2019", "endDate": "01-12-2019"},
+    "name": "ngAtlanta",
+    "url": "http://ng-atl.org/",
+    "location": "Atlanta, Georgia",
+    "startDate": "01-09-2019",
+    "endDate": "01-12-2019"
+  },
   {
-    "name": "ng-India", "url": "https://www.ng-ind.com", "location": "Gurgaon, India", "endDate": "02-23-2019"},
+    "name": "ng-India",
+    "url": "https://www.ng-ind.com",
+    "location": "Gurgaon, India",
+    "endDate": "02-23-2019"
+  },
   {
-    "name": "Open Source 101", "url": "https://opensource101.com/", "location": "Columbia, South Carolina", "endDate": "04-18-2019"},
+    "name": "Open Source 101",
+    "url": "https://opensource101.com/",
+    "location": "Columbia, South Carolina",
+    "endDate": "04-18-2019"
+  },
   {
-    "name": "NG-Conf", "url": "https://www.ng-conf.org", "location": "Salt Lake City, Utah", "startDate": "05-01-2019", "endDate": "05-03-2019"},
+    "name": "NG-Conf",
+    "url": "https://www.ng-conf.org",
+    "location": "Salt Lake City, Utah",
+    "startDate": "05-01-2019", "endDate": "05-03-2019"},
   {
-    "name": "ngVikings", "url": "https://ngvikings.org/", "location": "Copenhagen, Denmark", "startDate": "05-26-2019", "endDate": "05-28-2019"},
+    "name": "ngVikings",
+    "url": "https://ngvikings.org/",
+    "location": "Copenhagen, Denmark",
+    "startDate": "05-26-2019",
+    "endDate": "05-28-2019"
+  },
   {
-    "name": "REFACTR.TECH", "url": "https://refactr.tech/", "location": "Atlanta, Georgia", "startDate": "06-05-2019", "endDate": "06-07-2019"},
+    "name": "REFACTR.TECH",
+    "url": "https://refactr.tech/",
+    "location": "Atlanta, Georgia",
+    "startDate": "06-05-2019",
+    "endDate": "06-07-2019"
+  },
   {
-    "name": "AngularUP", "url": "https://angular-up.com/", "location": "Tel Aviv, Israel", "endDate": "06-12-2019"},
+    "name": "AngularUP",
+    "url": "https://angular-up.com/",
+    "location": "Tel Aviv, Israel",
+    "endDate": "06-12-2019"
+  },
   {
-    "name": "NG-MY", "url": "https://ng-my.org/", "location": "Kuala Lumpur, Malaysia", "startDate": "07-06-2019", "endDate": "07-07-2019"},
+    "name": "NG-MY",
+    "url": "https://ng-my.org/",
+    "location": "Kuala Lumpur, Malaysia",
+    "startDate": "07-06-2019",
+    "endDate": "07-07-2019"
+  },
   {
-    "name": "ngDenver", "url": "http://angulardenver.com/", "location": "Denver, Colorado", "startDate": "08-01-2019", "endDate": "08-02-2019"},
+    "name": "ngDenver",
+    "url": "http://angulardenver.com/",
+    "location": "Denver, Colorado",
+    "startDate": "08-01-2019",
+    "endDate": "08-02-2019"
+  },
   {
-    "name": "AngularConnect", "url": "https://www.angularconnect.com/", "location": "London, United Kingdom", "startDate": "09-19-2019", "endDate": "09-20-2019"},
+    "name": "AngularConnect",
+    "url": "https://www.angularconnect.com/",
+    "location": "London, United Kingdom",
+    "startDate": "09-19-2019",
+    "endDate": "09-20-2019"
+  },
   {
-    "name": "NG-Rome", "url": "https://ngrome.io/", "location": "Rome, Italy", "endDate": "10-07-2019"}
-  ]
+    "name": "NG-Rome",
+    "url": "https://ngrome.io/",
+    "location": "Rome, Italy",
+    "endDate": "10-07-2019"
+  }
+]

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

@@ -1,6 +1,6 @@
 import { ReflectiveInjector } from '@angular/core';
 import { EventListComponent } from './event-list.component';
-import { Event } from './event.model';
+import { EventResponse } from './event.model';
 
 // Testing the component class behaviors, independent of its template
 // Let e2e tests verify how it displays.
@@ -18,7 +18,7 @@ describe('EventListComponent', () => {
   it('should put each event into the correct bucket and correctly format the date range string', () => {
     component = getComponent();
     component.currentDate = new Date('01-02-2019');
-    const mockEvents: Event[] = [
+    const mockEvents: EventResponse[] = [
       {
         name: 'conf1',
         url: '',

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import { DisplayEvent } from './event.model';
+import { Event } from './event.model';
 import { EventService } from './event.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: `aio-event-list`,
@@ -15,7 +16,7 @@ import { EventService } from './event.service';
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let upcomingEvent of upcomingEvents">
+        <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>
@@ -32,7 +33,7 @@ import { EventService } from './event.service';
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let pastEvent of pastEvents">
+        <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>
@@ -42,56 +43,8 @@ import { EventService } from './event.service';
 `
 })
 export class EventListComponent {
-  upcomingEvents: DisplayEvent[] = [];
-  pastEvents: DisplayEvent[] = [];
-  currentDate = new Date();
+  upcomingEvents$: Observable<Event[]> = this.eventService.upcomingEvents;
+  pastEvents$: Observable<Event[]> = this.eventService.pastEvents;
 
-  /**
-   * The date range string for the two given dates
-   * '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'
-   * @param startDate
-   * @param endDate
-   */
-  private static getDateRange(startDate: Date | undefined, endDate: Date): string {
-    if (!startDate || startDate.getTime() === endDate.getTime()) {
-      return endDate.toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric' });
-    } else {
-      if (startDate.getMonth() === endDate.getMonth()) {
-        return startDate.toLocaleString('en-us', { month: 'long' })
-          + ' ' + startDate.getUTCDate() + ' - ' + endDate.getUTCDate()
-          + ', ' + startDate.getUTCFullYear();
-      } else if (startDate.getUTCFullYear() === endDate.getUTCFullYear()) {
-        return startDate.toLocaleString('en-us', { month: 'long' })
-          + ' ' + startDate.getUTCDate()
-          + ' - ' + endDate.toLocaleString('en-us', { month: 'long' })
-          + ' ' + endDate.getUTCDate()
-          + ', ' + startDate.getUTCFullYear();
-      } else {
-        return startDate.toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric' })
-          + ' - ' + endDate.toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric' });
-      }
-    }
-  }
-
-  constructor(private eventService: EventService) {
-    console.log('hello2');
-    this.eventService.events.subscribe(value => {
-      console.log('hello3' + value);
-      const displayEvents: DisplayEvent[] = value.map(event => {
-        const startDate = event.startDate ? new Date(event.startDate) : undefined;
-        const endDate = new Date(event.endDate);
-        return {
-          ...event,
-          startDate,
-          endDate,
-          dateRangeString: EventListComponent.getDateRange(startDate, endDate)
-        };
-      });
-      this.upcomingEvents = displayEvents.filter(event => event.endDate >= this.currentDate);
-      this.pastEvents = displayEvents.filter(event => event.endDate < this.currentDate);
-    });
-  }
+  constructor(private eventService: EventService) { }
 }

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

@@ -1,12 +1,12 @@
-export interface Event {
+export interface EventResponse {
   name: string;
   url: string;
   location: string;
   startDate?: string;
   endDate: string;
 }
 
-export interface DisplayEvent {
+export interface Event {
   name: string;
   url: string;
   location: string;

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

@@ -0,0 +1,118 @@
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { EventService } from './event.service';
+import { Event, EventResponse } from './event.model';
+
+describe('EventService', () => {
+  let injector: Injector;
+  let eventService: EventService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [EventService],
+    });
+
+    eventService = injector.get<EventService>(EventService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('should make a single connection to the server', () => {
+    const req = httpMock.expectOne({});
+    expect(req.request.url).toBe('generated/events.json');
+  });
+
+  describe('#events', () => {
+    let events: Event[];
+    let testData: EventResponse[];
+
+    beforeEach(() => {
+      testData = getTestEventResponse();
+      httpMock.expectOne({}).flush(testData);
+      eventService.upcomingEvents.subscribe(results => (events = results));
+      eventService.pastEvents.subscribe(results => (events = results));
+    });
+
+    it('upcomingEvents observable should complete', () => {
+      let completed = false;
+      eventService.upcomingEvents.subscribe(
+        undefined,
+        undefined,
+        () => (completed = true)
+      );
+      expect(completed).toBe(true, 'observable completed');
+    });
+
+    it('pastEvents observable should complete', () => {
+      let completed = false;
+      eventService.pastEvents.subscribe(
+        undefined,
+        undefined,
+        () => (completed = true)
+      );
+      expect(completed).toBe(true, 'observable completed');
+    });
+
+    // it('should reshape the contributor json to expected result', () => {
+    //   const groupNames = contribs.map(g => g.name).join(',');
+    //   expect(groupNames).toEqual('Angular,GDE');
+    // });
+
+    // it('should have expected "GDE" contribs in order', () => {
+    //   const gde = contribs[1];
+    //   const actualAngularNames = gde.contributors.map(l => l.name).join(',');
+    //   const expectedAngularNames = [testData.jeffcross, testData.kapunahelewong]
+    //     .map(l => l.name)
+    //     .join(',');
+    //   expect(actualAngularNames).toEqual(expectedAngularNames);
+    // });
+  });
+
+  it('should do WHAT(?) if the request fails');
+});
+
+function getTestEventResponse(): EventResponse[] {
+  return [
+    {
+      name: 'conf1',
+      url: '',
+      location: '',
+      startDate: '06-28-2018',
+      endDate: '07-01-2018'
+    },
+    {
+      name: 'conf2',
+      url: '',
+      location: '',
+      startDate: '12-25-2018',
+      endDate: '01-01-2019'
+    },
+    {
+      name: 'conf3',
+      url: '',
+      location: '',
+      startDate: '01-01-2019',
+      endDate: '01-03-2019'
+    },
+    {
+      name: 'conf4',
+      url: '',
+      location: '',
+      endDate: '04-01-2019'
+    },
+    {
+      name: 'conf5',
+      url: '',
+      location: '',
+      startDate: '04-02-2019',
+      endDate: '04-02-2019'
+    },
+  ];
+}