From 56787e9b7a75c0ffd7f0e5e4b2ce9e8e606239f8 Mon Sep 17 00:00:00 2001
From: Mike Ryan <mike.ryan52@gmail.com>
Date: Sat, 28 Mar 2020 20:17:57 -0500
Subject: [PATCH] 15-reading-auth-state

---
 .../login-page/login-page.component.ts        | 24 ++++++++++++-------
 .../auth/components/user/user.component.ts    | 13 +++++-----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/app/auth/components/login-page/login-page.component.ts b/src/app/auth/components/login-page/login-page.component.ts
index 43e8ea4..32f94d9 100644
--- a/src/app/auth/components/login-page/login-page.component.ts
+++ b/src/app/auth/components/login-page/login-page.component.ts
@@ -1,7 +1,12 @@
 import { Component } from "@angular/core";
-import { Observable, of } from "rxjs";
+import { Observable } from "rxjs";
 import { Store } from "@ngrx/store";
-import { State } from "src/app/shared/state";
+import {
+  State,
+  selectGettingAuthStatus,
+  selectAuthUser,
+  selectAuthError
+} from "src/app/shared/state";
 import { UserModel } from "src/app/shared/models";
 import { AuthUserActions } from "../../actions";
 import { LoginEvent } from "../login-form";
@@ -12,14 +17,15 @@ import { LoginEvent } from "../login-form";
   styleUrls: ["./login-page.component.css"]
 })
 export class LoginPageComponent {
-  gettingStatus$: Observable<boolean> = of(false);
-  user$: Observable<UserModel | null> = of({
-    id: "1",
-    username: "NgRx Learner"
-  });
-  error$: Observable<string | null> = of(null);
+  gettingStatus$: Observable<boolean>;
+  user$: Observable<UserModel | null>;
+  error$: Observable<string | null>;
 
-  constructor(private store: Store<State>) {}
+  constructor(private store: Store<State>) {
+    this.gettingStatus$ = store.select(selectGettingAuthStatus);
+    this.user$ = store.select(selectAuthUser);
+    this.error$ = store.select(selectAuthError);
+  }
 
   onLogin($event: LoginEvent) {
     this.store.dispatch(
diff --git a/src/app/auth/components/user/user.component.ts b/src/app/auth/components/user/user.component.ts
index 8595f63..84fdbfa 100644
--- a/src/app/auth/components/user/user.component.ts
+++ b/src/app/auth/components/user/user.component.ts
@@ -1,8 +1,8 @@
 import { Component } from "@angular/core";
-import { Observable, of } from "rxjs";
+import { Observable } from "rxjs";
 import { UserModel } from "src/app/shared/models";
 import { Store } from "@ngrx/store";
-import { State } from "src/app/shared/state";
+import { State, selectAuthUser } from "src/app/shared/state";
 import { AuthUserActions } from "../../actions";
 
 @Component({
@@ -11,12 +11,11 @@ import { AuthUserActions } from "../../actions";
   styleUrls: ["./user.component.css"]
 })
 export class UserComponent {
-  user$: Observable<UserModel | null> = of({
-    id: "1",
-    username: "NgRx Learner"
-  });
+  user$: Observable<UserModel | null>;
 
-  constructor(private store: Store<State>) {}
+  constructor(private store: Store<State>) {
+    this.user$ = store.select(selectAuthUser);
+  }
 
   onLogout() {
     this.store.dispatch(AuthUserActions.logout());