optimized api calls by moving api call to individual components and improved performance

src/app/about/about.component.ts

@@ -14,6 +14,14 @@ export class AboutComponent extends BaseComponent<IAbout> implements OnInit {
   }
 
   ngOnInit(): void {
-    this.init();
+    // this.init();
+    this.getAbout();
+  }
+
+  getAbout(): void{
+    this.svc.getHobbies(this.candidateId).subscribe((response: IAbout) => {
+      this.svc.about = this.svc.about ?? response;
+      this.assignData(response);
+    });
   }
 }

src/app/blog/blog.component.ts

@@ -16,6 +16,14 @@ export class BlogComponent extends BaseComponent<IBlog> implements OnInit{
   }
 
   ngOnInit(): void {
-    this.init();
+    // this.init();
+    this.getBlog();
+  }
+
+  getBlog(){
+    this.svc.getBlog(this.candidateId).subscribe((response: IBlog) => {
+      this.svc.blog = this.svc.blog ?? response;
+      this.assignData(response);
+    });
   }
 }

src/app/contact-sidebar/contact-sidebar.component.html

@@ -3,7 +3,7 @@
     <div class="sidebar-info" ng-init="let displayName = ">
 
       <figure class="avatar-box">
-        <img src="./assets/images/my-avatar.png" alt="{{model.candidate?.displayName}}" width="80">
+        <img src="./assets/images/my-pic.png" alt="{{model.candidate?.displayName}}" width="80">
       </figure>
 
       <div class="info-content">

src/app/contact-sidebar/contact-sidebar.component.scss

@@ -0,0 +1,3 @@
+img {
+    border-radius: inherit;
+}

src/app/contact-sidebar/contact-sidebar.component.ts

@@ -17,8 +17,16 @@ export class ContactSidebarComponent extends BaseComponent<ISideBar> implements
   }
   
   ngOnInit(): void {
-    this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
-      this.assignData(resume);
+    // this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
+    //   this.assignData(resume);
+    // });
+    this.getCandidateAndSocialLinks();
+  }
+
+  getCandidateAndSocialLinks(){
+    this.svc.getCandidateWithSocialLinks(this.candidateId).subscribe((response: ISideBar) => {
+      this.svc.candidateAndSocialLinks = this.svc.candidateAndSocialLinks ?? response;
+      this.assignData(response);
     });
   }
 }

src/app/contact/contact.component.ts

@@ -8,12 +8,7 @@ import { ISideBar } from '../contact-sidebar/side-bar.model';
   templateUrl: './contact.component.html',
   styleUrl: './contact.component.scss'
 })
-export class ContactComponent extends BaseComponent<ISideBar> implements OnInit{
+export class ContactComponent {
   constructor(svc: CvService){
-    super(svc);
-  }
-
-  ngOnInit(): void {
-    this.init();
   }
 }

src/app/projects/projects.component.ts

@@ -12,9 +12,9 @@ import { Subscription } from 'rxjs';
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss'
 })
-export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit, OnDestroy{
+export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit {
 filter: string = 'All';
-projects: IProject[] = this.model.projects;
+projects!: IProject[];
 subscription: Subscription = <Subscription>{};
 categoryClicked: boolean = false;
   constructor(svc: CvService, public http: HttpClient){
@@ -22,10 +22,19 @@ categoryClicked: boolean = false;
   }
 
   ngOnInit(): void {
-    this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
-      this.projects = this.model.projects;
+    // this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
+    //   this.projects = this.model.projects;
+    // });
+    // this.init();
+    this.getProjects();
+  }
+
+  getProjects(){
+    this.svc.getProjects(this.candidateId).subscribe((response: IProjects) => {
+      this.svc.projects = this.svc.projects ?? response;
+      this.projects = response.projects;
+      this.assignData(response);
     });
-    this.init();
   }
 
   filterProjects(category: string) {
@@ -40,8 +49,4 @@ categoryClicked: boolean = false;
   isCategoryActive(category: string){
     return this.filter === category; 
   }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
 }

src/app/resume/resume.component.ts

@@ -14,6 +14,14 @@ export class ResumeComponent extends BaseComponent<IResume> implements OnInit {
   }
 
   ngOnInit(): void {
-    this.init();
+    // this.init();
+    this.getResume();
+  }
+
+  getResume(){
+    this.svc.getResume(this.candidateId).subscribe((response: IResume) => {
+        this.svc.resume = this.svc.resume ?? response;
+        this.assignData(response);
+    });
   }
 }

src/app/services/cv.service.ts

@@ -2,19 +2,67 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ICv } from '../models/cv.model';
 import { Observable, Subject, of } from 'rxjs';
+import { IAbout } from '../about/about.model';
+import { ISocialLinks } from '../models/social-links.model';
+import { IResume } from '../resume/resume.model';
+import { IBlog } from '../blog/blog.model';
+import { IProjects } from '../projects/projects.model';
+import { ISideBar } from '../contact-sidebar/side-bar.model';
 
 @Injectable({
   providedIn: 'root'
 })
 export class CvService {
-  public resume!: ICv;
+  public cv!: ICv;
+
+  public about!: IAbout;
+  public candidateAndSocialLinks!: ISideBar;
+  public resume!: IResume;
+  public projects!: IProjects;
+  public blog!: IBlog;
+
   public baseSubject = new Subject();
   constructor(private http: HttpClient) { }
 
   getCv(candidateId: number): Observable<ICv> {
-    if(this.resume != null){
-      return of(this.resume);
+    if(this.cv != null){
+      return of(this.cv);
     }
     return this.http.get<ICv>(`/api/cv/${candidateId}`);
   }
+
+  getHobbies(candidateId: number): Observable<IAbout>{
+    if(this.about != null){
+      return of(this.about);
+    }
+    return this.http.get<IAbout>(`/api/cv/GetHobbies/${candidateId}`);
+  }
+
+  getCandidateWithSocialLinks(candidateId: number): Observable<ISideBar>{
+    if(this.candidateAndSocialLinks != null){
+      return of(this.candidateAndSocialLinks);
+    }
+    return this.http.get<ISideBar>(`/api/cv/GetCandidateWithSocialLinks/${candidateId}`);
+  }
+
+  getResume(candidateId: number): Observable<IResume>{
+    if(this.resume != null){
+      return of(this.resume);
+    }
+    return this.http.get<IResume>(`/api/cv/GetResume/${candidateId}`);
+  }
+
+  getProjects(candidateId: number): Observable<IProjects>{
+    if(this.projects != null){
+      return of(this.projects);
+    }
+    return this.http.get<ICv>(`/api/cv/GetProjects/${candidateId}`);
+  }
+
+  getBlog(candidateId: number): Observable<IBlog>{
+    if(this.blog != null){
+      return of(this.blog);
+    }
+    return this.http.get<IBlog>(`/api/cv/GetBlog/${candidateId}`);
+  }
 }