Simple tracks API dummy service

src/RunnersMeet.Client/src/app/app.module.ts

@@ -7,6 +7,8 @@ import { AppComponent } from './app.component';
 import { environment } from '../env/environment';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
+import { TracksApiService } from './tracks-api.service';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
 	declarations: [
@@ -17,6 +19,7 @@ import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 	imports: [
 		BrowserModule,
 		AppRoutingModule,
+		HttpClientModule,
 		AuthModule.forRoot({
 			...environment.auth0,
 			httpInterceptor: {
@@ -24,7 +27,9 @@ import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 			},
 		})
 	],
-	providers: [],
+	providers: [
+		TracksApiService
+	],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.html

@@ -1 +1,4 @@
-<p>tracks-page works!</p>
+Tracks:
+<ul>
+	<li *ngFor="let track of tracks | async"></li>
+</ul>

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TracksApiService } from 'src/app/tracks-api.service';
 
 @Component({
 	selector: 'app-tracks-page',
@@ -6,5 +7,11 @@ import { Component } from '@angular/core';
 	styleUrls: ['./tracks-page.component.scss']
 })
 export class TracksPageComponent {
+	public tracks: Promise<object[]>;
 
+	public constructor(
+		private readonly tracksApi: TracksApiService
+	) {
+		this.tracks = this.tracksApi.getTracks();
+	}
 }

src/RunnersMeet.Client/src/app/tracks-api.service.spec.ts

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

src/RunnersMeet.Client/src/app/tracks-api.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
+import { environment } from 'src/env/environment';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class TracksApiService {
+
+	public constructor(
+		private readonly http: HttpClient
+	) { }
+
+	public getTracks(): Promise<object[]> {
+		return lastValueFrom(this.http.get<object[]>(`${environment.apiUri}/api/tracks`));
+	}
+}

src/RunnersMeet.Client/src/env/environment.ts

@@ -6,6 +6,7 @@ import {authConfig} from '../../authConfig';
 
 export const environment = {
 	production: false,
+	apiUri: authConfig.apiUri,
 	auth0: {
 		domain: authConfig.domain,
 		clientId: authConfig.clientId,