import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { FeedCard } from '../../../core/models/feed-card.model';
import { staggerAnimation } from '../stagger.animation';
import { takeUntil } from 'rxjs/operators';
import { DashboardFeedService } from '../../../core/services/dashboard-feed.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  animations: [staggerAnimation],
})
export class DashboardComponent implements OnInit, OnDestroy {
  feed: FeedCard[] = [];
  loading = true;
  destroy$ = new Subject();

  constructor(private feedService: DashboardFeedService) {}

  ngOnInit() {
    this.feedService
      .info()
      .pipe(takeUntil(this.destroy$))
      .subscribe((feeds: FeedCard[]) => {
        this.loading = false;
        this.feed = feeds;
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
  }
}
