import { Component , EventEmitter , Input , Output } from '@angular/core' ; import { Router } from '@angular/router' ; import { Profile , ProfilesService , UserService } from '../../core' ; import { concatMap , tap } from 'rxjs/operators' ; import { of } from 'rxjs' ; @ Component ( { selector : 'app-follow-button' , templateUrl : './follow-button.component.html' } ) export class FollowButtonComponent { constructor ( private profilesService , private router , private userService ) { } @ Input ( ) profile : Profile ; @ Output ( ) toggle = new EventEmitter < boolean > ( ) ; isSubmitting = false ; toggleFollowing ( ) { this . isSubmitting = true ; this . userService . isAuthenticated . pipe ( concatMap ( ( authenticated ) => { if ( ! authenticated ) { this . router . navigateByUrl ( '/login' ) ; return of ( null ) ; } if ( ! this . profile . following ) { return this . profilesService . follow ( this . profile . username ) . pipe ( tap ( data => { this . isSubmitting = false ; this . toggle . emit ( true ) ; } , err => this . isSubmitting = false ) ) ; } else { return this . profilesService . unfollow ( this . profile . username ) . pipe ( tap ( data => { this . isSubmitting = false ; this . toggle . emit ( false ) ; } , err => this . isSubmitting = false ) ) ; } } ) ) . subscribe ( ) ; } }