state managment

server/db.json

@@ -2,10 +2,17 @@
   "courses": [
     {
       "id": 1,
-      "title": "Angular 9 Fundamentals",
+      "title": "Learn the fundamentals of ",
       "description": "Learn the fundamentals of Angular 9",
       "percentComplete": 26,
       "favorite": true
+    },
+    {
+      "id": 4,
+      "title": "Worship will sentence",
+      "description": "Learn the fundamentals of Angular 9",
+      "percentComplete": 69,
+      "favorite": true
     }
   ]
 }

src/app/app.module.ts

@@ -11,6 +11,8 @@ import { CoursesComponent } from './courses/courses.component';
 import { FormsModule } from '@angular/forms';
 import { CoursesService } from './shared/services/courses.service';
 import { LessonsService } from './shared/services/lessons.service';
+import { CoursesListComponent } from './courses/courses-list/courses-list.component';
+import { CoursesDetailsComponent } from './courses/courses-details/courses-details.component';
 
 @NgModule({
   imports: [
@@ -21,7 +23,7 @@ import { LessonsService } from './shared/services/lessons.service';
     MaterialModule,
     HttpClientModule,
   ],
-  declarations: [AppComponent, HomeComponent, CoursesComponent],
+  declarations: [AppComponent, HomeComponent, CoursesComponent, CoursesListComponent, CoursesDetailsComponent],
   providers: [CoursesService, LessonsService],
   bootstrap: [AppComponent],
 })

src/app/courses/courses-details/courses-details.component.html

@@ -0,0 +1,37 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title><span *ngIf="course.id; else noSelection">{{course.title}}</span>
+            <ng-template #noSelection>Select Course</ng-template>
+            Select Course
+        </mat-card-title>
+    </mat-card-header>
+    <form #form="ngForm" (submit)="saved.emit(course)">
+        <mat-card-content>
+            <mat-form-field>
+                <input matInput placeholder="title"
+                type="text" name="title"required
+                    [(ngModel)]="course.title">
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput placeholder="Description"
+                type="text" name="title" 
+                    [(ngModel)]="course.description">
+            </mat-form-field>
+            <section>
+                <h4>{{course.percentComplete}}% Complete</h4>
+                <mat-slider class="full-width" 
+                min="0" max="100" 
+                name="percentComplete" 
+                thumbLabel
+                [(ngModel)]="course.percentComplete"></mat-slider>
+            </section>
+            <mat-checkbox name="favorite" [(ngModel)]="course.favorite" ></mat-checkbox>  //Na
+        </mat-card-content>
+        <mat-card-actions>
+            <button [disabled]="form.invalid" type="submit" mat-button color="primary">Submit</button>
+            <button type="button" mat-button (click)="cancelled.emit()">CANCEL</button>
+        </mat-card-actions>
+    </form>
+    <pre>{{form.value | json}}</pre>
+    <pre>{{form.valid | json}}</pre>
+</mat-card>

