header.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { UserService } from '../services/user.service';

@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
})
export class HeaderComponent {

	isLoggedIn;
	userPhoto:string = "";

	constructor(private authService: AuthService, private router: Router, private userService: UserService) {
		this.isLoggedIn = this.authService.getIsLoggedIn();
	}

	logout(): void {
		this.authService.logout().subscribe({
			next: () => {
				this.authService.setIsLoggedIn(false);
				window.location.reload();
        this.router.navigate(['inner-page']);
				},
			error: (error: any) => {
				console.error('Log out failure', error);
        window.location.reload();
        this.router.navigate(['errorPage']);
			}
		});
	}

	ngOnInit(): void {
		if (this.isLoggedIn) {
			this.authService.getUserId().subscribe({
				next: (data: any) => {
					this.userService.getUserPhoto(data).subscribe({
						next: (data: any) => {
							this.userPhoto = data;
						},
						error: (error: any) => {
							console.error('User photo retrieval failure', error);
						}
					});
				},
				error: (error: any) => {
					console.error('User id retrieval failure', error);
				}
			});
		}
	}
}