Auth

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-	"window.zoomLevel": 2,
-	"debug.console.fontSize": 15,
-	"markdown.preview.fontSize": 15,
-	"terminal.integrated.fontSize": 15,
-	"editor.fontSize": 16.1
-}
+	"window.zoomLevel": 0.5,
+	"debug.console.fontSize": 14.1,
+	"markdown.preview.fontSize": 14.1,
+	"terminal.integrated.fontSize": 14.1,
+	"editor.fontSize": 14.1
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "NGRX-Course",
+  "name": "ngrx",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -37,18 +37,17 @@
     "ngx-spinner": "^9.0.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
-    "@ngrx/router-store": "^9.0.0",
-    "@ngrx/entity": "^9.0.0"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.0",
     "@angular/cli": "~9.1.0",
     "@angular/compiler-cli": "~9.1.0",
     "@angular/language-service": "~9.1.0",
-    "@types/node": "^12.11.1",
+    "@ngrx/schematics": "^13.0.2",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.module.ts

@@ -24,12 +24,6 @@ import { environment } from '../environments/environment';
 import { reducers, metaReducers } from './store';
 import { EffectsModule } from '@ngrx/effects';
 import { CustomerSupportEffects } from './store/effects/customer-support.effects';
-import { SpinnerEffects } from './store/effects/spinner.effects';
-import { AlertEffects } from './store/effects/alert.effects';
-import { RouteEffects } from './store/effects/route.effects';
-import { ModalEffects } from './store/effects/modal.effects';
-import { AppEffects } from './store/effects/app.effects';
-import { StoreRouterConnectingModule } from '@ngrx/router-store';
 
 @NgModule({
   declarations: [
@@ -69,17 +63,9 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
       },
     }),
     !environment.production ? StoreDevtoolsModule.instrument() : [],
-    EffectsModule.forRoot([
-      CustomerSupportEffects,
-      SpinnerEffects,
-      AlertEffects,
-      RouteEffects,
-      ModalEffects,
-      AppEffects,
-    ]),
-    StoreRouterConnectingModule.forRoot(),
+    EffectsModule.forRoot([CustomerSupportEffects]),
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

src/app/modules/auth/auth.module.ts

@@ -1,3 +1,7 @@
+import { AuthEffects } from './../../store/effects/auth.effects';
+import { EffectsModule } from '@ngrx/effects';
+import * as fromAuth from '../../store/reducers/auth.reducer';
+import { StoreModule } from '@ngrx/store';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -6,14 +10,14 @@ import { LoginComponent } from './login/login.component';
 import { FormsModule } from '@angular/forms';
 import { AuthLinksComponent } from './auth-links/auth-links.component';
 import { LoginModalComponent } from './login-modal/login-modal.component';
-import { StoreModule } from '@ngrx/store';
-import * as fromAuth from '../../store/reducers/auth.reducer';
-import { EffectsModule } from '@ngrx/effects';
-import { AuthEffects } from '../../store/effects/auth.effects';
 
 @NgModule({
-  declarations: [LoginComponent, AuthLinksComponent, LoginModalComponent],
-  imports: [CommonModule, AuthRoutingModule, FormsModule, StoreModule.forFeature(fromAuth.authFeatureKey, fromAuth.reducer), EffectsModule.forFeature([AuthEffects])],
+  declarations: [LoginComponent, AuthLinksComponent],
+  imports: [
+    CommonModule, AuthRoutingModule, FormsModule,
+    StoreModule.forFeature(fromAuth.authFeatureKey, fromAuth.reducer),
+    EffectsModule.forFeature([AuthEffects])
+  ],
   exports: [AuthLinksComponent],
 })
-export class AuthModule {}
+export class AuthModule { }

src/app/pages/customer-support/customer-support.component.html

@@ -1,49 +1,50 @@
-<div *ngIf="vm$ | async as vm">
-	<h3 class="mt-4 mb-4">Customer Support</h3>
+<div *ngIf="(cusData$ | async) as cusData">
+  <h3 class="mt-4 mb-4">Customer Support</h3>
 
