Angular NgRx Course

Author: jhades

src/app/app.component.ts

@@ -1,11 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {select, Store} from "@ngrx/store";
 import {Observable} from "rxjs";
-import {AppState} from './reducers';
 import {map} from 'rxjs/operators';
 import {isLoggedIn, isLoggedOut} from './auth/auth.selectors';
 import {Router} from '@angular/router';
 import {logout} from './auth/auth.actions';
+import {AppState} from './reducers/reducers';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -19,9 +19,9 @@ import {environment} from '../environments/environment';
 import {RouterState, StoreRouterConnectingModule} from '@ngrx/router-store';
 
 import {EffectsModule} from '@ngrx/effects';
-import {reducers} from './reducers';
 import {AuthGuard} from './auth/auth.guard';
 import {EntityDataModule} from '@ngrx/data';
+import {reducers} from './reducers/reducers';
 
 
 const routes: Routes = [

src/app/auth/auth.actions.ts

@@ -1,5 +1,5 @@
 import {Action, createAction, props} from '@ngrx/store';
-import {User} from '../model/user.model';
+import {User} from './model/user.model';
 
 
 export const login = createAction(

src/app/auth/auth.effects.ts

@@ -1,10 +1,8 @@
 import {Injectable} from '@angular/core';
 import {Actions, createEffect, Effect, ofType, ROOT_EFFECTS_INIT} from '@ngrx/effects';
-import {map, tap} from 'rxjs/operators';
+import {tap} from 'rxjs/operators';
 import {Router} from '@angular/router';
-import {defer, of} from 'rxjs';
 import {AuthActions} from './action-types';
-import {login, logout} from './auth.actions';
 
 
 @Injectable()

src/app/auth/auth.guard.ts

@@ -2,10 +2,10 @@ import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
 import {Observable} from 'rxjs';
 import {select, Store} from '@ngrx/store';
-import {AppState} from '../reducers';
 import {isLoggedIn} from './auth.selectors';
 import {tap} from 'rxjs/operators';
 import {login, logout} from './auth.actions';
+import {AppState} from '../reducers/reducers';
 
 
 

src/app/auth/auth.reducer.ts

@@ -1,5 +1,5 @@
 import { createReducer, on} from '@ngrx/store';
-import {User} from '../model/user.model';
+import {User} from './model/user.model';
 import {AuthActions} from './action-types';
 
 

src/app/auth/auth.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs";
-import {User} from "../model/user.model";
+import {User} from "./model/user.model";
 
 
 

src/app/auth/login/login.component.ts

@@ -7,8 +7,8 @@ import {AuthService} from "../auth.service";
 import {tap} from "rxjs/operators";
 import {noop} from "rxjs";
 import {Router} from "@angular/router";
-import {AppState} from '../../reducers';
 import {login} from '../auth.actions';
+import {AppState} from '../../reducers/reducers';
 
 @Component({
   selector: 'login',

src/app/model/user.model.ts renamed to src/app/auth/model/user.model.ts

@@ -2,7 +2,7 @@ import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {Course} from "../model/course";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import {EditCourseDialogComponent} from "../edit-course-dialog/edit-course-dialog.component";
-import {defaultDialogConfig} from '../../shared/default-dialog-config';
+import {defaultDialogConfig} from '../shared/default-dialog-config';
 import {CourseEntityService} from '../services/course-entity.service';
 
 @Component({

src/app/courses/courses-card-list/courses-card-list.component.ts

@@ -24,10 +24,10 @@ import {MatIconModule} from '@angular/material/icon';
 import {RouterModule, Routes} from '@angular/router';
 import {CourseDataService} from './services/course-data.service';
 import { EntityDataService, EntityDefinitionService, EntityMetadataMap} from '@ngrx/data';
-import {Course} from './model/course';
+import {compareCourses, Course} from './model/course';
 import {CourseEntityService} from './services/course-entity.service';
 import {LessonEntityService} from './services/lesson-entity.service';
-import {Lesson} from './model/lesson';
+import {compareLessons, Lesson} from './model/lesson';
 
 
 export const coursesRoutes: Routes = [
@@ -49,40 +49,6 @@ export const coursesRoutes: Routes = [
 ];
 
 
-
-function compareCourses(c1:Course, c2: Course) {
-
-  const compare = c1.seqNo - c2.seqNo;
-
-  if (compare > 0) {
-    return 1;
-  }
-  else if ( compare < 0) {
-    return -1;
-  }
-  else return 0;
-
-}
-
-
-function compareLessons(l1:Lesson, l2: Lesson) {
-
-  const compareCourses = l1.courseId - l2.courseId;
-
-  if (compareCourses > 0) {
-    return 1;
-  }
-  else if (compareCourses < 0){
-    return -1;
-  }
-  else {
-    return l1.seqNo - l2.seqNo;
-  }
-
-}
-
-
-
 const entityMetadata: EntityMetadataMap = {
   Course: {
 

src/app/courses/courses.module.ts

@@ -1,7 +1,6 @@
 import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Course} from '../model/course';
-import {AppState} from '../../reducers';
 import {CourseEntityService} from '../services/course-entity.service';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Observable} from 'rxjs';

src/app/courses/edit-course-dialog/edit-course-dialog.component.ts

@@ -1,13 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {Course} from "../model/course";
 import {Observable} from "rxjs";
-import {AppState} from '../../reducers';
-import {createSelector, select, Store} from '@ngrx/store';
 import {CourseEntityService} from '../services/course-entity.service';
-import {defaultDialogConfig} from '../../shared/default-dialog-config';
+import {defaultDialogConfig} from '../shared/default-dialog-config';
 import {EditCourseDialogComponent} from '../edit-course-dialog/edit-course-dialog.component';
 import {MatDialog} from '@angular/material';
-import {map, tap} from 'rxjs/operators';
+import {map} from 'rxjs/operators';
 
 
 

src/app/courses/home/home.component.ts

@@ -11,3 +11,18 @@ export interface Course {
   lessonsCount: number;
   promo: boolean;
 }
+
+
+export function compareCourses(c1:Course, c2: Course) {
+
+  const compare = c1.seqNo - c2.seqNo;
+
+  if (compare > 0) {
+    return 1;
+  }
+  else if ( compare < 0) {
+    return -1;
+  }
+  else return 0;
+
+}

src/app/courses/model/course.ts

@@ -6,4 +6,21 @@ export interface Lesson {
     duration: string;
     seqNo: number;
     courseId: number;
-}
+}
+
+
+export function compareLessons(l1:Lesson, l2: Lesson) {
+
+  const compareCourses = l1.courseId - l2.courseId;
+
+  if (compareCourses > 0) {
+    return 1;
+  }
+  else if (compareCourses < 0){
+    return -1;
+  }
+  else {
+    return l1.seqNo - l2.seqNo;
+  }
+
+}

src/app/courses/model/lesson.ts

@@ -54,7 +54,7 @@ $theme: mat-light-theme($primary, $accent);
 .spinner-container {
   position: fixed;
   height: 300px;
-  width: 390px;
+  width: 345px;
   display: flex;
   background: white;
   margin-top: 70px;