feat(profile): Implemented my-profile and user/:id pages

rrromchIk · rrromchIk · commit c35d955d9b1d · 2025-08-29T11:26:29.000+03:00
diff --git a/src/app/core/guards/is-project.guard.ts b/src/app/core/guards/is-project.guard.ts
@@ -5,8 +5,9 @@ import { map, switchMap } from 'rxjs/operators';
 import { inject } from '@angular/core';
 import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
 
-import { CurrentResourceType } from '../../shared/enums';
-import { CurrentResourceSelectors, GetResource } from '../../shared/stores';
+import { UserSelectors } from '@core/store/user';
+import { CurrentResourceType } from '@shared/enums';
+import { CurrentResourceSelectors, GetResource } from '@shared/stores';
 
 export const isProjectGuard: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
   const store = inject(Store);
@@ -19,8 +20,9 @@ export const isProjectGuard: CanMatchFn = (route: Route, segments: UrlSegment[])
   }
 
   const currentResource = store.selectSnapshot(CurrentResourceSelectors.getCurrentResource);
+  const currentUser = store.selectSnapshot(UserSelectors.getCurrentUser);
 
-  if (currentResource && currentResource.id === id) {
+  if (currentResource && !id.startsWith(currentResource.id)) {
     if (currentResource.type === CurrentResourceType.Projects && currentResource.parentId) {
       router.navigate(['/', currentResource.parentId, 'files', id]);
       return true;
@@ -32,7 +34,11 @@ export const isProjectGuard: CanMatchFn = (route: Route, segments: UrlSegment[])
     }
 
     if (currentResource.type === CurrentResourceType.Users) {
-      router.navigate(['/profile', id]);
+      if (currentUser && currentUser.id === currentResource.id) {
+        router.navigate(['/profile']);
+      } else {
+        router.navigate(['/user', id]);
+      }
       return false;
     }
 
@@ -42,7 +48,7 @@ export const isProjectGuard: CanMatchFn = (route: Route, segments: UrlSegment[])
   return store.dispatch(new GetResource(id)).pipe(
     switchMap(() => store.select(CurrentResourceSelectors.getCurrentResource)),
     map((resource) => {
-      if (!resource || resource.id !== id) {
+      if (!resource || !id.startsWith(resource.id)) {
         return false;
       }
 
@@ -57,7 +63,11 @@ export const isProjectGuard: CanMatchFn = (route: Route, segments: UrlSegment[])
       }
 
       if (resource.type === CurrentResourceType.Users) {
-        router.navigate(['/user', id]);
+        if (currentUser && currentUser.id === resource.id) {
+          router.navigate(['/profile']);
+        } else {
+          router.navigate(['/user', id]);
+        }
         return false;
       }
 
diff --git a/src/app/core/guards/is-registry.guard.ts b/src/app/core/guards/is-registry.guard.ts
@@ -5,8 +5,9 @@ import { map, switchMap } from 'rxjs/operators';
 import { inject } from '@angular/core';
 import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
 
-import { CurrentResourceType } from '../../shared/enums';
-import { CurrentResourceSelectors, GetResource } from '../../shared/stores';
+import { UserSelectors } from '@core/store/user';
+import { CurrentResourceType } from '@shared/enums';
+import { CurrentResourceSelectors, GetResource } from '@shared/stores';
 
 export const isRegistryGuard: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
   const store = inject(Store);
@@ -19,8 +20,9 @@ export const isRegistryGuard: CanMatchFn = (route: Route, segments: UrlSegment[]
   }
 
   const currentResource = store.selectSnapshot(CurrentResourceSelectors.getCurrentResource);
+  const currentUser = store.selectSnapshot(UserSelectors.getCurrentUser);
 
-  if (currentResource && currentResource.id === id) {
+  if (currentResource && !id.startsWith(currentResource.id)) {
     if (currentResource.type === CurrentResourceType.Registrations && currentResource.parentId) {
       router.navigate(['/', currentResource.parentId, 'files', id]);
       return true;
@@ -32,7 +34,11 @@ export const isRegistryGuard: CanMatchFn = (route: Route, segments: UrlSegment[]
     }
 
     if (currentResource.type === CurrentResourceType.Users) {
-      router.navigate(['/user', id]);
+      if (currentUser && currentUser.id === currentResource.id) {
+        router.navigate(['/profile']);
+      } else {
+        router.navigate(['/user', id]);
+      }
       return false;
     }
 
@@ -42,7 +48,7 @@ export const isRegistryGuard: CanMatchFn = (route: Route, segments: UrlSegment[]
   return store.dispatch(new GetResource(id)).pipe(
     switchMap(() => store.select(CurrentResourceSelectors.getCurrentResource)),
     map((resource) => {
-      if (!resource || resource.id !== id) {
+      if (!resource || !id.startsWith(resource.id)) {
         return false;
       }
 
@@ -57,7 +63,11 @@ export const isRegistryGuard: CanMatchFn = (route: Route, segments: UrlSegment[]
       }
 
       if (resource.type === CurrentResourceType.Users) {
-        router.navigate(['/profile', id]);
+        if (currentUser && currentUser.id === resource.id) {
+          router.navigate(['/profile']);
+        } else {
+          router.navigate(['/user', id]);
+        }
         return false;
       }
 
diff --git a/src/app/core/services/user.service.ts b/src/app/core/services/user.service.ts
@@ -9,13 +9,13 @@ import {
   ProfileSettingsUpdate,
   User,
   UserData,
+  UserDataJsonApi,
   UserDataResponseJsonApi,
-  UserGetResponse,
+  UserResponseJsonApi,
   UserSettings,
   UserSettingsGetResponse,
 } from '@osf/shared/models';
-
-import { JsonApiService } from '../../shared/services/json-api.service';
+import { JsonApiService } from '@shared/services';
 
 import { environment } from 'src/environments/environment';
 
@@ -25,6 +25,12 @@ import { environment } from 'src/environments/environment';
 export class UserService {
   jsonApiService = inject(JsonApiService);
 
+  getUserById(userId: string): Observable<User> {
+    return this.jsonApiService
+      .get<UserResponseJsonApi>(`${environment.apiUrl}/users/${userId}/`)
+      .pipe(map((response) => UserMapper.fromUserGetResponse(response.data)));
+  }
+
   getCurrentUser(): Observable<UserData> {
     return this.jsonApiService
       .get<UserDataResponseJsonApi>(`${environment.apiUrl}/`)
@@ -49,7 +55,7 @@ export class UserService {
     const patchedData = key === ProfileSettingsKey.User ? data : { [key]: data };
 
     return this.jsonApiService
-      .patch<UserGetResponse>(`${environment.apiUrl}/users/${userId}/`, {
+      .patch<UserDataJsonApi>(`${environment.apiUrl}/users/${userId}/`, {
         data: { type: 'users', id: userId, attributes: patchedData },
       })
       .pipe(map((response) => UserMapper.fromUserGetResponse(response)));
diff --git a/src/app/features/moderation/mappers/moderation.mapper.ts b/src/app/features/moderation/mappers/moderation.mapper.ts
@@ -1,4 +1,4 @@
-import { PaginatedData, ResponseJsonApi, UserGetResponse } from '@osf/shared/models';
+import { PaginatedData, ResponseJsonApi, UserDataJsonApi } from '@osf/shared/models';
 
 import { AddModeratorType, ModeratorPermission } from '../enums';
 import { ModeratorAddModel, ModeratorAddRequestModel, ModeratorDataJsonApi, ModeratorModel } from '../models';
@@ -16,7 +16,7 @@ export class ModerationMapper {
   }
 
   static fromUsersWithPaginationGetResponse(
-    response: ResponseJsonApi<UserGetResponse[]>
+    response: ResponseJsonApi<UserDataJsonApi[]>
   ): PaginatedData<ModeratorAddModel[]> {
     return {
       data: response.data.map(
diff --git a/src/app/features/moderation/models/moderator-json-api.model.ts b/src/app/features/moderation/models/moderator-json-api.model.ts
@@ -1,4 +1,4 @@
-import { ApiData, MetaJsonApi, PaginationLinksJsonApi, UserGetResponse } from '@osf/shared/models';
+import { ApiData, MetaJsonApi, PaginationLinksJsonApi, UserDataJsonApi } from '@osf/shared/models';
 
 export interface ModeratorResponseJsonApi {
   data: ModeratorDataJsonApi[];
@@ -15,7 +15,7 @@ interface ModeratorAttributesJsonApi {
 
 interface ModeratorEmbedsJsonApi {
   user: {
-    data: UserGetResponse;
+    data: UserDataJsonApi;
   };
 }
 
diff --git a/src/app/features/moderation/services/moderators.service.ts b/src/app/features/moderation/services/moderators.service.ts
@@ -3,7 +3,7 @@ import { map, Observable } from 'rxjs';
 import { inject, Injectable } from '@angular/core';
 
 import { ResourceType } from '@osf/shared/enums';
-import { JsonApiResponse, PaginatedData, ResponseJsonApi, UserGetResponse } from '@osf/shared/models';
+import { JsonApiResponse, PaginatedData, ResponseJsonApi, UserDataJsonApi } from '@osf/shared/models';
 import { JsonApiService } from '@osf/shared/services';
 
 import { AddModeratorType } from '../enums';
@@ -62,7 +62,7 @@ export class ModeratorsService {
     const baseUrl = `${environment.apiUrl}/users/?filter[full_name]=${value}&page=${page}`;
 
     return this.jsonApiService
-      .get<ResponseJsonApi<UserGetResponse[]>>(baseUrl)
+      .get<ResponseJsonApi<UserDataJsonApi[]>>(baseUrl)
       .pipe(map((response) => ModerationMapper.fromUsersWithPaginationGetResponse(response)));
   }
 }
diff --git a/src/app/features/profile/pages/my-profile/my-profile.component.html b/src/app/features/profile/pages/my-profile/my-profile.component.html
@@ -1,7 +1,5 @@
-<osf-profile-information
-  [currentUser]="currentUser()"
-  [showEdit]="true"
-  (editProfile)="toProfileSettings()"
-></osf-profile-information>
+<osf-profile-information [currentUser]="currentUser()" [showEdit]="true" (editProfile)="toProfileSettings()" />
 
-<osf-profile-search [currentUser]="currentUser()"></osf-profile-search>
+@if (currentUser()) {
+  <osf-profile-search />
+}
diff --git a/src/app/features/profile/pages/my-profile/my-profile.component.ts b/src/app/features/profile/pages/my-profile/my-profile.component.ts
@@ -1,13 +1,11 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { UserSelectors } from '@osf/core/store/user';
-
-import { ProfileSearchComponent } from '../../components';
-import { ProfileInformationComponent } from '../../components/profile-information/profile-information.component';
-import { SetIsMyProfile } from '../../store';
+import { ProfileInformationComponent, ProfileSearchComponent } from '@osf/features/profile/components';
+import { SetUserProfile } from '@osf/features/profile/store';
 
 @Component({
   selector: 'osf-my-profile',
@@ -16,20 +14,22 @@ import { SetIsMyProfile } from '../../store';
   styleUrl: './my-profile.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MyProfileComponent implements OnDestroy {
-  private readonly router = inject(Router);
+export class MyProfileComponent implements OnInit {
+  private router = inject(Router);
+  private actions = createDispatchMap({
+    setUserProfile: SetUserProfile,
+  });
 
   currentUser = select(UserSelectors.getCurrentUser);
 
-  readonly actions = createDispatchMap({
-    setIsMyProfile: SetIsMyProfile,
-  });
+  ngOnInit(): void {
+    const user = this.currentUser();
+    if (user) {
+      this.actions.setUserProfile(user);
+    }
+  }
 
   toProfileSettings() {
     this.router.navigate(['settings/profile-settings']);
   }
-
-  ngOnDestroy(): void {
-    this.actions.setIsMyProfile(false);
-  }
 }
diff --git a/src/app/features/profile/pages/user-profile/user-profile.component.html b/src/app/features/profile/pages/user-profile/user-profile.component.html
@@ -1,6 +1,8 @@
-@if (isLoading()) {
+@if (isUserLoading()) {
 } @else {
-  <osf-profile-information [currentUser]="currentUser()"></osf-profile-information>
+  <osf-profile-information [currentUser]="currentUser()" />
 
-  <osf-profile-search [currentUser]="currentUser()"></osf-profile-search>
+  @if (currentUser()) {
+    <osf-profile-search />
+  }
 }
diff --git a/src/app/features/profile/pages/user-profile/user-profile.component.ts b/src/app/features/profile/pages/user-profile/user-profile.component.ts
@@ -1,11 +1,10 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { ProfileSearchComponent } from '../../components';
-import { ProfileInformationComponent } from '../../components/profile-information/profile-information.component';
-import { GetUserProfile, ProfileSelectors, SetIsMyProfile } from '../../store';
+import { ProfileInformationComponent, ProfileSearchComponent } from '@osf/features/profile/components';
+import { FetchUserProfile, ProfileSelectors } from '@osf/features/profile/store';
 
 @Component({
   selector: 'osf-user-profile',
@@ -14,26 +13,20 @@ import { GetUserProfile, ProfileSelectors, SetIsMyProfile } from '../../store';
   styleUrl: './user-profile.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UserProfileComponent implements OnInit, OnDestroy {
-  private readonly route = inject(ActivatedRoute);
+export class UserProfileComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private actions = createDispatchMap({
+    fetchUserProfile: FetchUserProfile,
+  });
 
   currentUser = select(ProfileSelectors.getUserProfile);
-  isLoading = select(ProfileSelectors.getIsUserProfile);
-
-  readonly actions = createDispatchMap({
-    setIsMyProfile: SetIsMyProfile,
-    getUserProfile: GetUserProfile,
-  });
+  isUserLoading = select(ProfileSelectors.isUserProfileLoading);
 
   ngOnInit(): void {
     const userId = this.route.snapshot.params['id'];
 
     if (userId) {
-      this.actions.getUserProfile(userId);
+      this.actions.fetchUserProfile(userId);
     }
   }
-
-  ngOnDestroy(): void {
-    this.actions.setIsMyProfile(false);
-  }
 }
diff --git a/src/app/features/settings/account-settings/services/account-settings.service.ts b/src/app/features/settings/account-settings/services/account-settings.service.ts
@@ -6,7 +6,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { UserSelectors } from '@osf/core/store/user';
 import { UserMapper } from '@osf/shared/mappers';
-import { ApiData, IdName, JsonApiResponse, User, UserGetResponse } from '@osf/shared/models';
+import { ApiData, IdName, JsonApiResponse, User, UserDataJsonApi } from '@osf/shared/models';
 import { JsonApiService } from '@osf/shared/services';
 
 import { MapAccountSettings, MapEmail, MapEmails, MapExternalIdentities, MapRegions } from '../mappers';
@@ -164,7 +164,7 @@ export class AccountSettingsService {
     };
 
     return this.jsonApiService
-      .patch<UserGetResponse>(`${environment.apiUrl}/users/${this.currentUser()?.id}`, body)
+      .patch<UserDataJsonApi>(`${environment.apiUrl}/users/${this.currentUser()?.id}`, body)
       .pipe(map((user) => UserMapper.fromUserGetResponse(user)));
   }
 
@@ -181,7 +181,7 @@ export class AccountSettingsService {
     };
 
     return this.jsonApiService
-      .patch<UserGetResponse>(`${environment.apiUrl}/users/${this.currentUser()?.id}`, body)
+      .patch<UserDataJsonApi>(`${environment.apiUrl}/users/${this.currentUser()?.id}`, body)
       .pipe(map((user) => UserMapper.fromUserGetResponse(user)));
   }
 
diff --git a/src/app/shared/mappers/contributors/contributors.mapper.ts b/src/app/shared/mappers/contributors/contributors.mapper.ts
@@ -6,7 +6,7 @@ import {
   ContributorResponse,
   PaginatedData,
   ResponseJsonApi,
-  UserGetResponse,
+  UserDataJsonApi,
 } from '@osf/shared/models';
 
 export class ContributorsMapper {
@@ -27,7 +27,7 @@ export class ContributorsMapper {
   }
 
   static fromUsersWithPaginationGetResponse(
-    response: ResponseJsonApi<UserGetResponse[]>
+    response: ResponseJsonApi<UserDataJsonApi[]>
   ): PaginatedData<ContributorAddModel[]> {
     return {
       data: response.data.map(
diff --git a/src/app/shared/mappers/user/user.mapper.ts b/src/app/shared/mappers/user/user.mapper.ts
@@ -1,8 +1,8 @@
 import {
   User,
   UserData,
+  UserDataJsonApi,
   UserDataResponseJsonApi,
-  UserGetResponse,
   UserNamesJsonApi,
   UserSettings,
   UserSettingsGetResponse,
@@ -17,7 +17,7 @@ export class UserMapper {
     };
   }
 
-  static fromUserGetResponse(user: UserGetResponse): User {
+  static fromUserGetResponse(user: UserDataJsonApi): User {
     return {
       id: user.id,
       fullName: user.attributes.full_name,
diff --git a/src/app/shared/models/user/user.models.ts b/src/app/shared/models/user/user.models.ts
diff --git a/src/app/shared/models/view-only-links/view-only-link-response.model.ts b/src/app/shared/models/view-only-links/view-only-link-response.model.ts
diff --git a/src/app/shared/services/contributors.service.ts b/src/app/shared/services/contributors.service.ts

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { map, Observable } from 'rxjs';`
`3`	`3`	`import { inject, Injectable } from '@angular/core';`
`4`	`4`
`5`	`5`	`import { ResourceType } from '@osf/shared/enums';`
`6`		`-import { JsonApiResponse, PaginatedData, ResponseJsonApi, UserGetResponse } from '@osf/shared/models';`
	`6`	`+import { JsonApiResponse, PaginatedData, ResponseJsonApi, UserDataJsonApi } from '@osf/shared/models';`
`7`	`7`	`import { JsonApiService } from '@osf/shared/services';`
`8`	`8`
`9`	`9`	`import { AddModeratorType } from '../enums';`
`@@ -62,7 +62,7 @@ export class ModeratorsService {`
`62`	`62`	const baseUrl = `${environment.apiUrl}/users/?filter[full_name]=${value}&page=${page}`;
`63`	`63`
`64`	`64`	`return this.jsonApiService`
`65`		`- .get<ResponseJsonApi<UserGetResponse[]>>(baseUrl)`
	`65`	`+ .get<ResponseJsonApi<UserDataJsonApi[]>>(baseUrl)`
`66`	`66`	`.pipe(map((response) => ModerationMapper.fromUsersWithPaginationGetResponse(response)));`
`67`	`67`	`}`
`68`	`68`	`}`