inner-page.component.ts

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../services/project.service';
import { AuthService } from '../services/auth.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-inner-page',
  templateUrl: './inner-page.component.html',
  styleUrls: ['./inner-page.component.css']
})

export class InnerPageComponent implements OnInit {
  projects: any[] = [];
	isLoggedIn;
  page = 1;
  Recpage = 1;
  isLoading = true;

  constructor(private authService: AuthService, private projectService: ProjectService, private http: HttpClient) {
    this.isLoggedIn = this.authService.getIsLoggedIn();
  }

  ngOnInit() {
    this.loadProjects();
  }

  loadProjects() {
    this.projectService.getProjects(0).subscribe({
      next: (projects) => {
        this.projects = this.projects.concat(projects);
        this.projects.forEach(project => {
          this.loadProjectFirstImage(project);
        });
        this.isLoading = false
      },
      error: (error) => {
        console.error('Error loading the projects:', error);
      }
    });
    
    
  }


  loadProjectFirstImage(project: any) {
    this.projectService.getProjectFirstImage(project.id).subscribe(
      imageUrl => {
        project.imageUrl = imageUrl;  
      },
      error => {
        console.error('Error fetching the first image of the project:', error);
        project.imageUrl = null;
      }
    );
  }

  loadMoreProjects() {
    console.log("Load more");
    this.projectService.getProjects(this.page).subscribe(projects => {
      this.projects = this.projects.concat(projects);
      projects.forEach(project => this.loadProjectFirstImage(project));
      console.log(projects);
      this.page++;
    }, error => {
      console.error('Error loading more projects:', error);
    });
  }

  loadMoreRecProjects() {
    console.log("Load more rec");
    this.projectService.getProjects(this.Recpage).subscribe(projects => {
      this.projects = this.projects.concat(projects);
      projects.forEach(project => this.loadProjectFirstImage(project));
      console.log(this.projects);
      this.Recpage++;
    }, error => {
      console.error('Error loading more projects:', error);
    });
  }
  
}