Angular NgRx Course

Author: jhades

server/get-courses.route.ts

@@ -9,7 +9,13 @@ export function getAllCourses(req: Request, res: Response) {
 
     console.log("Retrieving courses data ...");
 
-    res.status(200).json({payload:Object.values(COURSES)});
+    setTimeout(() => {
+
+      res.status(200).json({payload:Object.values(COURSES)});
+
+    }, 1500);
+
+
 
 }
 

src/app/courses/home/home.component.css

@@ -32,3 +32,7 @@ h2 {
 }
 
 
+
+.spinner-container {
+  margin-top: 100px;
+}

src/app/courses/home/home.component.html

@@ -14,6 +14,12 @@ <h2 class="title">All Courses</h2>
     <p>In Promo: {{promoTotal$ | async}}</p>
   </div>
 
+  <div class="spinner-container" *ngIf="!(loading$ | async )">
+
+    <mat-spinner></mat-spinner>
+
+  </div>
+
   <mat-tab-group>
 
     <mat-tab label="Beginners">

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

@@ -1,10 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {Course} from "../model/course";
+import {compareCourses, Course} from '../model/course';
 import {Observable} from "rxjs";
 import {defaultDialogConfig} from '../shared/default-dialog-config';
 import {EditCourseDialogComponent} from '../edit-course-dialog/edit-course-dialog.component';
 import {MatDialog} from '@angular/material';
-import {map} from 'rxjs/operators';
+import {map, shareReplay} from 'rxjs/operators';
+import {CoursesHttpService} from '../services/courses-http.service';
 
 
 
@@ -17,18 +18,41 @@ export class HomeComponent implements OnInit {
 
     promoTotal$: Observable<number>;
 
+    loading$: Observable<boolean>;
+
     beginnerCourses$: Observable<Course[]>;
 
     advancedCourses$: Observable<Course[]>;
 
 
     constructor(
-      private dialog: MatDialog) {
+      private dialog: MatDialog,
+      private coursesHttpService: CoursesHttpService) {
 
     }
 
     ngOnInit() {
 
+      const courses$ = this.coursesHttpService.findAllCourses()
+        .pipe(
+          map(courses => courses.sort(compareCourses)),
+          shareReplay()
+        );
+
+      this.loading$ = courses$.pipe(map(courses => !!courses));
+
+      this.beginnerCourses$ = courses$
+        .pipe(
+          map(courses => courses.filter(course => course.category == 'BEGINNER'))
+        );
+
+
+      this.advancedCourses$ = courses$
+        .pipe(
+          map(courses => courses.filter(course => course.category == 'ADVANCED'))
+        );
+
+
     }
 
   onAddCourse() {