myProjects.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: './myProjects.component.html',
  styleUrls: ['./myProjects.component.css']
})

export class MyProjectsComponent implements OnInit {
  projects: any[] = [];
  page = 1;
  Recpage = 1;

  constructor(private authService: AuthService, private projectService: ProjectService, private http: HttpClient) {
  }

  ngOnInit() {
    this.loadProjects();
  }

  loadProjects() {
    this.projectService.getMyProjects(0).subscribe({
      next: (projects) => {
        this.projects = this.projects.concat(projects);
        this.projects.forEach(project => {
          this.loadProjectFirstImage(project);
        });
      },
      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;
      }
    );
  }

}