Angular NgRx Course

Author: jhades

server/get-courses.route.ts

@@ -20,13 +20,19 @@ export function getAllCourses(req: Request, res: Response) {
 }
 
 
-export function getCourseById(req: Request, res: Response) {
+export function getCourseByUrl(req: Request, res: Response) {
 
-    const courseId = req.params["id"];
+    const courseUrl = req.params["courseUrl"];
 
     const courses:any = Object.values(COURSES);
 
-    const course = courses.find(course => course.id == courseId);
+    const course = courses.find(course => course.url == courseUrl);
+
+    setTimeout(() => {
+
+      res.status(200).json(course);
+
+    }, 1000);
+
 
-    res.status(200).json(course);
 }

server/search-lessons.route.ts

@@ -35,9 +35,6 @@ export function searchLessons(req: Request, res: Response) {
 
         const lessonsPage = lessons.slice(initialPos, initialPos + pageSize);
 
-        setTimeout(() => {
-            res.status(200).json(lessonsPage);
-        },1000);
-
+        res.status(200).json(lessonsPage);
 
 }

server/server.ts

@@ -2,7 +2,7 @@
 
 import * as express from 'express';
 import {Application} from "express";
-import {getAllCourses, getCourseById} from "./get-courses.route";
+import {getAllCourses, getCourseByUrl} from "./get-courses.route";
 import {searchLessons} from "./search-lessons.route";
 import {loginUser} from "./auth.route";
 import {saveCourse} from "./save-course.route";
@@ -29,7 +29,7 @@ app.route('/api/course/:id').put(saveCourse);
 
 app.route('/api/course/:id').delete(deleteCourse);
 
-app.route('/api/course/:id').get(getCourseById);
+app.route('/api/courses/:courseUrl').get(getCourseByUrl);
 
 app.route('/api/lessons').get(searchLessons);
 

src/app/courses/course/course.component.css

@@ -49,3 +49,8 @@ h2 {
   margin-top: 20px;
   margin-bottom: 200px;
 }
+
+
+.spinner-container {
+  width:390px;
+}

src/app/courses/course/course.component.ts

@@ -4,6 +4,7 @@ import {Course} from '../model/course';
 import {Observable} from 'rxjs';
 import {Lesson} from '../model/lesson';
 import {concatMap, delay, filter, first, map, shareReplay, tap, withLatestFrom} from 'rxjs/operators';
+import {CoursesHttpService} from '../services/courses-http.service';
 
 
 @Component({
@@ -19,18 +20,24 @@ export class CourseComponent implements OnInit {
 
   displayedColumns = ['seqNo', 'description', 'duration'];
 
-  loading$: Observable<boolean>;
-
   nextPage = 0;
 
   constructor(
+    private coursesService: CoursesHttpService,
     private route: ActivatedRoute) {
 
   }
 
   ngOnInit() {
 
+    const courseUrl = this.route.snapshot.paramMap.get("courseUrl");
+
+    this.course$ = this.coursesService.findCourseByUrl(courseUrl);
 
+    this.lessons$ = this.course$.pipe(
+      concatMap(course => this.coursesService.findLessons(course.id)),
+      tap(console.log)
+    );
 
   }
 

src/app/courses/courses.module.ts

@@ -34,7 +34,7 @@ export const coursesRoutes: Routes = [
 
   },
   {
-    path: ':id',
+    path: ':courseUrl',
     component: CourseComponent
   }
 ];

src/app/courses/services/courses-http.service.ts

@@ -22,19 +22,21 @@ export class CoursesHttpService {
             );
     }
 
+    findCourseByUrl(courseUrl: string): Observable<Course> {
+      return this.http.get<Course>(`/api/courses/${courseUrl}`);
+    }
+
     findLessons(
         courseId:number,
         pageNumber = 0, pageSize = 3):  Observable<Lesson[]> {
 
-        return this.http.get('/api/lessons', {
+        return this.http.get<Lesson[]>('/api/lessons', {
             params: new HttpParams()
                 .set('courseId', courseId.toString())
                 .set('sortOrder', 'asc')
                 .set('pageNumber', pageNumber.toString())
                 .set('pageSize', pageSize.toString())
-        }).pipe(
-            map(res =>  res["payload"])
-        );
+        });
     }