src/app/courses/courses-details/courses-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoursesDetailsComponent } from './courses-details.component';
+
+describe('CoursesDetailsComponent', () => {
+  let component: CoursesDetailsComponent;
+  let fixture: ComponentFixture<CoursesDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CoursesDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoursesDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/courses/courses-details/courses-details.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-courses-details',
+  templateUrl: './courses-details.component.html',
+  styleUrls: ['./courses-details.component.scss'],
+})
+export class CoursesDetailsComponent implements OnInit {
+  @Input() course;
+  @Output() saved = new EventEmitter();
+  @Output() cancelled = new EventEmitter();
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/courses/courses-list/courses-list.component.html

@@ -0,0 +1,19 @@
+<mat-card>
+<mat-card-header>
+    <mat-card-title>
+    Course List
+    </mat-card-title>
+</mat-card-header>
+<mat-card-content>
+    <mat-list>
+        <mat-list-item *ngFor="let course of courses" (click)="selected.emit(course)">
+        <h3 matLine>{{course.title}}</h3>
+        <p matLine>{{course.description}}</p>
+        <button mat-icon-button color="warn" (click)="deleted.emit(course.id);$event.stopImmediatePropagation()">
+            <mat-icon>delete</mat-icon>
+        </button>
+        </mat-list-item>
+    </mat-list>
+
+</mat-card-content>
+</mat-card>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoursesListComponent } from './courses-list.component';
+
+describe('CoursesListComponent', () => {
+  let component: CoursesListComponent;
+  let fixture: ComponentFixture<CoursesListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CoursesListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoursesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-courses-list',
+  templateUrl: './courses-list.component.html',
+  styleUrls: ['./courses-list.component.scss'],
+})
+export class CoursesListComponent implements OnInit {
+  @Input() courses;
+  @Output() selected = new EventEmitter();
+  @Output() deleted = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/courses/courses.component.html

@@ -1,66 +1,17 @@
 <div class="courses-containers">
     <div class="courses-list">
-        <mat-card>
-        <mat-card-header>
-            <mat-card-title>
-            Course List
-            </mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-           <mat-list>
-               <mat-list-item *ngFor="let course of courses" (click)="onClick(course)">
-                <h3 matLine>{{course.title}}</h3>
-                <p matLine>{{course.description}}</p>
-
-                <button mat-icon-button color="warn" (click)="deleteCourse(course.id); $event.stopImmediatePropagation()">
-                    <mat-icon>delete</mat-icon>
-                </button>
-               </mat-list-item>
-           </mat-list>
-
-        </mat-card-content>
-        </mat-card>
+        <app-courses-list [courses]="courses"
+        (selected)="onClick($event)"
+        (deleted)="deleteCourse($event)"
+        ></app-courses-list>
     </div>
 
     <div class="course-details">
-        <mat-card>
-            <mat-card-header>
-                <mat-card-title>
-                    <span *ngIf="tempData; else noSelection">{{tempData.title}}</span>
-                    <ng-template #noSelection>Select Course</ng-template>
-                    Select Course
-                </mat-card-title>
-            </mat-card-header>
-            <form #form="ngForm" (submit)="saveCourse(tempData)">
-                <mat-card-content>
-                    <mat-form-field>
-                        <input matInput placeholder="title"
-                        type="text" name="title"required
-                         [(ngModel)]="tempData.title">
-                    </mat-form-field>
-                    <mat-form-field>
-                        <input matInput placeholder="Description"
-                        type="text" name="title" 
-                         [(ngModel)]="tempData.description">
-                    </mat-form-field>
-                    <section>
-                        <h4>{{tempData.percentComplete}}% Complete</h4>
-                        <mat-slider class="full-width" 
-                        min="0" max="100" 
-                        name="percentComplete" 
-                        thumbLabel
-                        [(ngModel)]="tempData.percentComplete"></mat-slider>
-                    </section>
-                    <mat-checkbox name="favorite" [(ngModel)]="tempData.favorite" ></mat-checkbox>  //Na
-                </mat-card-content>
-                <mat-card-actions>
-                <!-- COURSE ACTIONS -->
-                    <button [disabled]="form.invalid" type="submit" mat-button color="primary">Submit</button>
-                    <button type="button" mat-button (click)="cancel()">CANCEL</button>
-                </mat-card-actions>
-            </form>
-            <pre>{{form.value | json}}</pre>
-            <pre>{{form.valid | json}}</pre>
-        </mat-card>
+        <app-courses-details
+            [course]="tempData"
+            (saved)="saveCourse($event)"
+            (cancelled)="cancel()"
+        ></app-courses-details>
+
     </div>
 </div>

src/app/courses/courses.component.ts

@@ -15,9 +15,10 @@ export class CoursesComponent implements OnInit {
   ngOnInit(): void {
     //It is like a construtor and it gets called initially when all hte binding are satisfied
     this.resetSelectedCourse();
-    this.courseService
-      .all() //we do All instead of courses is becasue js dosent have concept of Private
-      .subscribe((courses) => (this.courses = courses));
+    this.loadCourses();
+    // this.courseService
+    //   .all() //we do All instead of courses is becasue js dosent have concept of Private
+    //   .subscribe((courses) => (this.courses = courses));
     //We are doing this to call the EmptyObject first because
     //during compiletTime we are binding an itself empty object instead of null Object
   }
@@ -32,21 +33,39 @@ export class CoursesComponent implements OnInit {
     };
     this.tempData = emptyCourse;
   }
+
   onClick(course) {
+    //Select COurse
     console.log(course);
     this.tempData = course;
   }
+
+  loadCourses() {
+    this.courseService.all().subscribe((courses) => (this.courses = courses));
+  }
+
+  refreshCourses() {
+    this.resetSelectedCourse();
+    this.loadCourses();
+  }
+
   saveCourse(course) {
     if (course.id) {
       //If the ID exists update
-      this.courseService.update(course);
+      this.courseService
+        .update(course)
+        .subscribe((result) => this.refreshCourses());
     } else {
       //if not create
-      this.courseService.create(course);
+      this.courseService
+        .create(course)
+        .subscribe((res) => this.refreshCourses());
     }
   }
   deleteCourse(courseId) {
-    this.courseService.deleteCourse(courseId);
+    this.courseService
+      .deleteCourse(courseId)
+      .subscribe((result) => this.refreshCourses());
   }
   cancel() {
     this.resetSelectedCourse();

src/app/shared/services/courses.service.ts

@@ -9,42 +9,35 @@ const BASE_URL = 'http://localhost:3000/';
 })
 export class CoursesService {
   private model = 'courses';
-  courses = [
-    {
-      id: 1,
-      title: 'Angular 9 Fundamentals',
-      description: 'Learn the fundamentals of Angular 9',
-      percentComplete: 26,
-      favorite: true,
-    },
-    {
-      id: 2,
-      title: 'JAvaScript The really Hard parts',
-      description: 'Worship will sentence',
-      percentComplete: 56,
-      favorite: true,
-    },
-  ];
 
   constructor(private http: HttpClient) {}
 
   all() {
-    return this.http.get(`${BASE_URL}${this.model}`);
+    return this.http.get(this.getUrl());
   }
 
   find(courseId) {
-    console.log(courseId);
+    return this.http.get(this.getUrlById(courseId));
   }
 
   create(course) {
-    console.log('CREATE COURSE', course);
+    return this.http.post(this.getUrl(), course);
   }
 
   update(course) {
-    console.log('CREATE COURSE', course);
+    return this.http.put(this.getUrlById(course.id), course);
+    console.log('UPDATED COURSE', course);
   }
 
   deleteCourse(course) {
-    console.log('CREATE COURSE', course);
+    return this.http.delete(this.getUrlById(course));
+  }
+
+  private getUrl() {
+    return `${BASE_URL}${this.model}`;
+  }
+
+  private getUrlById(id) {
+    return `${this.getUrl()}/${id}`;
   }
 }