fix(): use pipe with rxjs observables, update courses banner

Author: kamilmysliwiec

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 import { HOMEPAGE_TITLE, TITLE_SUFFIX } from './constants';
 
 @Component({
@@ -20,7 +21,7 @@ export class AppComponent implements OnInit {
 
   async ngOnInit() {
     this.router.events
-      .filter(ev => ev instanceof NavigationEnd)
+      .pipe(filter((ev) => ev instanceof NavigationEnd))
       .subscribe((ev: NavigationEnd) => {
         this.updateTitle();
         this.updateMeta(ev);

src/app/homepage/homepage.component.ts

@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { fromEvent, Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, filter } from 'rxjs/operators';
 import { environment } from '../../environments/environment';
 import { BasePageComponent } from './pages/page/page.component';
 
@@ -41,7 +41,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngOnInit(): void {
     this.router.events
-      .filter(e => e instanceof NavigationEnd)
+      .pipe(filter((ev) => ev instanceof NavigationEnd))
       .subscribe(() => {
         if (window.innerWidth > 768) {
           return false;
@@ -52,7 +52,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
 
     this.scrollSubscription = fromEvent(window, 'scroll')
       .pipe(debounceTime(this.scrollDebounceTime))
-      .subscribe(_ => {
+      .subscribe((_) => {
         this.checkViewportBoundaries();
       });
   }

src/app/homepage/menu/menu.component.ts

@@ -5,6 +5,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-menu',
@@ -254,7 +255,7 @@ export class MenuComponent implements OnInit {
 
   ngOnInit() {
     this.router.events
-      .filter((event) => event instanceof NavigationEnd)
+      .pipe(filter((ev) => ev instanceof NavigationEnd))
       .subscribe((event) => this.toggleCategory());
 
     this.toggleCategory();

src/app/shared/components/banner-courses/banner-courses.component.html

@@ -2,10 +2,10 @@
   <h2>Learn the <span>right</span> way!</h2>
   <ul>
     <li>
-      <span><i class="fas fa-check"></i></span> 60+ chapters
+      <span><i class="fas fa-check"></i></span> 80+ chapters
     </li>
     <li>
-      <span><i class="fas fa-check"></i></span> 4+ hours of videos
+      <span><i class="fas fa-check"></i></span> 5+ hours of videos
     </li>
     <li>
       <span><i class="fas fa-check"></i></span> Official certificate