From c328e862ce58d2dce33c19c802fae60c3ca2cf07 Mon Sep 17 00:00:00 2001
From: Olga Bouin <olga.bouin@adeo.com>
Date: Mon, 8 Nov 2021 11:36:55 +0100
Subject: [PATCH 1/2] feat: add routing and 404 page

---
 src/app/app-routing.module.ts                 |  8 +++++-
 src/app/app.component.html                    | 10 +++++++-
 src/app/app.module.ts                         |  8 ++++--
 src/app/chuck/chuck.component.css             |  0
 src/app/chuck/chuck.component.html            |  1 +
 src/app/chuck/chuck.component.spec.ts         | 25 +++++++++++++++++++
 src/app/chuck/chuck.component.ts              | 15 +++++++++++
 .../page-not-found.component.css              |  3 +++
 .../page-not-found.component.html             |  3 +++
 .../page-not-found.component.spec.ts          | 25 +++++++++++++++++++
 .../page-not-found.component.ts               | 18 +++++++++++++
 11 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 src/app/chuck/chuck.component.css
 create mode 100644 src/app/chuck/chuck.component.html
 create mode 100644 src/app/chuck/chuck.component.spec.ts
 create mode 100644 src/app/chuck/chuck.component.ts
 create mode 100644 src/app/page-not-found/page-not-found.component.css
 create mode 100644 src/app/page-not-found/page-not-found.component.html
 create mode 100644 src/app/page-not-found/page-not-found.component.spec.ts
 create mode 100644 src/app/page-not-found/page-not-found.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06c7342..d8b8855 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,8 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import {ChuckComponent} from './chuck/chuck.component';
