docs: moving events to json with service

ngrx · Mar 13, 2019 · 63adf95 · 63adf95
1 parent 79ebec6
commit 63adf95
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 39 deletions.
diff --git a/projects/ngrx.io/content/marketing/events.html b/projects/ngrx.io/content/marketing/events.html
@@ -2,23 +2,5 @@
   <h1 class="banner-headline no-toc no-anchor">Events</h1>
 </header>
 <article>
-    <aio-event-list [events]="[
-    {name: 'NgColombia', url: 'http://www.ngcolombia.com', location: 'Medellín, Colombia', startDate: '09-06-2018', endDate: '09-07-2018'},
-    {name: 'DevFestATL', url: 'http://devfestatl.com', location: 'Atlanta, Georgia', endDate: '09-22-2018'},
-    {name: 'Framework Summit', url: 'http://frameworksummit.com', location: 'Park City, Utah', endDate: '09-22-2018'},
-    {name: 'DevFestATL', url: 'http://devfestatl.com', location: 'Atlanta, Georgia', startDate: '10-02-2018', endDate: '10-03-2018'},
-    {name: 'AngularMix - Use the discount code &quot;RYAN&quot; or &quot;ROBERTS&quot; 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: '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: '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: '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: '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: '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: 'NG-Rome', url: 'https://ngrome.io/', location: 'Rome, Italy', endDate: '10-07-2019'}
-    ]"></aio-event-list>
+    <aio-event-list></aio-event-list>
 </article>
diff --git a/projects/ngrx.io/content/marketing/events.json b/projects/ngrx.io/content/marketing/events.json
@@ -0,0 +1,59 @@
+[
+  {
+    "name": "NgColombia",
+    "url": "http://www.ngcolombia.com",
+    "location": "Medellín, Colombia",
+    "startDate": "09-06-2018",
+    "endDate": "09-07-2018"
+  },
+  {
+    "name": "DevFestATL",
+    "url": "http://devfestatl.com",
+    "location": "Atlanta, Georgia",
+    "endDate": "09-22-2018"
+  },
+  {
+    "name": "Framework Summit",
+    "url": "http://frameworksummit.com",
+    "location": "Park City, Utah",
+    "endDate": "09-22-2018"
+  },
+  {
+    "name": "DevFestATL",
+    "url": "http://devfestatl.com",
+    "location": "Atlanta, Georgia",
+    "startDate": "10-02-2018",
+    "endDate": "10-03-2018"
+  },
+  {
+    "name": "AngularMix - Use the discount code &quot;RYAN&quot; or &quot;ROBERTS&quot; 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": "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": "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": "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": "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": "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": "NG-Rome", "url": "https://ngrome.io/", "location": "Rome, Italy", "endDate": "10-07-2019"}
+  ]
diff --git a/projects/ngrx.io/src/app/custom-elements/events/event-list.component.ts b/projects/ngrx.io/src/app/custom-elements/events/event-list.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
-import { Event, DisplayEvent } from './event.model';
+import { Component } from '@angular/core';
+import { DisplayEvent } from './event.model';
+import { EventService } from './event.service';
 
 @Component({
   selector: `aio-event-list`,
@@ -41,25 +42,10 @@ import { Event, DisplayEvent } from './event.model';
 `
 })
 export class EventListComponent {
-  upcomingEvents: DisplayEvent[];
-  pastEvents: DisplayEvent[];
+  upcomingEvents: DisplayEvent[] = [];
+  pastEvents: DisplayEvent[] = [];
   currentDate = new Date();
 
-  @Input() set events(value: Event[]) {
-    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);
-  }
-
   /**
    * The date range string for the two given dates
    * '01-01-2019' until '01-01-2019' -> 'January 1, 2019'
@@ -89,4 +75,21 @@ export class EventListComponent {
       }
     }
   }
+
+  constructor(private eventService: EventService) {
+    this.eventService.events.subscribe(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);
+    });
+  }
 }
diff --git a/projects/ngrx.io/src/app/custom-elements/events/event-list.module.ts b/projects/ngrx.io/src/app/custom-elements/events/event-list.module.ts
@@ -2,11 +2,13 @@ import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { WithCustomElementComponent } from '../element-registry';
 import { EventListComponent } from './event-list.component';
+import { EventService } from './event.service';
 
 @NgModule({
   imports: [ CommonModule ],
   declarations: [ EventListComponent ],
-  entryComponents: [ EventListComponent ]
+  entryComponents: [ EventListComponent ],
+  providers: [ EventService ]
 })
 export class EventListModule implements WithCustomElementComponent {
   customElementComponent: Type<any> = EventListComponent;

diff --git a/projects/ngrx.io/src/app/custom-elements/events/event.service.ts b/projects/ngrx.io/src/app/custom-elements/events/event.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { ConnectableObservable, Observable } from 'rxjs';
+import { tap, publishLast } from 'rxjs/operators';
+
+import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+import { Event } from './event.model';
+
+const resourcesPath = CONTENT_URL_PREFIX + 'events.json';
+
+@Injectable()
+export class EventService {
+  events: Observable<Event[]>;
+
+  constructor(private http: HttpClient) {
+    this.events = this.getEvents();
+  }
+
+  private getEvents(): Observable<Event[]> {
+
+    const events = this.http.get<Event[]>(resourcesPath).pipe(
+      tap(event => console.log('service: ' + event)),
+      publishLast(),
+    );
+
+    (events as ConnectableObservable<Event[]>).connect();
+    return events;
+  };
+}