docs: update events page with upcoming events, automatically move past events (#1617)

Closes #1615

Author: John Crowson

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

@@ -2,73 +2,5 @@
   <h1 class="banner-headline no-toc no-anchor">Events</h1>
 </header>
 <article>
-<p>Upcoming Events presenting about NgRx:</p>
- <table class="is-full-width">
-   <thead>
-   <tr>
-     <th>Event</th>
-     <th>Location</th>
-     <th>Date</th>
-   </tr>
-   </thead>
-   <tbody>
-   <tr>
-     <th><a href="http://ng-atl.org/" title="ngAtlanta">ngAtlanta</a></th>
-     <td>Atlanta, Georgia</td>
-     <td>January 9 - 12, 2019</td>
-   </tr>
-   <tr>
-     <th><a href="https://www.ng-ind.com" title="ng-India">ng-India</a></th>
-     <td>Gurgaon, India</td>
-     <td>February 23, 2019</td>
-   </tr>
-   <tr>
-     <th><a href="https://www.ng-conf.org" title="ng-conf">ng-conf</a></th>
-     <td>Salt Lake City, Utah</td>
-     <td>May 1 - 3, 2019</td>
-   </tr>
-   </tbody>
- </table>
-<p>Past Events:</p>
-  <table class="is-full-width">
-    <thead>
-    <tr>
-      <th>Event</th>
-      <th>Location</th>
-      <th>Date</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-      <th><a href="http://www.ngcolombia.com" title="NgColombia">NgColombia</a></th>
-      <td>Medellín, Colombia</td>
-      <td>September 6 - 7th, 2018</td>
-    </tr>
-    <tr>
-      <th><a href="http://devfestatl.com" title="DevFestATL">DevFestATL</a></th>
-      <td>Atlanta, GA</td>
-      <td>September 22nd, 2018</td>
-    </tr>
-    <tr>
-      <th><a href="http://frameworksummit.com" title="Framework Summit">Framework Summit</a></th>
-      <td>Park City, UT</td>
-      <td>September 22nd, 2018</td>
-    </tr>
-    <tr>
-      <th><a href="http://devfestatl.com" title="DevFestATL">DevFestATL</a></th>
-      <td>Atlanta, GA</td>
-      <td>October 2 - 3rd, 2018</td>
-    </tr>
-    <tr>
-      <th><a href="http://www.angularmix.com" title="AngularMix">AngularMix - Use the discount code "RYAN" or "ROBERTS" to receive $50 off your registration!</a></th>
-      <td>Orlando, FL</td>
-      <td>October 10 - 12th, 2018</td>
-    </tr>
-    <tr>
-      <th><a href="http://www.angularconnect.com" title="AngularConnect">AngularConnect</a></th>
-      <td>Excel, London</td>
-      <td>November 6 - 7th, 2018</td>
-    </tr>
-    </tbody>
-  </table>
+    <aio-event-list></aio-event-list>
 </article>

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

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

projects/ngrx.io/src/app/custom-elements/element-registry.ts

@@ -17,6 +17,10 @@ export const ELEMENT_MODULE_PATHS_AS_ROUTES = [
     selector: 'aio-contributor-list',
     loadChildren: './contributor/contributor-list.module#ContributorListModule',
   },
+  {
+    selector: 'aio-event-list',
+    loadChildren: './events/event-list.module#EventListModule',
+  },
   {
     selector: 'aio-file-not-found-search',
     loadChildren:

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

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+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('2019-10-07')
+  }
+];
+
+const mockPastEvents: Event[] = [
+  {
+    name: 'DevFestATL',
+    url: 'http://devfestatl.com',
+    location: 'Atlanta, Georgia',
+    endDate: new Date('2018-09-22')
+  }
+];
+
+class TestEventService {
+  upcomingEvents$ = of(mockUpcomingEvents);
+  pastEvents$ = of(mockPastEvents);
+}
+
+describe('Event List Component', () => {
+
+  let fixture: ComponentFixture<EventListComponent>;
+  let component: EventListComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventListComponent, EventDateRangePipe ],
+      providers: [{ provide: EventService, useClass: TestEventService }]
+    });
+
+    fixture = TestBed.createComponent(EventListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the upcomingEvents', () => {
+    component.upcomingEvents$.subscribe(events => expect(events).toEqual(mockUpcomingEvents));
+  });
+
+  it('should set the pastEvents', () => {
+    component.pastEvents$.subscribe(events => expect(events).toEqual(mockPastEvents));
+  });
+});