From 5de756df1b0664cd1a08fc3e3151e69a10ef009b Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Wed, 31 Jan 2024 14:43:09 +0100
Subject: [PATCH 1/9] Angular 17

---
 package.json                                  |  4 +-
 server/get-courses.route.ts                   |  2 +-
 src/app/app-routing.module.ts                 |  8 +-
 .../course-dialog/course-dialog.component.ts  |  3 +-
 src/app/home/home-promises.resolver.ts        | 29 +++++++
 src/app/home/home.component.html              |  4 +-
 src/app/home/home.component.ts                | 45 +++++++---
 src/app/home/home.model.ts                    |  7 ++
 src/app/home/home.resolver.ts                 | 24 ++++++
 src/app/services/courses.service.ts           | 11 ++-
 src/app/services/courses.store.ts             | 86 -------------------
 11 files changed, 116 insertions(+), 107 deletions(-)
 create mode 100644 src/app/home/home-promises.resolver.ts
 create mode 100644 src/app/home/home.model.ts
 create mode 100644 src/app/home/home.resolver.ts
 delete mode 100644 src/app/services/courses.store.ts

diff --git a/package.json b/package.json
index 08d2c8d5..c1cbc47c 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "core-js": "^2.4.1",
     "express": "^4.16.2",
     "moment": "^2.22.2",
-    "rxjs": "6.5.4",
+    "rxjs": "~7.8.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.14.2"
   },
@@ -53,6 +53,6 @@
     "typescript": "5.2.2"
   },
   "engines": {
-    "node": "16"
+
   }
 }
diff --git a/server/get-courses.route.ts b/server/get-courses.route.ts
index cbfff145..f979ac65 100644
--- a/server/get-courses.route.ts
+++ b/server/get-courses.route.ts
@@ -19,7 +19,7 @@ export function getAllCourses(req: Request, res: Response) {
 
              res.status(200).json({payload:Object.values(COURSES)});
 
-        }, 1500);
+        }, 0);
 
 
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4fe05117..1ff145d5 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,11 +5,17 @@ import {AboutComponent} from './about/about.component';
 import {CourseComponent} from './course/course.component';
 import {LoginComponent} from './login/login.component';
 import {SearchLessonsComponent} from './search-lessons/search-lessons.component';
