import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs/internal/Subject';
import { takeUntil } from 'rxjs/operators';
import { NavService } from '../nav/nav.service';
import { Pages } from '../shared/models/pages.model';
import { Project } from '../shared/models/project.model';
import { ProjectsService } from './projects.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit, OnDestroy {
  _unsubscribe$: Subject<boolean> = new Subject();

  uncategorizedProjects: Array<Project>;

  constructor(private navService: NavService, private projectsService: ProjectsService) { }

  ngOnInit(): void {
    this.navService.setPageTitle(Pages.PROJECTS);

    this.projectsService.allProjects$
        .pipe(takeUntil(this._unsubscribe$))
        .subscribe((result: Project[]) => {
            this.uncategorizedProjects = result;
        });
    this.projectsService.getProjects();
  }

  ngOnDestroy(): void {
      this._unsubscribe$.next(false);
      this._unsubscribe$.complete();
  }

}