Adding current user's registration state to the registration list

src/RunnersMeet.Client/src/app/events/event-view/event-view.component.html

@@ -14,9 +14,9 @@
 
 <h1>Registrations</h1>
 <h3>Your registration</h3>
-<p-selectButton [options]="registrationStates" [(ngModel)]="currentState" (onChange)="updateRegistration($event)" optionLabel="label" optionValue="value"></p-selectButton>
+<p-selectButton [options]="registrationStates" [(ngModel)]="currentRegistration.status" (onChange)="updateRegistration($event)" optionLabel="label" optionValue="value"></p-selectButton>
 <h3>Other registrations</h3>
-<p-table [value]="registrations" styleClass="p-datatable-striped">
+<p-table [value]="(registrations | async) ?? []" styleClass="p-datatable-striped">
 	<ng-template pTemplate="header">
 		<tr>
 			<th>Name</th>

src/RunnersMeet.Client/src/app/events/event-view/event-view.component.ts

@@ -2,8 +2,9 @@ import { Component, Input } from '@angular/core';
 import { EventsApiService } from 'src/app/events-api.service';
 import { GroupEvent } from '../group-event';
 import { RegistrationState, RegistrationStateItems } from '../registration-state';
-import { combineLatest, take } from 'rxjs';
+import { Observable, Subject, combineLatest, map, take } from 'rxjs';
 import { PermissionService } from 'src/app/users/permission.service';
+import { Registration } from '../registration';
 
 interface RegistrationModel {
 	readonly name: string;
@@ -22,16 +23,28 @@ export class EventViewComponent {
 	public eventId: string = '';
 
 	public event: GroupEvent | null = null;
-	public registrations: Array<RegistrationModel> = [];
+	private readonly registrationsSubject = new Subject<Array<Registration>>();
+	public readonly registrations: Observable<Array<RegistrationModel>>;
 
 	public registrationStates = RegistrationStateItems;
 
-	public currentState = RegistrationState.Unknown;
+	public currentRegistration: Registration = new Registration();
 
 	public constructor(
 		private readonly permissionService: PermissionService,
 		private readonly eventsApi: EventsApiService
-	) { }
+	) {
+		this.registrations = this.registrationsSubject.pipe(map(registrations =>  {
+			return registrations
+				.filter(r => r.status !== RegistrationState.Unknown)
+				.map(r => ({
+					name: r.owner?.displayName ?? '',
+					yes: r.status === RegistrationState.Yes,
+					no: r.status === RegistrationState.No,
+					maybe: r.status === RegistrationState.Maybe,
+				}));
+			}));
+	}
 
 	public ngOnInit(): void {
 		this.eventsApi.getEvent(this.eventId).then(event => {
@@ -40,24 +53,16 @@ export class EventViewComponent {
 		combineLatest([this.permissionService.userProfile, this.eventsApi.getRegistrations(this.eventId)])
 			.pipe(take(1))
 			.subscribe(([userProfile, registrations]) => {
-				const currentRegistrationIndex = registrations.findIndex(r => r.owner?.userId === userProfile?.userId);
-
-				this.currentState = (currentRegistrationIndex >= 0 ? registrations.splice(currentRegistrationIndex, 1)[0] : null)?.status ?? RegistrationState.Unknown;
-				this.registrations = registrations
-					.filter(r => r.status !== RegistrationState.Unknown)
-					.map(r => ({
-						name: r.owner?.displayName ?? '',
-						yes: r.status === RegistrationState.Yes,
-						no: r.status === RegistrationState.No,
-						maybe: r.status === RegistrationState.Maybe,
-					}));
+				this.currentRegistration = registrations.find(r => r.owner?.userId === userProfile?.userId) ?? this.currentRegistration;
+				this.registrationsSubject.next(registrations);
 			});
 	}
 
 	public updateRegistration(evt: any): void {
 		if (this.event) {
-			console.log(evt, this.currentState);
-			this.eventsApi.register(this.event, this.currentState);
+			this.eventsApi.register(this.event, this.currentRegistration.status)
+				.then(() => this.eventsApi.getRegistrations(this.eventId))
+				.then(registrations => this.registrationsSubject.next(registrations));
 		}
 	}
 }