+import {homeResolverPromises} from "./home/home-promises.resolver";
+import {homeResolver} from "./home/home.resolver";
+
 
 const routes: Routes = [
   {
     path: '',
-    component: HomeComponent
+    component: HomeComponent,
+    resolve: {
+      home: homeResolverPromises
+    }
 
   },
   {
diff --git a/src/app/course-dialog/course-dialog.component.ts b/src/app/course-dialog/course-dialog.component.ts
index d5f28637..7d733df3 100644
--- a/src/app/course-dialog/course-dialog.component.ts
+++ b/src/app/course-dialog/course-dialog.component.ts
@@ -8,7 +8,6 @@ import {LoadingService} from '../loading/loading.service';
 import {MessagesService} from '../messages/messages.service';
 import {throwError} from 'rxjs';
 import {catchError} from 'rxjs/operators';
-import {CoursesStore} from '../services/courses.store';
 
 @Component({
     selector: 'course-dialog',
@@ -29,7 +28,7 @@ export class CourseDialogComponent {
         private fb: FormBuilder,
         private dialogRef: MatDialogRef<CourseDialogComponent>,
         @Inject(MAT_DIALOG_DATA) course:Course,
-        private coursesStore: CoursesStore,
+        private coursesStore: CoursesService,
         private messagesService: MessagesService) {
 
         this.course = course;
diff --git a/src/app/home/home-promises.resolver.ts b/src/app/home/home-promises.resolver.ts
new file mode 100644
index 00000000..5ae8ff1b
--- /dev/null
+++ b/src/app/home/home-promises.resolver.ts
@@ -0,0 +1,29 @@
+import {ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot} from "@angular/router";
+import {HomeData} from "./home.model";
+import {inject} from "@angular/core";
+import {CoursesService} from "../services/courses.service";
+import {firstValueFrom} from "rxjs";
+
+
+export const homeResolverPromises: ResolveFn<HomeData> =
+  async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+
+    try {
+
+      const coursesService = inject(CoursesService);
+
+      const beginnerCourses = await firstValueFrom(coursesService.loadCoursesPerCategory("BEGINNER"));
+
+      const advancedCourses = await coursesService.loadCoursesPerCategory("ADVANCED").toPromise();
+
+      return {
+        beginnerCourses,
+        advancedCourses
+      };
+
+    } catch (err) {
+      console.log(err);
+      throw err;
+    }
+
+  }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index e4a1f779..c4bd9a18 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -7,7 +7,7 @@ <h3>All Courses</h3>
 
             <mat-tab label="Beginners">
 
-                <courses-card-list [courses]="beginnerCourses$ | async">
+                <courses-card-list [courses]="beginnerCourses">
 
                 </courses-card-list>
 
@@ -15,7 +15,7 @@ <h3>All Courses</h3>
 
         <mat-tab label="Advanced">
 
-            <courses-card-list [courses]="advancedCourses$ | async">
+            <courses-card-list [courses]="advancedCourses">
 
             </courses-card-list>
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 903cd0fd..6b96b800 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,34 +1,55 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import { Component, OnDestroy, OnInit} from '@angular/core';
 import {Course} from '../model/course';
-import {Observable} from 'rxjs';
-import {CoursesStore} from '../services/courses.store';
+import { Subscription} from 'rxjs';
+import {CoursesService} from '../services/courses.service';
+import {ActivatedRoute,} from "@angular/router";
 
 
 @Component({
   selector: 'home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, OnDestroy {
 
-  beginnerCourses$: Observable<Course[]>;
+  beginnerCourses: Course[];
 
-  advancedCourses$: Observable<Course[]>;
+  advancedCourses: Course[];
 
-  constructor(private coursesStore: CoursesStore) {
+  beginnerCoursesSubscription: Subscription;
+
+  advancedCoursesSubscription: Subscription;
+
+  constructor(
+    private route: ActivatedRoute,
+    private coursesService: CoursesService) {
 
   }
 
   ngOnInit() {
-      this.reloadCourses();
+
+    this.beginnerCourses = this.route.snapshot.data.home.beginnerCourses;
+
+    this.advancedCourses = this.route.snapshot.data.home.advancedCourses;
+
   }
 
   reloadCourses() {
 
-      this.beginnerCourses$ = this.coursesStore.filterByCategory("BEGINNER");
+          this.beginnerCoursesSubscription = this.coursesService.loadCoursesPerCategory("BEGINNER")
+            .subscribe(courses => this.beginnerCourses = courses);
+
+          this.advancedCoursesSubscription = this.coursesService.loadCoursesPerCategory("ADVANCED")
+            .subscribe(courses => this.advancedCourses = courses);
+
+  }
+
+  ngOnDestroy() {
+
+    this.beginnerCoursesSubscription.unsubscribe();
+
+    this.advancedCoursesSubscription.unsubscribe();
 
-      this.advancedCourses$ = this.coursesStore.filterByCategory("ADVANCED");
   }
 
 }
diff --git a/src/app/home/home.model.ts b/src/app/home/home.model.ts
new file mode 100644
index 00000000..3b8a3c55
--- /dev/null
+++ b/src/app/home/home.model.ts
@@ -0,0 +1,7 @@
+import {Course} from "../model/course";
+
+
+export interface HomeData {
+  beginnerCourses: Course[];
+  advancedCourses: Course[];
+}
diff --git a/src/app/home/home.resolver.ts b/src/app/home/home.resolver.ts
new file mode 100644
index 00000000..59e4abf9
--- /dev/null
+++ b/src/app/home/home.resolver.ts
@@ -0,0 +1,24 @@
+import {ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot} from "@angular/router";
+import {HomeData} from "./home.model";
+import {inject} from "@angular/core";
+import {CoursesService} from "../services/courses.service";
+import {forkJoin} from "rxjs";
+import {catchError, tap} from "rxjs/operators";
+
+
+export const homeResolver: ResolveFn<HomeData> =
+  (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+
+    const coursesService = inject(CoursesService);
+
+    return forkJoin({
+      beginnerCourses: coursesService.loadCoursesPerCategory("BEGINNER"),
+      advancedCourses: coursesService.loadCoursesPerCategory("ADVANCED")
+    })
+      .pipe(
+        catchError(err => {
+          console.log(err);
+          throw err;
+        })
+      )
+  }
diff --git a/src/app/services/courses.service.ts b/src/app/services/courses.service.ts
index 907703b1..966d3845 100644
--- a/src/app/services/courses.service.ts
+++ b/src/app/services/courses.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {Course} from '../model/course';
+import {Course, sortCoursesBySeqNo} from '../model/course';
 import {Observable} from 'rxjs';
 import {map, shareReplay} from 'rxjs/operators';
 import {Lesson} from '../model/lesson';
@@ -43,6 +43,15 @@ export class CoursesService {
             );
     }
 
+    loadCoursesPerCategory(category:string): Observable<Course[]> {
+        return this.http.get<Course[]>("/api/courses")
+            .pipe(
+                map(res => res["payload"]),
+                map(courses => courses.filter(course => course.category == category).sort(sortCoursesBySeqNo)),
+                shareReplay()
+            );
+    }
+
 
     saveCourse(courseId:string, changes: Partial<Course>):Observable<any> {
         return this.http.put(`/api/courses/${courseId}`, changes)
diff --git a/src/app/services/courses.store.ts b/src/app/services/courses.store.ts
deleted file mode 100644
index e7aba4b3..00000000
--- a/src/app/services/courses.store.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable, throwError} from 'rxjs';
-import {Course, sortCoursesBySeqNo} from '../model/course';
-import {catchError, map, shareReplay, tap} from 'rxjs/operators';
-import {HttpClient} from '@angular/common/http';
-import {LoadingService} from '../loading/loading.service';
-import {MessagesService} from '../messages/messages.service';
-
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CoursesStore {
-
-    private subject = new BehaviorSubject<Course[]>([]);
-
-    courses$ : Observable<Course[]> = this.subject.asObservable();
-
-    constructor(
-        private http:HttpClient,
-        private loading: LoadingService,
-        private messages: MessagesService) {
-
-        this.loadAllCourses();
-
-    }
-
-    private loadAllCourses() {
-
-        const loadCourses$ = this.http.get<Course[]>('/api/courses')
-            .pipe(
-                map(response => response["payload"]),
-                catchError(err => {
-                    const message = "Could not load courses";
-                    this.messages.showErrors(message);
-                    console.log(message, err);
-                    return throwError(err);
-                }),
-                tap(courses => this.subject.next(courses))
-            );
-
-        this.loading.showLoaderUntilCompleted(loadCourses$)
-            .subscribe();
-
-    }
-
-    saveCourse(courseId:string, changes: Partial<Course>): Observable<any> {
-
-        const courses = this.subject.getValue();
-
-        const index = courses.findIndex(course => course.id == courseId);
-
-        const newCourse: Course = {
-          ...courses[index],
-          ...changes
-        };
-
-        const newCourses: Course[] = courses.slice(0);
-
-        newCourses[index] = newCourse;
-
-        this.subject.next(newCourses);
-
-        return this.http.put(`/api/courses/${courseId}`, changes)
-            .pipe(
-                catchError(err => {
-                    const message = "Could not save course";
-                    console.log(message, err);
-                    this.messages.showErrors(message);
-                    return throwError(err);
-                }),
-                shareReplay()
-            );
-    }
-
-    filterByCategory(category: string): Observable<Course[]> {
-        return this.courses$
-            .pipe(
-                map(courses =>
-                    courses.filter(course => course.category == category)
-                        .sort(sortCoursesBySeqNo)
-                )
-            )
-    }
-
-}

From c52c05377d34315f446e0ec563ca26f82758f626 Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Wed, 31 Jan 2024 15:18:24 +0100
Subject: [PATCH 2/9] Angular 17

---
 src/app/app-routing.module.ts    |  2 +-
 src/app/home/home.component.html |  8 ++------
 src/app/home/home.component.ts   | 17 +++++------------
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1ff145d5..e0ac1f17 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,7 +14,7 @@ const routes: Routes = [
     path: '',
     component: HomeComponent,
     resolve: {
-      home: homeResolverPromises
+      home: ""
     }
 
   },
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index c4bd9a18..94460e15 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -7,18 +7,14 @@ <h3>All Courses</h3>
 
             <mat-tab label="Beginners">
 
-                <courses-card-list [courses]="beginnerCourses">
+                <courses-card-list [courses]="beginnerCourses" />
 
-                </courses-card-list>
 
             </mat-tab>
 
         <mat-tab label="Advanced">
 
-            <courses-card-list [courses]="advancedCourses">
-
-            </courses-card-list>
-
+            <courses-card-list [courses]="advancedCourses" />
 
         </mat-tab>
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 6b96b800..6c7492c7 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit} from '@angular/core';
 import {Course} from '../model/course';
-import { Subscription} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {CoursesService} from '../services/courses.service';
 import {ActivatedRoute,} from "@angular/router";
 
@@ -28,19 +28,12 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
 
-    this.beginnerCourses = this.route.snapshot.data.home.beginnerCourses;
+    this.beginnerCoursesSubscription = this.coursesService.loadCoursesPerCategory("BEGINNER")
+      .subscribe(courses => this.beginnerCourses = courses);
 
-    this.advancedCourses = this.route.snapshot.data.home.advancedCourses;
+    this.advancedCoursesSubscription = this.coursesService.loadCoursesPerCategory("ADVANCED")
+      .subscribe(courses => this.advancedCourses = courses);
 
-  }
-
-  reloadCourses() {
-
-          this.beginnerCoursesSubscription = this.coursesService.loadCoursesPerCategory("BEGINNER")
-            .subscribe(courses => this.beginnerCourses = courses);
-
-          this.advancedCoursesSubscription = this.coursesService.loadCoursesPerCategory("ADVANCED")
-            .subscribe(courses => this.advancedCourses = courses);
 
   }
 

From e4165fcc3d74d6e708db2380b34a56a62be0036d Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Thu, 1 Feb 2024 11:01:46 +0100
Subject: [PATCH 3/9] Angular 17

---
 src/app/home/home.component.html | 27 +++++++++++++--------
 src/app/home/home.component.ts   | 41 +++++++++++++++++++-------------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 94460e15..2a9f07d8 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,26 +1,33 @@
 
-<div class="courses-panel">
+@if({beginnerCourses: (beginnerCourses$ | async),
+  advancedCourses: (advancedCourses$ | async) }; as data) {
 
-        <h3>All Courses</h3>
+  <div class="courses-panel">
 
-        <mat-tab-group>
+    <h3>All Courses</h3>
 
-            <mat-tab label="Beginners">
+    <mat-tab-group>
 
-                <courses-card-list [courses]="beginnerCourses" />
+      <mat-tab label="Beginners">
 
+        <courses-card-list [courses]="data.beginnerCourses" />
 
-            </mat-tab>
 
-        <mat-tab label="Advanced">
+      </mat-tab>
 
-            <courses-card-list [courses]="advancedCourses" />
+      <mat-tab label="Advanced">
 
-        </mat-tab>
+        <courses-card-list [courses]="data.advancedCourses" />
+
+      </mat-tab>
 
     </mat-tab-group>
 
 
 
-</div>
+  </div>
+
+
+
+}
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 6c7492c7..8662dbbf 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -10,15 +10,11 @@ import {ActivatedRoute,} from "@angular/router";
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit, OnDestroy {
+export class HomeComponent implements OnInit {
 
-  beginnerCourses: Course[];
+  beginnerCourses$: Observable<Course[]>;
 
-  advancedCourses: Course[];
-
-  beginnerCoursesSubscription: Subscription;
-
-  advancedCoursesSubscription: Subscription;
+  advancedCourses$: Observable<Course[]>;
 
   constructor(
     private route: ActivatedRoute,
@@ -28,23 +24,34 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
 
-    this.beginnerCoursesSubscription = this.coursesService.loadCoursesPerCategory("BEGINNER")
-      .subscribe(courses => this.beginnerCourses = courses);
-
-    this.advancedCoursesSubscription = this.coursesService.loadCoursesPerCategory("ADVANCED")
-      .subscribe(courses => this.advancedCourses = courses);
+    this.beginnerCourses$ =
+      this.coursesService.loadCoursesPerCategory(
+        "BEGINNER");
 
+    this.advancedCourses$ =
+      this.coursesService.loadCoursesPerCategory(
+        "ADVANCED");
 
   }
 
-  ngOnDestroy() {
 
-    this.beginnerCoursesSubscription.unsubscribe();
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-    this.advancedCoursesSubscription.unsubscribe();
 
-  }
 
-}
 
 

From f86e2ffae2c676ca4558c3efb817b08455e5a2fb Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Thu, 1 Feb 2024 11:11:53 +0100
Subject: [PATCH 4/9] Angular 17

---
 src/app/course/course.component.ts | 49 +++++++++++++++---------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index 2169f729..d230a91f 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -27,49 +27,48 @@ interface CourseData {
 @Component({
   selector: 'course',
   templateUrl: './course.component.html',
-  styleUrls: ['./course.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrls: ['./course.component.css']
 })
 export class CourseComponent implements OnInit {
 
   data$: Observable<CourseData>;
 
+  courseId:number;
 
-  constructor(private route: ActivatedRoute,
-              private coursesService: CoursesService) {
+  constructor(
+    private route: ActivatedRoute,
+    private coursesService: CoursesService) {
 
+    this.courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
 
   }
 
   ngOnInit() {
 
-        const courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
+    this.loadData()
+      .then(() => console.log("Data loaded"));
 
-        const course$ = this.coursesService.loadCourseById(courseId)
-            .pipe(
-                startWith(null)
-            );
-
-        const lessons$ = this.coursesService.loadAllCourseLessons(courseId)
-            .pipe(
-                startWith([])
-            );
+  }
 
-        this.data$ = combineLatest([course$, lessons$])
-            .pipe(
-                map(([course, lessons]) => {
-                    return {
-                        course,
-                        lessons
-                    }
-                }),
-                tap(console.log)
-            );
 
+  async loadData() {
 
-  }
+    const course$ = this.coursesService.loadCourseById(this.courseId);
 
+    const lessons$ = this.coursesService.loadAllCourseLessons(this.courseId);
 
+    this.data$ = combineLatest([course$, lessons$])
+      .pipe(
+        startWith([null, []]),
+        map(([course, lessons]) => {
+          return {
+            course,
+            lessons
+          }
+        }),
+        tap(console.log)
+      );
+  }
 }
 
 

From 7758f7a9d617eef00f5a2079d4d72d1a38fdcd5d Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Thu, 1 Feb 2024 17:04:05 +0100
Subject: [PATCH 5/9] Angular 17

---
 src/app/app-routing.module.ts          |  2 +-
 src/app/course/course.component.html   | 37 +++++++++++++-------------
 src/app/course/course.component.ts     | 13 +++------
 src/app/home/home-promises.resolver.ts |  4 +--
 src/app/home/home.component.html       |  7 ++---
 src/app/home/home.component.ts         | 20 +++++++-------
 src/app/services/courses.service.ts    |  5 ++--
 7 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e0ac1f17..d53927f2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,7 +14,7 @@ const routes: Routes = [
     path: '',
     component: HomeComponent,
     resolve: {
-      home: ""
+      home: homeResolver
     }
 
   },
diff --git a/src/app/course/course.component.html b/src/app/course/course.component.html
index d5b819cb..8040bde1 100644
--- a/src/app/course/course.component.html
+++ b/src/app/course/course.component.html
@@ -1,32 +1,33 @@
-<ng-container *ngIf="(data$ | async) as data">
+@if (data$ | async; as data) {
 
-    <div class="course">
+  <div class="course">
 
-        <h2>{{data.course?.description}}</h2>
+    <h2>{{data.course?.description}}</h2>
 
-        <img class="course-thumbnail" [src]="data.course?.iconUrl" *ngIf="data.course">
+    <img class="course-thumbnail" [src]="data.course?.iconUrl" *ngIf="data.course">
 
-        <table class="lessons-table mat-elevation-z7" *ngIf="data.lessons.length">
+    <table class="lessons-table mat-elevation-z7" *ngIf="data?.lessons?.length">
 
-            <thead>
+      <thead>
 
-            <th>#</th>
-            <th>Description</th>
-            <th>Duration</th>
+      <th>#</th>
+      <th>Description</th>
+      <th>Duration</th>
 
-            </thead>
+      </thead>
 
-            <tr class="lesson-row" *ngFor="let lesson of data.lessons">
-                <td class="seqno-cell">{{lesson.seqNo}}</td>
-                <td class="description-cell">{{lesson.description}}</td>
-                <td class="duration-cell">{{lesson.duration}}</td>
-            </tr>
+      <tr class="lesson-row" *ngFor="let lesson of data.lessons">
+        <td class="seqno-cell">{{lesson.seqNo}}</td>
+        <td class="description-cell">{{lesson.description}}</td>
+        <td class="duration-cell">{{lesson.duration}}</td>
+      </tr>
 
-        </table>
+    </table>
 
-    </div>
+  </div>
+
+}
 
-</ng-container>
 
 
 
diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index d230a91f..8fc75b5a 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -45,27 +45,20 @@ export class CourseComponent implements OnInit {
 
   ngOnInit() {
 
-    this.loadData()
-      .then(() => console.log("Data loaded"));
+    this.loadData();
 
   }
 
 
-  async loadData() {
+  loadData() {
 
     const course$ = this.coursesService.loadCourseById(this.courseId);
 
     const lessons$ = this.coursesService.loadAllCourseLessons(this.courseId);
 
-    this.data$ = combineLatest([course$, lessons$])
+    this.data$ = combineLatest({course: course$, lessons: lessons$})
       .pipe(
         startWith([null, []]),
-        map(([course, lessons]) => {
-          return {
-            course,
-            lessons
-          }
-        }),
         tap(console.log)
       );
   }
diff --git a/src/app/home/home-promises.resolver.ts b/src/app/home/home-promises.resolver.ts
index 5ae8ff1b..e4bab904 100644
--- a/src/app/home/home-promises.resolver.ts
+++ b/src/app/home/home-promises.resolver.ts
@@ -12,9 +12,9 @@ export const homeResolverPromises: ResolveFn<HomeData> =
 
       const coursesService = inject(CoursesService);
 
-      const beginnerCourses = await firstValueFrom(coursesService.loadCoursesPerCategory("BEGINNER"));
+      const beginnerCourses = await coursesService.loadCoursesPerCategory("BEGINNER");
 
-      const advancedCourses = await coursesService.loadCoursesPerCategory("ADVANCED").toPromise();
+      const advancedCourses = await coursesService.loadCoursesPerCategory("ADVANCED");
 
       return {
         beginnerCourses,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 2a9f07d8..a2ed0e5e 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,6 +1,4 @@
 
-@if({beginnerCourses: (beginnerCourses$ | async),
-  advancedCourses: (advancedCourses$ | async) }; as data) {
 
   <div class="courses-panel">
 
@@ -10,14 +8,14 @@ <h3>All Courses</h3>
 
       <mat-tab label="Beginners">
 
-        <courses-card-list [courses]="data.beginnerCourses" />
+        <courses-card-list [courses]="beginnerCourses" />
 
 
       </mat-tab>
 
       <mat-tab label="Advanced">
 
-        <courses-card-list [courses]="data.advancedCourses" />
+        <courses-card-list [courses]="advancedCourses" />
 
       </mat-tab>
 
@@ -29,5 +27,4 @@ <h3>All Courses</h3>
 
 
 
-}
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 8662dbbf..9014cf82 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -12,25 +12,23 @@ import {ActivatedRoute,} from "@angular/router";
 })
 export class HomeComponent implements OnInit {
 
-  beginnerCourses$: Observable<Course[]>;
+  beginnerCourses: Course[];
 
-  advancedCourses$: Observable<Course[]>;
+  advancedCourses: Course[];
 
   constructor(
-    private route: ActivatedRoute,
-    private coursesService: CoursesService) {
+    private route: ActivatedRoute) {
 
   }
 
   ngOnInit() {
 
-    this.beginnerCourses$ =
-      this.coursesService.loadCoursesPerCategory(
-        "BEGINNER");
-
-    this.advancedCourses$ =
-      this.coursesService.loadCoursesPerCategory(
-        "ADVANCED");
+    this.route.data.subscribe(
+      data => {
+        this.beginnerCourses = data['home'].beginnerCourses;
+        this.advancedCourses = data['home'].advancedCourses;
+      }
+    );
 
   }
 
diff --git a/src/app/services/courses.service.ts b/src/app/services/courses.service.ts
index 966d3845..deca1009 100644
--- a/src/app/services/courses.service.ts
+++ b/src/app/services/courses.service.ts
@@ -43,13 +43,14 @@ export class CoursesService {
             );
     }
 
-    loadCoursesPerCategory(category:string): Observable<Course[]> {
+    loadCoursesPerCategory(category:string){
         return this.http.get<Course[]>("/api/courses")
             .pipe(
                 map(res => res["payload"]),
                 map(courses => courses.filter(course => course.category == category).sort(sortCoursesBySeqNo)),
                 shareReplay()
-            );
+
+            ).toPromise();
     }
 
 

From 6d07fd0c714ef7a2267ef614d5f2e20c547f5ef7 Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Thu, 1 Feb 2024 17:41:54 +0100
Subject: [PATCH 6/9] Angular 17

---
 src/app/course/course.component.ts | 39 ++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index 8fc75b5a..f47d0406 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -43,25 +43,44 @@ export class CourseComponent implements OnInit {
 
   }
 
-  ngOnInit() {
 
-    this.loadData();
 
-  }
 
 
-  loadData() {
+  ngOnInit() {
 
-    const course$ = this.coursesService.loadCourseById(this.courseId);
+    const course$ = this.coursesService
+          .loadCourseById(
+            this.courseId);
 
-    const lessons$ = this.coursesService.loadAllCourseLessons(this.courseId);
+    const lessons$ = this.coursesService
+            .loadAllCourseLessons(
+              this.courseId);
 
-    this.data$ = combineLatest({course: course$, lessons: lessons$})
+    this.data$ = combineLatest({
+      course: course$,
+      lessons: lessons$
+    })
       .pipe(
-        startWith([null, []]),
-        tap(console.log)
-      );
+        startWith({
+          course: null,
+          lessons: []
+        }));
   }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 }
 
 

From b8213dcffa73895cccdd1511b50809f32e71b6ab Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Fri, 2 Feb 2024 15:53:36 +0100
Subject: [PATCH 7/9] Angular 17

---
 src/app/course/course.component.html | 10 +++----
 src/app/course/course.component.ts   | 44 ++++++++++++++--------------
 src/app/home/home.resolver.ts        |  2 ++
 src/app/services/courses.service.ts  |  8 +++--
 4 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/app/course/course.component.html b/src/app/course/course.component.html
index 8040bde1..7b151322 100644
--- a/src/app/course/course.component.html
+++ b/src/app/course/course.component.html
@@ -1,12 +1,11 @@
-@if (data$ | async; as data) {
 
   <div class="course">
 
-    <h2>{{data.course?.description}}</h2>
+    <h2>{{course?.description}}</h2>
 
-    <img class="course-thumbnail" [src]="data.course?.iconUrl" *ngIf="data.course">
+    <img class="course-thumbnail" [src]="course?.iconUrl" *ngIf="course">
 
-    <table class="lessons-table mat-elevation-z7" *ngIf="data?.lessons?.length">
+    <table class="lessons-table mat-elevation-z7" *ngIf="lessons?.length">
 
       <thead>
 
@@ -16,7 +15,7 @@ <h2>{{data.course?.description}}</h2>
 
       </thead>
 
-      <tr class="lesson-row" *ngFor="let lesson of data.lessons">
+      <tr class="lesson-row" *ngFor="let lesson of lessons">
         <td class="seqno-cell">{{lesson.seqNo}}</td>
         <td class="description-cell">{{lesson.description}}</td>
         <td class="duration-cell">{{lesson.duration}}</td>
@@ -26,7 +25,6 @@ <h2>{{data.course?.description}}</h2>
 
   </div>
 
-}
 
 
 
diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index f47d0406..c0b8f895 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -31,42 +31,31 @@ interface CourseData {
 })
 export class CourseComponent implements OnInit {
 
-  data$: Observable<CourseData>;
+  course: Course;
+
+  lessons: Lesson[];
 
   courseId:number;
 
-  constructor(
-    private route: ActivatedRoute,
-    private coursesService: CoursesService) {
 
-    this.courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
 
+
+
+
+
+   ngOnInit() {
+
+    this.course = this.route.snapshot.data.home.course;
+    this.lessons = this.route.snapshot.data.home.lessons;
   }
 
 
 
 
 
-  ngOnInit() {
 
-    const course$ = this.coursesService
-          .loadCourseById(
-            this.courseId);
 
-    const lessons$ = this.coursesService
-            .loadAllCourseLessons(
-              this.courseId);
 
-    this.data$ = combineLatest({
-      course: course$,
-      lessons: lessons$
-    })
-      .pipe(
-        startWith({
-          course: null,
-          lessons: []
-        }));
-  }
 
 
 
@@ -79,6 +68,17 @@ export class CourseComponent implements OnInit {
 
 
 
+  constructor(
+    private route: ActivatedRoute,
+    private coursesService: CoursesService) {
+
+    this.courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
+
+  }
+
+
+
+
 
 
 }
diff --git a/src/app/home/home.resolver.ts b/src/app/home/home.resolver.ts
index 59e4abf9..1acfc805 100644
--- a/src/app/home/home.resolver.ts
+++ b/src/app/home/home.resolver.ts
@@ -4,6 +4,7 @@ import {inject} from "@angular/core";
 import {CoursesService} from "../services/courses.service";
 import {forkJoin} from "rxjs";
 import {catchError, tap} from "rxjs/operators";
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 
 export const homeResolver: ResolveFn<HomeData> =
@@ -16,6 +17,7 @@ export const homeResolver: ResolveFn<HomeData> =
       advancedCourses: coursesService.loadCoursesPerCategory("ADVANCED")
     })
       .pipe(
+        takeUntilDestroyed(),
         catchError(err => {
           console.log(err);
           throw err;
diff --git a/src/app/services/courses.service.ts b/src/app/services/courses.service.ts
index deca1009..36864ee7 100644
--- a/src/app/services/courses.service.ts
+++ b/src/app/services/courses.service.ts
@@ -19,10 +19,11 @@ export class CoursesService {
        return this.http.get<Course>(`/api/courses/${courseId}`)
             .pipe(
               shareReplay()
-            );
+            )
+         .toPromise();
     }
 
-    loadAllCourseLessons(courseId:number): Observable<Lesson[]> {
+    loadAllCourseLessons(courseId:number) {
         return this.http.get<Lesson[]>('/api/lessons', {
             params: {
                 pageSize: "10000",
@@ -32,7 +33,8 @@ export class CoursesService {
             .pipe(
                 map(res => res["payload"]),
                 shareReplay()
-            );
+            )
+          .toPromise();
     }
 
     loadAllCourses(): Observable<Course[]> {

From 05f09b2a522964e89040bb2fbb4becc0c3f1e0d0 Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Tue, 6 Feb 2024 15:34:33 +0100
Subject: [PATCH 8/9] Angular 17

---
 src/app/course-dialog/course-dialog.component.ts | 9 +++++++--
 src/app/course/course.component.ts               | 6 ------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/app/course-dialog/course-dialog.component.ts b/src/app/course-dialog/course-dialog.component.ts
index 7d733df3..0f7b8c47 100644
--- a/src/app/course-dialog/course-dialog.component.ts
+++ b/src/app/course-dialog/course-dialog.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, Inject} from '@angular/core';
+import {AfterViewInit, Component, DestroyRef, inject, Inject} from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import {Course} from "../model/course";
 import {FormBuilder, Validators, FormGroup} from "@angular/forms";
@@ -8,6 +8,7 @@ import {LoadingService} from '../loading/loading.service';
 import {MessagesService} from '../messages/messages.service';
 import {throwError} from 'rxjs';
 import {catchError} from 'rxjs/operators';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 @Component({
     selector: 'course-dialog',
@@ -29,7 +30,8 @@ export class CourseDialogComponent {
         private dialogRef: MatDialogRef<CourseDialogComponent>,
         @Inject(MAT_DIALOG_DATA) course:Course,
         private coursesStore: CoursesService,
-        private messagesService: MessagesService) {
+        private messagesService: MessagesService,
+        private destroyRef: DestroyRef) {
 
         this.course = course;
 
@@ -47,6 +49,9 @@ export class CourseDialogComponent {
       const changes = this.form.value;
 
       this.coursesStore.saveCourse(this.course.id, changes)
+        .pipe(
+          takeUntilDestroyed(this.destroyRef)
+        )
           .subscribe();
 
       this.dialogRef.close(changes);
diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index c0b8f895..cc403621 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -37,12 +37,6 @@ export class CourseComponent implements OnInit {
 
   courseId:number;
 
-
-
-
-
-
-
    ngOnInit() {
 
     this.course = this.route.snapshot.data.home.course;

From ead80392d267d47b9a0960db55848029dc77e365 Mon Sep 17 00:00:00 2001
From: vasco <jhades.dev@gmail.com>
Date: Fri, 9 Feb 2024 13:03:20 +0100
Subject: [PATCH 9/9] Angular 17

---
 .../courses-card-list.component.ts            |  4 ++-
 src/app/home/home.component.css               | 10 +++---
 src/app/home/home.component.html              |  3 ++
 src/app/home/home.component.ts                | 34 ++++++++++++-------
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/app/courses-card-list/courses-card-list.component.ts b/src/app/courses-card-list/courses-card-list.component.ts
index 6e0f5ea2..21819d18 100644
--- a/src/app/courses-card-list/courses-card-list.component.ts
+++ b/src/app/courses-card-list/courses-card-list.component.ts
@@ -4,11 +4,13 @@ import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
 import {filter, tap} from 'rxjs/operators';
 
+
+
 @Component({
   selector: 'courses-card-list',
   templateUrl: './courses-card-list.component.html',
   styleUrls: ['./courses-card-list.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CoursesCardListComponent implements OnInit {
 
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index aa8317dd..45c3db36 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -1,8 +1,10 @@
 
-
 .courses-panel {
-    max-width: 400px;
-    margin: 0 auto;
+  max-width: 400px;
+  margin: 0 auto;
 }
 
-
+.modify {
+  margin-top: 50px;
+  margin-left: 50px;
+}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index a2ed0e5e..f1f01ff3 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,4 +1,7 @@
 
+  <button class="modify" mat-raised-button color="primary" (click)="onModify()">
+    Modify Data
+  </button>
 
   <div class="courses-panel">
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 9014cf82..cc5b1392 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,10 +1,7 @@
-import { Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Course} from '../model/course';
-import {Observable, Subscription} from 'rxjs';
-import {CoursesService} from '../services/courses.service';
 import {ActivatedRoute,} from "@angular/router";
 
-
 @Component({
   selector: 'home',
   templateUrl: './home.component.html',
@@ -16,23 +13,32 @@ export class HomeComponent implements OnInit {
 
   advancedCourses: Course[];
 
-  constructor(
-    private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute) {
 
   }
 
   ngOnInit() {
 
-    this.route.data.subscribe(
-      data => {
-        this.beginnerCourses = data['home'].beginnerCourses;
-        this.advancedCourses = data['home'].advancedCourses;
-      }
-    );
+    this.beginnerCourses = this.route.snapshot.data['home'].beginnerCourses;
+
+    this.advancedCourses = this.route.snapshot.data['home'].advancedCourses;
 
   }
 
 
+  onModify() {
+
+    const newCourses = [...this.beginnerCourses];
+
+    newCourses[0] = {
+      ...newCourses[0],
+      description: "Angular Core Deep Dive"
+    }
+
+    this.beginnerCourses = newCourses;
+
+  }
+
 }
 
 
@@ -50,6 +56,10 @@ export class HomeComponent implements OnInit {
 
 
 
+
+
+
+
 
 
 
