From 610ed791f0cf5ed2856cf84738ba10504d2dee09 Mon Sep 17 00:00:00 2001 From: "Z. Charles Dziura" Date: Tue, 1 Jul 2025 11:31:57 -0400 Subject: [PATCH] Poorly designed starting point component: almost done! --- package-lock.json | 29 ------------------- package.json | 2 -- src/app/app.config.ts | 20 ++----------- .../views/starting-point/starting-point.html | 27 +++++++++++++---- .../starting-point/starting-point.state.ts | 13 +++++++-- .../views/starting-point/starting-point.ts | 26 ++++++++++++++++- tsconfig.json | 3 -- 7 files changed, 60 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index 63fb330..c926fe8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,6 @@ "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", "@ngrx/signals": "^19.2.1", - "@ngrx/store": "^19.2.1", - "@ngrx/store-devtools": "^19.2.1", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, @@ -2246,33 +2244,6 @@ } } }, - "node_modules/@ngrx/store": { - "version": "19.2.1", - "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.1.tgz", - "integrity": "sha512-c5vQId7YoAhM0y4HASrz9mtLju+28vJspd6OBlhPbBlSae8GN8m9S/oav+8LaSY19yh95cZ5B/nMcLNNWgL/jA==", - "license": "MIT", - "dependencies": { - "tslib": "^2.0.0" - }, - "peerDependencies": { - "@angular/core": "^19.0.0", - "rxjs": "^6.5.3 || ^7.5.0" - } - }, - "node_modules/@ngrx/store-devtools": { - "version": "19.2.1", - "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-19.2.1.tgz", - "integrity": "sha512-gj1YO+4yl6D0l9vzLWdw07TQSu5UPKgsSLsNJfDLXraaLCUcB8voAp4J7zohN8qR5ixDuHeMoiSSVuklQ75u2w==", - "license": "MIT", - "dependencies": { - "tslib": "^2.0.0" - }, - "peerDependencies": { - "@angular/core": "^19.0.0", - "@ngrx/store": "19.2.1", - "rxjs": "^6.5.3 || ^7.5.0" - } - }, "node_modules/@npmcli/agent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-3.0.0.tgz", diff --git a/package.json b/package.json index 04c1bfb..e9d57eb 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,6 @@ "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", "@ngrx/signals": "^19.2.1", - "@ngrx/store": "^19.2.1", - "@ngrx/store-devtools": "^19.2.1", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, diff --git a/src/app/app.config.ts b/src/app/app.config.ts index c79bb5e..0a09ddd 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,21 +1,5 @@ -import { - ApplicationConfig, - isDevMode, - provideBrowserGlobalErrorListeners, - provideZonelessChangeDetection, -} from '@angular/core'; -import { provideStoreDevtools } from '@ngrx/store-devtools'; +import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core'; export const appConfig: ApplicationConfig = { - providers: [ - provideBrowserGlobalErrorListeners(), - provideZonelessChangeDetection(), - provideStoreDevtools({ - maxAge: 25, - logOnly: !isDevMode(), - autoPause: true, - trace: false, - traceLimit: 75, - }), - ], + providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection()], }; diff --git a/src/app/views/starting-point/starting-point.html b/src/app/views/starting-point/starting-point.html index 4c29a21..9f4cae8 100644 --- a/src/app/views/starting-point/starting-point.html +++ b/src/app/views/starting-point/starting-point.html @@ -1,7 +1,24 @@ -

- Hello {{ name() }} -

- - +
+ + +
+
+ + +
+
+ + +
diff --git a/src/app/views/starting-point/starting-point.state.ts b/src/app/views/starting-point/starting-point.state.ts index b4c79b6..fa8c0e2 100644 --- a/src/app/views/starting-point/starting-point.state.ts +++ b/src/app/views/starting-point/starting-point.state.ts @@ -1,4 +1,5 @@ -import { patchState, signalStore, withMethods, withState } from '@ngrx/signals'; +import { effect } from '@angular/core'; +import { getState, patchState, signalStore, withHooks, withMethods, withState } from '@ngrx/signals'; export type StartingPointState = { name: string; @@ -33,5 +34,13 @@ export const StartingPointStateStore = signalStore( gender: gender ?? Gender.Undefined, afterHighSchool: afterHighSchool ?? AfterHighSchool.Undefined, })), - })) + })), + withHooks({ + onInit: store => { + effect(() => { + const state = getState(store); + console.log(state); + }); + }, + }) ); diff --git a/src/app/views/starting-point/starting-point.ts b/src/app/views/starting-point/starting-point.ts index e1b815f..99ad6ed 100644 --- a/src/app/views/starting-point/starting-point.ts +++ b/src/app/views/starting-point/starting-point.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, computed, inject, OnInit, Signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, effect, inject, OnInit, signal } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; import { StartingPointState, StartingPointStateStore } from './starting-point.state'; @@ -40,6 +40,28 @@ export class StartingPoint implements OnInit { afterHighSchool: [AfterHighSchool.Undefined, Validators.required], }); + readonly genders = signal>([ + { + desc: 'Female', + value: Gender.Female, + }, + { + desc: 'Male', + value: Gender.Male, + }, + ]).asReadonly(); + + readonly afterHighSchoolOptions = signal>([ + { + desc: 'Go to College', + value: AfterHighSchool.College, + }, + { + desc: 'Enter the Workforce', + value: AfterHighSchool.Workforce, + }, + ]).asReadonly(); + constructor() { this.form.valueChanges .pipe(takeUntilDestroyed()) @@ -49,4 +71,6 @@ export class StartingPoint implements OnInit { } ngOnInit(): void {} + + onSubmit() {} } diff --git a/tsconfig.json b/tsconfig.json index e4955f2..5921438 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,9 +26,6 @@ "references": [ { "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" } ] }