+import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'chuck', component: ChuckComponent},
+  { path: '',   redirectTo: '/chuck', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1a58b6a..c038fe4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,9 @@
-<app-comments></app-comments>
\ No newline at end of file
+<app-comments></app-comments>
+<h1>Router test</h1>
+<nav>
+  <ul>
+    <li><a routerLink="/chuck" routerLinkActive="active">Chuck Norris</a></li>
+  </ul>
+</nav>
+<!-- The routed views render in the <router-outlet>-->
+<router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4d7f569..9729e6d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,14 +6,18 @@ import { AppComponent } from './app.component';
 import { BestPracticeComponent } from './best-practice/best-practice.component'
 import { ProductComponent } from './products/product/product.component'
 import { FormsModule } from '@angular/forms';
-import { CommentModule } from './comments/comments.module'
+import { CommentModule } from './comments/comments.module';
+import { ChuckComponent } from './chuck/chuck.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
 
 
 @NgModule({
   declarations: [
     AppComponent,
     BestPracticeComponent,
-    ProductComponent
+    ProductComponent,
+    ChuckComponent,
+    PageNotFoundComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/chuck/chuck.component.css b/src/app/chuck/chuck.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/chuck/chuck.component.html b/src/app/chuck/chuck.component.html
new file mode 100644
index 0000000..58c555e
--- /dev/null
+++ b/src/app/chuck/chuck.component.html
@@ -0,0 +1 @@
+<p>chuck works!</p>
diff --git a/src/app/chuck/chuck.component.spec.ts b/src/app/chuck/chuck.component.spec.ts
new file mode 100644
index 0000000..e62b0b5
--- /dev/null
+++ b/src/app/chuck/chuck.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChuckComponent } from './chuck.component';
+
+describe('ChuckComponent', () => {
+  let component: ChuckComponent;
+  let fixture: ComponentFixture<ChuckComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChuckComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChuckComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/chuck/chuck.component.ts b/src/app/chuck/chuck.component.ts
new file mode 100644
index 0000000..b573ada
--- /dev/null
+++ b/src/app/chuck/chuck.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-chuck',
+  templateUrl: './chuck.component.html',
+  styleUrls: ['./chuck.component.css']
+})
+export class ChuckComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/page-not-found/page-not-found.component.css b/src/app/page-not-found/page-not-found.component.css
new file mode 100644
index 0000000..8aaffe2
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.css
@@ -0,0 +1,3 @@
+.title {
+  font-size: xxx-large;
+}
diff --git a/src/app/page-not-found/page-not-found.component.html b/src/app/page-not-found/page-not-found.component.html
new file mode 100644
index 0000000..ee9859e
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.html
@@ -0,0 +1,3 @@
+<div class="title">Oops!</div>
+<div>404 - PAGE NOT FOUND</div>
+<button (click)="btnClick();">GO TO HOMEPAGE</button>
diff --git a/src/app/page-not-found/page-not-found.component.spec.ts b/src/app/page-not-found/page-not-found.component.spec.ts
new file mode 100644
index 0000000..697a946
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageNotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts
new file mode 100644
index 0000000..c98a233
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.css']
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+  btnClick = function() {
+    this.router.navigateByUrl('/chuck');
+  };
+}

From d76f73799601f2bf6400eb17ea6d2b732b7c432d Mon Sep 17 00:00:00 2001
From: Olga Bouin <olga.bouin@adeo.com>
Date: Mon, 8 Nov 2021 15:11:44 +0100
Subject: [PATCH 2/2] feat: chuck norris jokes api call

---
 src/app/app.component.html          |  2 +-
 src/app/app.module.ts               | 13 +++++++------
 src/app/chuck/chuck.component.html  |  7 ++++++-
 src/app/chuck/chuck.component.ts    | 12 +++++++++++-
 src/app/chuck/chuck.service.spec.ts | 12 ++++++++++++
 src/app/chuck/chuck.service.ts      | 17 +++++++++++++++++
 src/app/chuck/joke.model.spec.ts    |  7 +++++++
 src/app/chuck/joke.model.ts         |  3 +++
 8 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 src/app/chuck/chuck.service.spec.ts
 create mode 100644 src/app/chuck/chuck.service.ts
 create mode 100644 src/app/chuck/joke.model.spec.ts
 create mode 100644 src/app/chuck/joke.model.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c038fe4..4c8e61e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <app-comments></app-comments>
-<h1>Router test</h1>
+<h1>Router & API test</h1>
 <nav>
   <ul>
     <li><a routerLink="/chuck" routerLinkActive="active">Chuck Norris</a></li>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9729e6d..a466d27 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,13 +3,13 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BestPracticeComponent } from './best-practice/best-practice.component'
-import { ProductComponent } from './products/product/product.component'
+import { BestPracticeComponent } from './best-practice/best-practice.component';
+import { ProductComponent } from './products/product/product.component';
 import { FormsModule } from '@angular/forms';
 import { CommentModule } from './comments/comments.module';
 import { ChuckComponent } from './chuck/chuck.component';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
-
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -17,13 +17,14 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
     BestPracticeComponent,
     ProductComponent,
     ChuckComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    CommentModule
+    CommentModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/chuck/chuck.component.html b/src/app/chuck/chuck.component.html
index 58c555e..218d04a 100644
--- a/src/app/chuck/chuck.component.html
+++ b/src/app/chuck/chuck.component.html
@@ -1 +1,6 @@
-<p>chuck works!</p>
+<button (click)="getNewJoke()">Get new Joke</button>
+<ul>
+  <li *ngFor="let joke of jokes">
+    <span>{{joke.randomJoke}}</span>
+  </li>
+</ul>
diff --git a/src/app/chuck/chuck.component.ts b/src/app/chuck/chuck.component.ts
index b573ada..687b7a6 100644
--- a/src/app/chuck/chuck.component.ts
+++ b/src/app/chuck/chuck.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {ChuckService} from './chuck.service';
+import {Joke} from './joke.model';
 
 @Component({
   selector: 'app-chuck',
@@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ChuckComponent implements OnInit {
 
-  constructor() { }
+  jokes: Joke[] = [];
+
+  constructor(private chuckService: ChuckService) { }
 
   ngOnInit() {
   }
 
+  getNewJoke(): void {
+    this.chuckService.getJokes().subscribe({next(data) {this.jokes = [{randomJoke: data.value}];
+                                                        console.log('joke in subscribe -----------------------', data.value); }}) ;
+    console.log('joke outside subscribe -----------------------', this.jokes);
+  }
+
 }
diff --git a/src/app/chuck/chuck.service.spec.ts b/src/app/chuck/chuck.service.spec.ts
new file mode 100644
index 0000000..554505e
--- /dev/null
+++ b/src/app/chuck/chuck.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChuckService } from './chuck.service';
+
+describe('ChuckService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ChuckService = TestBed.get(ChuckService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/chuck/chuck.service.ts b/src/app/chuck/chuck.service.ts
new file mode 100644
index 0000000..4785723
--- /dev/null
+++ b/src/app/chuck/chuck.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import {Joke} from './joke.model';
+import {HttpClient} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {catchError, retry} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChuckService {
+configUrl = 'https://api.chucknorris.io/jokes/random';
+  constructor(private http: HttpClient) { }
+
+  getJokes(): Observable<any> {
+    return this.http.get(this.configUrl).pipe();
+  }
+}
diff --git a/src/app/chuck/joke.model.spec.ts b/src/app/chuck/joke.model.spec.ts
new file mode 100644
index 0000000..d42298a
--- /dev/null
+++ b/src/app/chuck/joke.model.spec.ts
@@ -0,0 +1,7 @@
+import { Joke } from './joke.model';
+
+describe('Joke', () => {
+  it('should create an instance', () => {
+    expect(new Joke()).toBeTruthy();
+  });
+});
diff --git a/src/app/chuck/joke.model.ts b/src/app/chuck/joke.model.ts
new file mode 100644
index 0000000..4fe2b4e
--- /dev/null
+++ b/src/app/chuck/joke.model.ts
@@ -0,0 +1,3 @@
+export class Joke {
+  randomJoke: string;
+}