-	<div>
-		<div>
-			<div class="row">
-				<div class="col-10">
-					<h4 class="mt-2">We are here to help!</h4>
-				</div>
-				<div class="col-2">
-					<div class="support-out-icon"><i class="fas fa-hands-helping"></i></div>
-				</div>
-			</div>
-			<form #f="ngForm" (ngSubmit)="onSubmit(f)">
+  <div>
+    <div>
+      <div class="row">
+        <div class="col-10">
+          <h4 class="mt-2">We are here to help!</h4>
+        </div>
+        <div class="col-2">
+          <div class="support-out-icon"><i class="fas fa-hands-helping"></i></div>
+        </div>
+      </div>
+      <form #f="ngForm" (ngSubmit)="onSubmit(f)">
 
-				<div class="form-row">
-					<div class="form-group col-md-6">
-						<label for="inputName">Name</label>
-						<input type="text" class="form-control" id="inputName" name="name" ngModel>
-					</div>
-					<div class="form-group col-md-6">
-						<label for="inputEmail">Email</label>
-						<input type="text" class="form-control" id="inputEmail" name="email" ngModel>
-					</div>
-				</div>
-				<div class="form-group">
-					<label for="inputMessage">Message</label>
-					<textarea class="form-control" id="inputMessage" rows="3" ngModel name="message"></textarea>
-				</div>
-				<ng-container *ngIf="vm.isSentSuccess != null">
-					<div class="alert alert-dismissible alert-success" *ngIf="vm.isSentSuccess">
-						<button type="button" class="close" data-dismiss="alert" (click)="clearFeedback()">&times;</button>
-						<strong>We got your message {{vm.name}}!</strong> We will be in touch.
-					</div>
-					<div class="alert alert-dismissible alert-danger" *ngIf="!vm.isSentSuccess">
-						<button type="button" class="close" data-dismiss="alert" (click)="clearFeedback()">&times;</button>
-						<strong>Oh snap!</strong> Unable to send message. Please contact us at our customer support line at 123-456-7890.
-					</div>
-				</ng-container>
+        <div class="form-row">
+          <div class="form-group col-md-6">
+            <label for="inputName">Name</label>
+            <input type="text" class="form-control" id="inputName" name="name" ngModel>
+          </div>
+          <div class="form-group col-md-6">
+            <label for="inputEmail">Email</label>
+            <input type="text" class="form-control" id="inputEmail" name="email" ngModel>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="inputMessage">Message</label>
+          <textarea class="form-control" id="inputMessage" rows="3" ngModel name="message"></textarea>
+        </div>
+        <ng-container *ngIf="cusData?.isSentSuccess != null">
+          <div class="alert alert-dismissible alert-success" *ngIf="cusData?.isSentSuccess">
+            <button type="button" class="close" data-dismiss="alert" (click)="clearFeedback()">&times;</button>
+            <strong>We got your message! {{cusData?.name}} </strong> We will be in touch.
+          </div>
+          <div class="alert alert-dismissible alert-danger" *ngIf="!(cusData?.isSentSuccess)">
+            <button type="button" class="close" data-dismiss="alert" (click)="clearFeedback()">&times;</button>
+            <strong>Oh snap!</strong> Unable to send message. Please contact us at our customer support line at
+            123-456-7890.
+          </div>
+        </ng-container>
 
 
-				<div class="mt-5">
-					<button type="submit" class="btn btn-success">Send Message <i class="fas fa-paper-plane"></i></button>
-				</div>
+        <div class="mt-5">
+          <button type="submit" class="btn btn-success">Send Message <i class="fas fa-paper-plane"></i></button>
+        </div>
 
-			</form>
-		</div>
-	</div>
-</div>
+      </form>
+    </div>
+  </div>
+</div>

src/app/pages/customer-support/customer-support.component.ts

