Angular vs React глазами новичка. Часть 1: Angular

import { Injectable } from '@angular/core';
import { FbCreateResponse, Employee } from '../interfaces';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
import { environment } from '../../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class EmployeesService {
  constructor(private http: HttpClient) { }

  private employeesUrl = 'api/employees';
  private entityName = 'employees';

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(`${environment.fbDbUrl}/${this.entityName}.json`)
      .pipe(
        tap(_ => this.log('fetched employees')),
        map((response: {[key: string]: any}) => {
          return Object.
          keys(response)
            .map(key => ({
              ...response[key],
              id: key,
            }));
        }),
        catchError(this.handleError<Employee[]>('getEmployees', []))
      );
  }

  getEmployee(id: string): Observable<Employee> {
    const url = `${environment.fbDbUrl}/${this.entityName}/${id}.json`;
    return this.http.get<Employee>(url).pipe(
      tap(_ => this.log(`fetched employee id=${id}`)),
      map((employee: Employee) => {
        return {
          ...employee,
          id
        };
      }),
      catchError(this.handleError<Employee>(`getEmployee id=${id}`))
    );
  }

  updateEmployee(employee: Employee): Observable<any> {
    return this.http.patch(`${environment.fbDbUrl}/employees/${employee.id}.json`, employee, this.httpOptions).pipe(
      tap(_ => this.log(`updated employee id=${employee.id}`)),
      catchError(this.handleError<any>('updateEmployee'))
    );
  }

  addEmployee(employee: Employee): Observable<Employee> {
    return this.http.post<Employee>(`${environment.fbDbUrl}/employees.json`, employee, this.httpOptions).pipe(
      tap((newEmployee: Employee) => this.log(`added employee w/ id=${newEmployee.id}`)),
      map((response: FbCreateResponse) => {
        return {
          ...employee,
          id: response.name,
        };
      }),
      catchError(this.handleError<Employee>('addEmployee'))
    );
  }

  deleteEmployee(employee: Employee | string): Observable<Employee> {
    const id = typeof employee === 'string' ? employee : employee.id;
    const url = `${environment.fbDbUrl}/${this.entityName}/${id}.json`;

    return this.http.delete<Employee>(url, this.httpOptions).pipe(
      tap(_ => this.log(`deleted employee id=${id}`)),
      catchError(this.handleError<Employee>('deleteEmployee'))
    );
  }

  searchEmployees(term: string): Observable<Employee[]> {
    if (!term.trim()) {
      // if not search term, return empty employee array.
      return of([]);
    }
    return this.http.get<Employee[]>(`${this.employeesUrl}/?name=${term}`).pipe(
      tap(x => x.length ?
        this.log(`found employees matching "${term}"`) :
        this.log(`no employees matching "${term}"`)),
      catchError(this.handleError<Employee[]>('searchEmployees', []))
    );
  }

import { Component, OnInit } from '@angular/core';
import { Employee, EmployeeSkill } from '../shared/interfaces';
import { SkillsService } from '../shared/services/skills.service';
import { forkJoin } from 'rxjs';
import { EmployeeSkillsService } from '../shared/services/employee-skills.service';
import { EmployeesService } from '../shared/services/employee.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.scss' ]
})
export class DashboardComponent implements OnInit {
  employees: Employee[] = [];
  employeeSkills: EmployeeSkill[];
  employeesHasSkills = {};
  employeesDictionary = {};
  bestEmployees = [];
  employeesHasSkill: Employee[] = [];

  constructor(
    private skillsService: SkillsService,
    private employeesService: EmployeesService,
    private employeeSkillsService: EmployeeSkillsService,
  ) { }

  ngOnInit(): void {
    forkJoin([
      this.employeesService.getEmployees(),
      this.employeeSkillsService.getEmployeeSkills()])
      .subscribe(([employees, employeeSkills]) => {
        this.employeeSkills = employeeSkills;
        this.employees = employees;
        if (this.employeeSkills) {
          for (const es of this.employeeSkills) {
            if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {
              this.employeesHasSkills[es.employeeId] += 1;
            } else {
              this.employeesHasSkills[es.employeeId] = 1;
            }
          }
          this.bestEmployees = Object.entries(this.employeesHasSkills).sort((a, b) => {
            const aCount = a[1];
            const bCount = b[1];
            if (aCount < bCount) {
              return 1;
            } else if (aCount > bCount) {
              return -1;
            } else {
              return 0;
            }
          });
          for (const e of employees) {
            this.employeesDictionary[e.id] = e;
          }
          this.bestEmployees = this.bestEmployees.slice(0, 4);
        }
      });
  }
}

<div class="skills">
  <div class="skills-header">
    <input #skillName placeholder="Название Навыка" />
    <button (click)="addSkill(skillName.value); skillName.value=''">
      Добавить
    </button>
  </div>
  <div class="bus_factors">
    <app-skill-item *ngFor="let skill of skills"
                       [skill]="skill"
                       [skillCount]="skillTeachedByEmployee[skill.id] ||  0"
                       (deleteButtonClick)="handleDeleteSkill($event)"
    >
    </app-skill-item>
  </div>
