🔧 Add HTTP service to frontend

frontend/events/src/app/Event.ts

@@ -5,3 +5,10 @@ export interface Event {
   organizer: string;
   link: string;
 }
+
+export interface EventCreationRequest {
+  name: string;
+  date: Date;
+  organizer: string;
+  link: string;
+}

frontend/events/src/app/app.component.spec.ts

@@ -19,11 +19,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('events');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('events app is running!');
-  });
 });

frontend/events/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { AppComponent } from './app.component';
 import { CreateEventComponent } from './create-event/create-event.component';
 import { EventlistComponent } from './eventlist/eventlist.component';
+import { HttpClientModule } from '@angular/common/http';
 
 const appRoutes: Routes = [
   { path: '', component: EventlistComponent },
@@ -20,6 +21,7 @@ const appRoutes: Routes = [
       { enableTracing: true }, // <-- debugging purposes only
     ),
     FormsModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

frontend/events/src/app/create-event/create-event.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { EventCreationRequest } from '../Event';
+import { EventsService } from '../events.service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -13,13 +15,21 @@ export class CreateEventComponent implements OnInit {
   eventDate = '';
   eventTime = '';
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private service: EventsService) {}
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   ngOnInit(): void {}
 
   createNewEvent() {
-    //TODO: implement backend call / call to state management here
-    this.router.navigateByUrl('');
+    const event: EventCreationRequest = {
+      name: this.eventName,
+      organizer: this.eventOrganizer,
+      link: this.eventLink,
+      date: new Date(`${this.eventDate} ${this.eventTime}`),
+    };
+    this.service.create(event).subscribe(createdEvent => {
+      console.log(createdEvent);
+      this.router.navigateByUrl('');
+    });
   }
 }

frontend/events/src/app/eventlist/eventlist.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UPCOMING_EVENTS } from '../mock-events';
+import { EventsService } from '../events.service';
 
 @Component({
   selector: 'app-eventlist',
@@ -10,12 +11,20 @@ import { UPCOMING_EVENTS } from '../mock-events';
 export class EventlistComponent implements OnInit {
   upcomingEvents = UPCOMING_EVENTS;
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private service: EventsService) {}
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.loadEventsList();
+  }
 
   createNewEvent() {
     this.router.navigateByUrl('createEvent');
   }
+
+  loadEventsList() {
+    this.service.list().subscribe(events => {
+      this.upcomingEvents = events;
+    });
+  }
 }

frontend/events/src/app/events.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EventsService } from './events.service';
+
+describe('EventsService', () => {
+  let service: EventsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EventsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/events/src/app/events.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Event, EventCreationRequest } from './Event';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EventsService {
+  constructor(private http: HttpClient) {}
+
+  public create(event: EventCreationRequest): Observable<Event> {
+    return this.http.post<Event>('/api/events', event);
+  }
+
+  public list(): Observable<Event[]> {
+    return this.http.get<Event[]>('/api/events');
+  }
+}