diff --git a/src/app/app.component.html b/src/app/app.component.html index 1b7f2c3..e3b7486 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,9 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - +
+

App Component

+

Username

+

{{ username$ | async }}

+ +

Token

+

{{ token$ | async }}

+
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f914419..0213354 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,14 +1,26 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; +import { AuthStore } from "./store/AuthStore"; +import {AuthDetailsComponent} from "./auth-details/auth-details.component"; @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, RouterOutlet], + imports: [CommonModule, RouterOutlet, AuthDetailsComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { - title = 'pt-angular-simple-state-management'; + constructor(private authStore: AuthStore) { + this.authStore.setUsername("test"); + this.authStore.setToken("test"); + } + + username$ = this.authStore.username$; + token$ = this.authStore.token$; + + updateUsername() { + this.authStore.setUsername("newUsername"); + } } diff --git a/src/app/auth-details/auth-details.component.html b/src/app/auth-details/auth-details.component.html new file mode 100644 index 0000000..bf1a901 --- /dev/null +++ b/src/app/auth-details/auth-details.component.html @@ -0,0 +1,7 @@ +
+

Auth Details Component

+

Username

+

{{ username$ | async }}

+

Token

+

{{ token$ | async }}

+
diff --git a/src/app/auth-details/auth-details.component.scss b/src/app/auth-details/auth-details.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/auth-details/auth-details.component.spec.ts b/src/app/auth-details/auth-details.component.spec.ts new file mode 100644 index 0000000..4618344 --- /dev/null +++ b/src/app/auth-details/auth-details.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AuthDetailsComponent } from './auth-details.component'; + +describe('AuthDetailsComponent', () => { + let component: AuthDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AuthDetailsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AuthDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth-details/auth-details.component.ts b/src/app/auth-details/auth-details.component.ts new file mode 100644 index 0000000..f29c449 --- /dev/null +++ b/src/app/auth-details/auth-details.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import {AsyncPipe} from "@angular/common"; +import {AuthStore} from "../store/AuthStore"; + +@Component({ + selector: 'app-auth-details', + standalone: true, + imports: [ + AsyncPipe + ], + templateUrl: './auth-details.component.html', + styleUrl: './auth-details.component.scss' +}) +export class AuthDetailsComponent { + + username$ = this.authStoreService.username$; + token$ = this.authStoreService.token$; + constructor(private authStoreService: AuthStore) {} +} diff --git a/src/app/store/AuthStore.ts b/src/app/store/AuthStore.ts new file mode 100644 index 0000000..577ad1a --- /dev/null +++ b/src/app/store/AuthStore.ts @@ -0,0 +1,40 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { map } from 'rxjs/operators'; + +interface AuthStoreState { + username: string; + token: string; +} + +@Injectable({ + providedIn: 'root' +}) +export class AuthStore { + private state: BehaviorSubject = new BehaviorSubject({ + username: "", + token: "", + }); + + // Getter for username + get username$() { + return this.state.asObservable().pipe(map(state => state.username)); + } + + // Getter for token + get token$() { + return this.state.asObservable().pipe(map(state => state.token)); + } + + // Mutation for username + setUsername(username: string) { + const currentState = this.state.getValue(); + this.state.next({ ...currentState, username }); + } + + // Mutation for token + setToken(token: string) { + const currentState = this.state.getValue(); + this.state.next({ ...currentState, token }); + } +} diff --git a/src/store/AuthStore.ts b/src/store/AuthStore.ts deleted file mode 100644 index 24dafa2..0000000 --- a/src/store/AuthStore.ts +++ /dev/null @@ -1,25 +0,0 @@ -interface AuthStoreState { - username: string, - token: string, -} - -const state : AuthStoreState = { - username: "", - token: "", -} - -const getters = { - username: (state: AuthStoreState) => state.username, - token: (state: AuthStoreState) => state.token, -} - -const mutations = { - setUsername(state: AuthStoreState, username: string) { - state.username = username - }, - setToken(state: AuthStoreState, token: string) { - state.token = token - }, -} - -export