</div>
<!--Код для сотрудников аналогичен, в листинге не приведён-->

import { SkillsService } from '../shared/services/skills.service';
import { Component, OnInit } from '@angular/core';
import { Employee, EmployeeSkill, Skill } from '../shared/interfaces';
import { EmployeesService } from '../shared/services/employee.service';
import { EmployeeSkillsService } from '../shared/services/employee-skills.service';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-bus-factor-list',
  templateUrl: './bus-factor-list.component.html',
  styleUrls: ['./bus-factor-list.component.scss']
})
export class BusFactorListComponent implements OnInit {
  skills: Skill[];
  employees: Employee[];
  employeeSkills: EmployeeSkill[];
  employeesHasSkills = {};
  skillTeachedByEmployee = {};

  constructor(
    private skillsService: SkillsService,
    private employeesService: EmployeesService,
    private employeeSkillsService: EmployeeSkillsService,
  ) { }

  ngOnInit() {
    forkJoin([
      this.skillsService.getSkills(),
      this.employeesService.getEmployees(),
      this.employeeSkillsService.getEmployeeSkills()])
      .subscribe(([skills, empoyees, employeeSkills]) => {
        this.skills = skills;
        this.employees = empoyees;
        this.employeeSkills = employeeSkills;
        this.calculateSkillsData();
      });
  }

  calculateSkillsData(): void {
    this.employeesHasSkills = {};
    this.skillTeachedByEmployee = {};

    if (this.employeeSkills) {
      for (const es of this.employeeSkills) {
        if (this.employeesHasSkills.hasOwnProperty(es.employeeId)) {
          this.employeesHasSkills[es.employeeId] += 1;
        } else {
          this.employeesHasSkills[es.employeeId] = 1;
        }

        if (this.skillTeachedByEmployee.hasOwnProperty(es.skillId)) {
          this.skillTeachedByEmployee[es.skillId] += 1;
        } else {
          this.skillTeachedByEmployee[es.skillId] = 1;
        }
      }
    }
  }

  getSkills(): void {
    this.skillsService.getSkills()
      .subscribe(skills => this.skills = skills);
  }

  addSkill(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.skillsService.addSkill({ name } as Skill)
      .subscribe(skill => {
        this.skills.push(skill);
      });
  }

  deleteSkill(skill: Skill): void {
    const skillId = typeof skill === 'string' ? skill : skill.id;

    this.skills = this.skills.filter(h => h !== skill);
    this.skillsService.deleteSkill(skill).subscribe();

    for (const es of this.employeeSkills) {
      if (es.skillId === skillId) {
        this.employeeSkillsService.deleteEmployeeSkill(es.id).subscribe();
      }
    }
    this.skills = this.skills.filter(s => s !== skill);
    this.skillsService.deleteSkill(skill).subscribe();
    this.employeeSkills = this.employeeSkills.filter(es => es.skillId !== skillId);
    this.calculateSkillsData();
  }

  handleDeleteSkill(skill: Skill): void {
    const skillId = typeof skill === 'string' ? skill : skill.id;
    for (const es of this.employeeSkills) {
      if (es.skillId === skillId) {
        this.employeeSkillsService.deleteEmployeeSkill(es.id).subscribe();
      }
    }
    this.skills = this.skills.filter(h => h !== skill);
    this.employeeSkills = this.employeeSkills.filter(es => es.skillId !== skillId);
    this.calculateSkillsData();
  }
  // код для Сотрудников аналогичен, в листинге не приведён
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pluralize'
})
export class PluralizePipe implements PipeTransform {

 decline(num: number, titles: string[]) {
    const cases = [2, 0, 1, 1, 1, 2];
    return titles[(num % 100 > 4 && num % 100 < 20) ? 2 : cases[(num % 10 < 5) ? num % 10 : 5]];
  }

  transform(value: any, titles: string[]): any {
        return this.decline(+value, titles);
    }
}
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pluralize'
})
export class PluralizePipe implements PipeTransform {

 decline(num: number, titles: string[]) {
    const cases = [2, 0, 1, 1, 1, 2];
    return titles[(num % 100 > 4 && num % 100 < 20) ? 2 : cases[(num % 10 < 5) ? num % 10 : 5]];
  }

  transform(value: any, titles: string[]): any {
        return this.decline(+value, titles);
    }
}

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Skill } from '../shared/interfaces';
import { SkillsService } from '../shared/services/skills.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-skill-item',
  templateUrl: './skill-item.component.html',
  styleUrls: ['./skill-item.component.scss']
})
export class SkillItemComponent implements OnInit {
  @Input() skill: Skill;
  @Input() skillCount: number;
  @Output() deleteButtonClick = new EventEmitter<Skill>();

  constructor(
    private skillsService: SkillsService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) { }

  ngOnInit(): void {
  }

  deleteSkill(skill: Skill): void {
    this.skillsService.deleteSkill(skill).subscribe();
    this.deleteButtonClick.emit(skill);
  }

  onSkillClick(): void {
    this.router.navigate(['skills', this.skill.id],
      {relativeTo: this.activatedRoute.parent});
  }

}