Create dedicated service class for starting point

src/app/views/starting-point/starting-point.service.ts

@@ -0,0 +1,24 @@
+import { inject, Injectable } from '@angular/core';
+import { AppStateStore, CurrentView } from '../../app.state';
+import { AfterHighSchool, Gender } from './starting-point.state';
+
+@Injectable()
+export class StartingPointService {
+	private readonly globalState = inject(AppStateStore);
+
+	constructor() {}
+
+	onSubmit(name: string, gender: Gender, afterHighSchool: AfterHighSchool) {
+		this.globalState.updateStartingPointState({ name, gender, afterHighSchool });
+
+		switch (afterHighSchool) {
+			case AfterHighSchool.College:
+				this.globalState.updateCurrentView(CurrentView.CollegeSelection);
+				break;
+
+			case AfterHighSchool.Workforce:
+				this.globalState.updateCurrentView(CurrentView.FirstJobHighSchoolDiploma);
+				break;
+		}
+	}
+}

src/app/views/starting-point/starting-point.ts

@@ -4,6 +4,8 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { StartingPointState, StartingPointStateStore } from './starting-point.state';
 import { AppStateStore, CurrentView } from '../../app.state';
 import { getState } from '@ngrx/signals';
+import { StartingPointService } from './starting-point.service';
+import { tap } from 'rxjs';
 
 export interface StartingPointForm {
 	name: string;
@@ -29,12 +31,11 @@ export enum AfterHighSchool {
 	styleUrl: './starting-point.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ReactiveFormsModule],
-	providers: [StartingPointStateStore],
+	providers: [StartingPointStateStore, StartingPointService],
 })
 export class StartingPoint implements OnInit {
-	private readonly globalState = inject(AppStateStore);
+	private readonly service = inject(StartingPointService);
 	private readonly state = inject(StartingPointStateStore);
-	readonly name = this.state.name;
 
 	private readonly fb = inject(FormBuilder);
 	readonly form = this.fb.group({
@@ -72,23 +73,15 @@ export class StartingPoint implements OnInit {
 				this.state.updateState({ name, gender, afterHighSchool } as Partial<StartingPointState>)
 			);
 
-		this.form.statusChanges.pipe(takeUntilDestroyed()).subscribe(status => this.state.updateFormStatus(status));
+		this.form.statusChanges
+			.pipe(takeUntilDestroyed(), tap(console.log))
+			.subscribe(status => this.state.updateFormStatus(status));
 	}
 
 	ngOnInit(): void {}
 
 	onSubmit() {
-		const startingPointState = getState(this.state);
+		const { name, gender, afterHighSchool } = getState(this.state);
-		this.globalState.updateStartingPointState(startingPointState);
+		this.service.onSubmit(name, gender, afterHighSchool);
-
-		switch (startingPointState.afterHighSchool) {
-			case AfterHighSchool.College:
-				this.globalState.updateCurrentView(CurrentView.CollegeSelection);
-				break;
-
-			case AfterHighSchool.Workforce:
-				this.globalState.updateCurrentView(CurrentView.FirstJobHighSchoolDiploma);
-				break;
-		}
 	}
 }