@@ -1,14 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
-import { CustomerSupportService } from 'src/app/shared/services/customer-support.service';
+import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-import { AppState } from 'src/app/store';
-import {
-  sendingCustomerSupportMessage,
-  clearForm,
-} from 'src/app/store/actions/customer-support.actions';
-import * as fromSelectors from 'src/app/store/selectors/customer-support.selectors';
+import { CustomerSupportService } from 'src/app/shared/services/customer-support.service';
+import * as FromCustomerActions from '../../store/actions/customer-support.actions';
+import { AppState } from './../../store/index';
+// tslint:disable-next-line: import-spacing
+import * as CustomerSelectors from '../../store/selectors/customer-support.selectors';
 
 @Component({
   selector: 'app-customer-support',
@@ -17,25 +15,23 @@ import * as fromSelectors from 'src/app/store/selectors/customer-support.selecto
 })
 export class CustomerSupportComponent implements OnInit {
   constructor(
-    private customerSupportService: CustomerSupportService,
     private store: Store<AppState>
-  ) {}
+  ) { }
 
   isSendSuccess: boolean | null = null;
 
-  vm$: Observable<fromSelectors.CustomerSupportViewModel>;
+  cusData$: Observable<CustomerSelectors.CusSupportData>;
 
   ngOnInit(): void {
-    this.vm$ = this.store.pipe(
-      select(fromSelectors.selectCustomerSupportModel)
-    );
+    this.cusData$ = this.store.pipe(select(CustomerSelectors.customerSupportData));
   }
 
   onSubmit(f: NgForm) {
-    this.store.dispatch(sendingCustomerSupportMessage({ data: f.value }));
+    this.store.dispatch(FromCustomerActions.sendCustomerSupportMessage({ data: f.value }));
+    this.isSendSuccess = true;
   }
 
   clearFeedback() {
-    this.store.dispatch(clearForm());
+    this.store.dispatch(FromCustomerActions.clearCustomerSupportStatus());
   }
 }

src/app/shared/services/customer-support.service.ts

@@ -11,9 +11,8 @@ export class CustomerSupportService {
   //  might be totally fake, and Some business logic usually handled on the server
   //   will be done on this page. This page is designed to give a back mock data.
   /********************************************************************************** */
-  constructor() {}
+  constructor() { }
 
-  //This is a fake api call
   sendMessage(form: CustomerMessage): Observable<boolean> {
     return form.name ? of(true) : of(false);
   }

src/app/store/actions/auth.actions.ts

@@ -1,29 +1,15 @@
 import { createAction, props } from '@ngrx/store';
-import { User } from 'src/app/modules/auth/resources/auth';
 
-export const loginPage = createAction(
-  '[Login Component] Login User',
-  props<{ username: string; password: string }>()
+export const loadAuths = createAction(
+  '[Auth] Load Auths'
 );
 
-export const loginModal = createAction(
-  '[Login Modal Component] Login User',
-  props<{ username: string; password: string }>()
+export const loadAuthsSuccess = createAction(
+  '[Auth] Load Auths Success',
+  props<{ data: any }>()
 );
 
-export const loginSuccess = createAction(
-  '[Auth Effect] Login User Success',
-  props<{ user: User }>()
-);
-
-export const loginFailure = createAction(
-  '[Auth Effect] Login User Failure',
+export const loadAuthsFailure = createAction(
+  '[Auth] Load Auths Failure',
   props<{ error: any }>()
 );
-
-export const logout = createAction('[Auth Links Component] Logout User');
-
-export const browserReload = createAction(
-  '[Core Component] Browser Reload',
-  props<{ user: User }>()
-);

src/app/store/actions/customer-support.actions.ts

@@ -1,16 +1,16 @@
-import { createAction, props } from '@ngrx/store';
 import { CustomerMessage } from 'src/app/shared/models/customer-message';
+import { createAction, props } from '@ngrx/store';
 
-export const sendingCustomerSupportMessage = createAction(
+export const sendCustomerSupportMessage = createAction(
   '[Customer Support Component] Sending Customer Support Message',
   props<{ data: CustomerMessage }>()
 );
 
-export const sendMessageStatus = createAction(
-  '[Customer Support Effect] Send Customer Message Status',
+export const sendCustomerSupportStatus = createAction(
+  '[Customer Support Effect] Sending Customer Support Status',
   props<{ isSentSuccess: boolean }>()
 );
 
-export const clearForm = createAction(
-  '[Customer Support Component] Clear Form'
+export const clearCustomerSupportStatus = createAction(
+  '[Customer Support Component] Clearing Customer Support Data'
 );