feat: add HTTP cats facts

package.json

@@ -27,11 +27,11 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1000.5",
-    "@angular/cli": "~10.0.5",
     "@angular/compiler-cli": "~10.0.6",
-    "@types/node": "^12.11.1",
+    "@schematics/angular": "^16.2.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -16,7 +17,8 @@ import { CatsRoutingModule } from '@cats/cats-routing.module';
     AppRoutingModule,
     CoreModule,
     SharedModule,
-    CatsRoutingModule
+    CatsRoutingModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/cats/cats.component.html

@@ -7,6 +7,10 @@
     <div class="center">
       <app-cats-container></app-cats-container>
     </div>
+
+    <app-cat-facts-container></app-cat-facts-container>
+
+    <div class="center"><app-powered-by></app-powered-by></div>
   </div>
   <app-footer class="center"></app-footer>
 </div>

src/app/cats/cats.module.ts

@@ -11,10 +11,12 @@ import { ToggleButtonComponent } from './components/toggle-button/toggle-button.
 import { ToggleContainerComponent } from './containers/toggle-container/toggle-container.component';
 import { CatsContainerComponent } from './containers/cats-container/cats-container.component';
 import { FooterComponent } from './containers/footer/footer.component';
+import { CatFactsContainerComponent } from './containers/cat-facts-container/cat-facts-container.component';
+import { PoweredByComponent } from './containers/powered-by/powered-by.component';
 
 
 @NgModule({
-  declarations: [CatsComponent, TitleComponent, IconComponent, HeaderComponent, ToggleButtonComponent, ToggleContainerComponent, CatsContainerComponent, FooterComponent],
+  declarations: [CatsComponent, TitleComponent, IconComponent, HeaderComponent, ToggleButtonComponent, ToggleContainerComponent, CatsContainerComponent, FooterComponent, CatFactsContainerComponent, PoweredByComponent],
   imports: [
     CommonModule,
     FormsModule,

src/app/cats/containers/cat-facts-container/cat-facts-container.component.html

@@ -0,0 +1,4 @@
+<div *ngIf="catFact" class="fact">
+  <h1>Did you know?</h1>
+  <h3>{{ catFact && (catFact | async).data && (catFact | async).data[0] }}</h3>
+</div>

src/app/cats/containers/cat-facts-container/cat-facts-container.component.scss

@@ -0,0 +1,4 @@
+.fact {
+  text-align: center;
+  margin: 0 25%
+}

src/app/cats/containers/cat-facts-container/cat-facts-container.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CatFactsContainerComponent } from './cat-facts-container.component';
+
+describe('CatFactsContainerComponent', () => {
+  let component: CatFactsContainerComponent;
+  let fixture: ComponentFixture<CatFactsContainerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CatFactsContainerComponent]
+    });
+    fixture = TestBed.createComponent(CatFactsContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cats/containers/cat-facts-container/cat-facts-container.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { CatFacadeService } from '@app/core/cats/facades/cat-facade.service';
+import { CatFact } from '@app/core/cats/models/cat-fact';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-cat-facts-container',
+  templateUrl: './cat-facts-container.component.html',
+  styleUrls: ['./cat-facts-container.component.scss']
+})
+export class CatFactsContainerComponent implements OnInit {
+  catFact: Observable<CatFact>;
+
+  constructor(private facade: CatFacadeService) { }
+
+  ngOnInit(): void {
+    this.catFact = this.facade.getNewFact();
+  }
+}

src/app/cats/containers/cats-container/cats-container.component.html

@@ -16,7 +16,7 @@ <h1>
   <p style="font-size: 0.8em;">You should try reloading the page while we try to find another one.</p>
 </div>
 
-<div style="margin-bottom: 10vh">
+<div style="margin-bottom: 2vh">
   <label for="find-cat">Find a new cat:</label>
   <input class="padding-std" id="find-cat" type="text"
         style="margin-left: 12px"
@@ -30,8 +30,3 @@ <h1>
     <app-icon type="fa fa-refresh"></app-icon> Meet a new random meow!
   </button>
 </div>
-
-<div style="margin-bottom: 10vh">
-  <p>Powered by: <a style="color: white" target="_blank" href="https://http.cat/">http.cat</a></p>
-</div>
-

src/app/cats/containers/powered-by/powered-by.component.html

@@ -0,0 +1,3 @@
+<div style="margin-bottom: 2vh">
+  <p>Powered by: <a style="color: white" target="_blank" href="https://http.cat/">http.cat</a> and <a style="color: white" target="_blank" href="https://meowfacts.herokuapp.com/">meowfacts</a></p>
+</div>

src/app/cats/containers/powered-by/powered-by.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoweredByComponent } from './powered-by.component';
+
+describe('PoweredByComponent', () => {
+  let component: PoweredByComponent;
+  let fixture: ComponentFixture<PoweredByComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PoweredByComponent]
+    });
+    fixture = TestBed.createComponent(PoweredByComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cats/containers/powered-by/powered-by.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-powered-by',
+  templateUrl: './powered-by.component.html',
+  styleUrls: ['./powered-by.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PoweredByComponent {}

src/app/core/cats/facades/cat-facade.service.ts

@@ -1,24 +1,33 @@
 import { Injectable } from '@angular/core';
 import { CatImageService } from '../services/cat-image.service';
+import { CatFactsService } from '../services/cat-facts.service';
 import { Cat } from '../models/cat';
 import { Observable } from 'rxjs';
+import { CatFact } from '../models/cat-fact';
 
 @Injectable({
   providedIn: 'root'
 })
 export class CatFacadeService {
 
-  constructor(private service: CatImageService) { }
+  constructor(
+    private httpCatService: CatImageService,
+    private catFactsService: CatFactsService
+  ) { }
 
   getRandomCat(): Observable<Cat> {
-    return this.service.getNewCat();
+    return this.httpCatService.getNewCat();
   }
 
   getNewCat(catCode: string): Observable<Cat> {
     const parsedCatCode = +catCode;
-    const catExists = this.service.exists(+parsedCatCode);
+    const catExists = this.httpCatService.exists(+parsedCatCode);
 
-    if(catExists) return this.service.getNewCat(parsedCatCode);
+    if(catExists) return this.httpCatService.getNewCat(parsedCatCode);
     else return null;
   }
+
+  getNewFact(): Observable<CatFact> {
+    return this.catFactsService.getNewFact()
+  }
 }

src/app/core/cats/models/cat-fact.ts

@@ -0,0 +1,3 @@
+export interface CatFact {
+  data: string[];
+}

src/app/core/cats/services/cat-facts.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CatFactsService } from './cat-facts.service';
+
+describe('CatFactsService', () => {
+  let service: CatFactsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CatFactsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/cats/services/cat-facts.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { CatFact } from '../models/cat-fact';
+
+export const catFactsURL =  "https://meowfacts.herokuapp.com/"
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CatFactsService {
+
+  constructor(private http: HttpClient) { }
+
+  getNewFact() : Observable<CatFact> {
+    return this.http.get<CatFact>(catFactsURL);
+  }
+}