add profile-data service for profile

Author: Awakich

projects/social_platform/src/app/office/profile/detail/profile-detail.component.html

@@ -1,6 +1,6 @@
 <!-- @format -->
 
-@if (user$ | async; as user) {
+@if (user) {
 <div class="profile">
   <section class="profile__bar">
     @if (loggedUserId$ | async; as loggedUserId) {

projects/social_platform/src/app/office/profile/detail/profile-detail.component.ts

@@ -1,8 +1,8 @@
 /** @format */
 
-import { Component, OnInit, signal } from "@angular/core";
+import { Component, inject, OnInit, signal } from "@angular/core";
 import { ActivatedRoute, RouterLink, RouterOutlet } from "@angular/router";
-import { map, Observable } from "rxjs";
+import { filter, map, Observable, take } from "rxjs";
 import { User } from "@auth/models/user.model";
 import { NavService } from "@services/nav.service";
 import { AuthService } from "@auth/services";
@@ -16,6 +16,7 @@ import { ModalComponent } from "@ui/components/modal/modal.component";
 import { calculateProfileProgress } from "@utils/calculateProgress";
 import { ProfileService as SkillsProfileService } from "projects/skills/src/app/profile/services/profile.service";
 import { TooltipComponent } from "@ui/components/tooltip/tooltip.component";
+import { ProfileDataService } from "./services/profile-date.service";
 
 /**
  * Компонент детального просмотра профиля пользователя
@@ -52,23 +53,46 @@ import { TooltipComponent } from "@ui/components/tooltip/tooltip.component";
     YearsFromBirthdayPipe,
     BarComponent,
     ModalComponent,
-    TooltipComponent,
   ],
 })
 export class ProfileDetailComponent implements OnInit {
-  constructor(
-    private readonly route: ActivatedRoute,
-    private readonly navService: NavService,
-    public readonly authService: AuthService,
-    public readonly chatService: ChatService,
-    public readonly skillsProfileService: SkillsProfileService,
-    public readonly breakpointObserver: BreakpointObserver
-  ) {}
+  private readonly route = inject(ActivatedRoute);
+  private readonly navService = inject(NavService);
+  private readonly profileDataService = inject(ProfileDataService);
+  public readonly authService = inject(AuthService);
+  public readonly chatService = inject(ChatService);
+  public readonly skillsProfileService = inject(SkillsProfileService);
+  public readonly breakpointObserver = inject(BreakpointObserver);
 
-  user$: Observable<User> = this.route.data.pipe(
-    map(r => r["data"][0]),
-    map(user => ({ ...user, progress: calculateProfileProgress(user) }))
-  );
+  /**
+   * Инициализация компонента
+   * Настраивает заголовок навигации, проверяет статус подписки,
+   * определяет необходимость заполнения профиля
+   */
+  ngOnInit(): void {
+    this.navService.setNavTitle("Профиль");
+
+    this.profileDataService
+      .getProfile()
+      .pipe(
+        map(user => ({ ...user, progress: calculateProfileProgress(user!) })),
+        filter(user => !!user),
+        take(1)
+      )
+      .subscribe({
+        next: user => {
+          this.user = user as User;
+          this.isProfileFill =
+            user.progress! < 100 ? (this.isProfileFill = true) : (this.isProfileFill = false);
+        },
+      });
+
+    this.skillsProfileService.getSubscriptionData().subscribe(r => {
+      this.isSubscriptionActive.set(r.isSubscribed);
+    });
+  }
+
+  user?: User;
 
   loggedUserId$: Observable<number> = this.authService.profile.pipe(map(user => user.id));
 
@@ -81,6 +105,11 @@ export class ProfileDetailComponent implements OnInit {
   tooltipText = "Заполни до конца — и открой весь функционал платформы!";
   isHintVisible = false;
 
+  errorMessageModal = signal("");
+  desktopMode$: Observable<boolean> = this.breakpointObserver
+    .observe("(min-width: 920px)")
+    .pipe(map(result => result.matches));
+
   /**
    * Показать подсказку для незаполненного профиля
    */
@@ -95,29 +124,6 @@ export class ProfileDetailComponent implements OnInit {
     this.isHintVisible = false;
   }
 
-  errorMessageModal = signal("");
-  desktopMode$: Observable<boolean> = this.breakpointObserver
-    .observe("(min-width: 920px)")
-    .pipe(map(result => result.matches));
-
-  /**
-   * Инициализация компонента
-   * Настраивает заголовок навигации, проверяет статус подписки,
-   * определяет необходимость заполнения профиля
-   */
-  ngOnInit(): void {
-    this.navService.setNavTitle("Профиль");
-
-    this.skillsProfileService.getSubscriptionData().subscribe(r => {
-      this.isSubscriptionActive.set(r.isSubscribed);
-    });
-
-    this.user$.subscribe(r => {
-      this.isProfileFill =
-        r.progress! < 100 ? (this.isProfileFill = true) : (this.isProfileFill = false);
-    });
-  }
-
   /**
    * Отправка CV пользователя на email
    * Проверяет ограничения по времени и отправляет CV на почту пользователя

projects/social_platform/src/app/office/profile/detail/profile-detail.resolver.ts

@@ -5,8 +5,9 @@ import { ActivatedRouteSnapshot, ResolveFn } from "@angular/router";
 import { AuthService } from "@auth/services";
 import { User } from "@auth/models/user.model";
 import { SubscriptionService } from "@office/services/subscription.service";
-import { forkJoin, map } from "rxjs";
+import { forkJoin, map, tap } from "rxjs";
 import { Project } from "@office/models/project.model";
+import { ProfileDataService } from "./services/profile-date.service";
 
 /**
  * Резолвер для загрузки данных профиля пользователя
@@ -31,9 +32,13 @@ export const ProfileDetailResolver: ResolveFn<[User, Project[]]> = (
 ) => {
   const authService = inject(AuthService);
   const subscriptionService = inject(SubscriptionService);
+  const profileDataService = inject(ProfileDataService);
 
   return forkJoin([
-    authService.getUser(Number(route.paramMap.get("id"))),
+    authService
+      .getUser(Number(route.paramMap.get("id")))
+      .pipe(tap(profile => profileDataService.setProfile(profile))),
+
     subscriptionService
       .getSubscriptions(Number(route.paramMap.get("id")))
       .pipe(map(resp => resp.results)),

projects/social_platform/src/app/office/profile/detail/services/profile-date.service.ts

@@ -0,0 +1,24 @@
+/** @format */
+
+import { Injectable } from "@angular/core";
+import { User } from "@auth/models/user.model";
+import { BehaviorSubject, filter, map } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class ProfileDataService {
+  private profilesSubject = new BehaviorSubject<User | undefined>(undefined);
+  profile$ = this.profilesSubject.asObservable();
+
+  setProfile(profile: User) {
+    this.profilesSubject.next(profile);
+  }
+
+  getProfile() {
+    return this.profile$.pipe(
+      map(profile => profile),
+      filter(profile => !!profile)
+    );
+  }
+}