Angular NgRx Course

Author: jhades

server/search-lessons.route.ts

@@ -11,15 +11,6 @@ export function searchLessons(req: Request, res: Response) {
 
     console.log('Searching for lessons ...');
 
-//    const error = (Math.random() >= 0.5);
-
-//    if (error) {
-//        console.log("ERROR loading lessons!");
-//        res.status(500).json({message: 'random error occurred.'});
-//    }
-//    else {
-
-
         const queryParams = req.query;
 
         const courseId = queryParams.courseId,
@@ -43,12 +34,8 @@ export function searchLessons(req: Request, res: Response) {
         const lessonsPage = lessons.slice(initialPos, initialPos + pageSize);
 
         setTimeout(() => {
-            res.status(200).json({payload: lessonsPage});
+            res.status(200).json(lessonsPage);
         },1000);
 
- //   }
-
-
-
 
 }

src/app/courses/course/course.component.html

@@ -10,7 +10,7 @@ <h2>{{course?.description}}</h2>
 
   </div>
 
-  <mat-table class="lessons-table mat-elevation-z8" [dataSource]="lessons">
+  <mat-table class="lessons-table mat-elevation-z8" [dataSource]="lessons$ | async">
 
     <ng-container matColumnDef="seqNo">
 

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

@@ -35,10 +35,6 @@ export class CourseComponent implements OnInit {
 
     const courseUrl = this.route.snapshot.paramMap.get('id');
 
-    this.loading$ = this.coursesService.loading$;
-
-    const selectAllCourses = this.coursesService.selectors.selectEntities;
-
     this.course$ = this.coursesService.entities$
       .pipe(
         map(courses => courses.find(course => course.url == courseUrl))
@@ -51,9 +47,10 @@ export class CourseComponent implements OnInit {
           "pageIndex": "0",
           "pageSize": "3"
         }))
-
       );
 
+    this.loading$ = this.lessonsService.loading$;
+
   }
 
 

src/styles.scss

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