Add NGRX Store for better state management

public/itemizer-app/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~9.1.4",
     "@angular/platform-browser-dynamic": "~9.1.4",
     "@angular/router": "~9.1.4",
+    "@ngrx/store": "^9.1.2",
     "bootstrap": "^4.4.1",
     "jquery": "^3.5.1",
     "rxjs": "~6.5.4",

public/itemizer-app/src/app/app.module.ts

@@ -12,6 +12,8 @@ import { FormsModule } from '@angular/forms';
 import { UserService } from './user/user.service';
 import { UserComponent } from './user/user.component';
 import { UserInterceptor } from './user/user.interceptor';
+import { StoreModule } from '@ngrx/store';
+import * as fromApp from './store/app.reducer';
 
 @NgModule({
   declarations: [
@@ -25,7 +27,8 @@ import { UserInterceptor } from './user/user.interceptor';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    StoreModule.forRoot(fromApp.appReducer),
   ],
   providers: [ItemService, UserService, {
     provide: HTTP_INTERCEPTORS,

public/itemizer-app/src/app/store/app.reducer.ts

@@ -0,0 +1,10 @@
+import { ActionReducerMap } from '@ngrx/store';
+
+import * as fromUser from '../user/store/user.reducer';
+
+export interface AppState {
+  auth: fromUser.State;
+}
+
+export const appReducer: ActionReducerMap<AppState> = {
+  auth: fromUser.userReducer};

public/itemizer-app/src/app/user/store/user.actions.ts

@@ -0,0 +1,69 @@
+/**
+ * These actions pertain to user authenticate processes
+ * and work hand-in-hand with NGRX/store state management
+ */
+
+import { Action } from '@ngrx/store';
+
+export const LOGIN_START = '[Auth] Login Start';
+export const AUTHENTICATE_SUCCESS = '[Auth] Login';
+export const AUTHENTICATE_FAIL = '[Auth] Login Fail';
+export const SIGNUP_START = '[Auth] Signup Start';
+export const CLEAR_ERROR = '[Auth] Clear Error';
+export const AUTO_LOGIN = '[Auth] Auto Login';
+export const LOGOUT = '[Auth] Logout';
+
+export class AuthenticateSuccess implements Action {
+  readonly type = AUTHENTICATE_SUCCESS;
+
+  constructor(
+    public payload: {
+      email: string;
+      userId: string;
+      token: string;
+      expirationDate: Date;
+      redirect: boolean;
+    }
+  ) {}
+}
+
+export class Logout implements Action {
+  readonly type = LOGOUT;
+}
+
+export class LoginStart implements Action {
+  readonly type = LOGIN_START;
+
+  constructor(public payload: { email: string; password: string }) {}
+}
+
+export class AuthenticateFail implements Action {
+  readonly type = AUTHENTICATE_FAIL;
+
+  constructor(public payload: string) {}
+}
+
+export class SignupStart implements Action {
+  readonly type = SIGNUP_START;
+
+  constructor(
+    public payload: { name: string; email: string; password: string }
+  ) {}
+}
+
+export class ClearError implements Action {
+  readonly type = CLEAR_ERROR;
+}
+
+export class AutoLogin implements Action {
+  readonly type = AUTO_LOGIN;
+}
+
+export type UserActions =
+  | Logout
+  | LoginStart
+  | AuthenticateFail
+  | AuthenticateSuccess
+  | SignupStart
+  | ClearError
+  | AutoLogin;

public/itemizer-app/src/app/user/store/user.reducer.ts

@@ -0,0 +1,67 @@
+import { User } from '../user.model';
+import * as UserActions from './user.actions';
+
+export interface State {
+  user: User;
+  authError: string;
+  loading: boolean;
+}
+
+const initialState: State = {
+  user: null,
+  authError: null,
+  loading: false,
+};
+
+export function userReducer(
+  state = initialState,
+  action: UserActions.UserActions
+) {
+  switch (action.type) {
+    case UserActions.AUTHENTICATE_SUCCESS: {
+      const user = new User(
+        action.payload.email,
+        action.payload.userId,
+        action.payload.token
+        // action.payload.expirationDate
+      );
+      return {
+        ...state,
+        authError: null,
+        user: user,
+        loading: false,
+      };
+    }
+    case UserActions.LOGOUT: {
+      return {
+        ...state,
+        user: null,
+      };
+    }
+    case UserActions.LOGIN_START: {
+    }
+    case UserActions.SIGNUP_START: {
+      return {
+        ...state,
+        authError: null,
+        loading: true,
+      };
+    }
+    case UserActions.AUTHENTICATE_FAIL: {
+      return {
+        ...state,
+        user: null,
+        authError: action.payload,
+        loading: false,
+      };
+    }
+    case UserActions.CLEAR_ERROR: {
+      return {
+        ...state,
+        authError: null,
+      };
+    }
+    default:
+      return state;
+  }
+}