Fix/profile updates

src/app/app.routes.ts

@@ -107,18 +107,14 @@ export const routes: Routes = [
         loadChildren: () => import('./features/registries/registries.routes').then((mod) => mod.registriesRoutes),
       },
       {
-        path: 'my-profile',
-        loadComponent: () =>
-          import('./features/profile/pages/my-profile/my-profile.component').then((mod) => mod.MyProfileComponent),
+        path: 'profile',
+        loadComponent: () => import('./features/profile/profile.component').then((mod) => mod.ProfileComponent),
         providers: [provideStates([ProfileState])],
         canActivate: [authGuard],
       },
       {
         path: 'user/:id',
-        loadComponent: () =>
-          import('./features/profile/pages/user-profile/user-profile.component').then(
-            (mod) => mod.UserProfileComponent
-          ),
+        loadComponent: () => import('./features/profile/profile.component').then((mod) => mod.ProfileComponent),
         providers: [provideStates([ProfileState])],
       },
       {

src/app/core/components/header/header.component.ts

@@ -29,7 +29,7 @@ export class HeaderComponent {
   items = [
     {
       label: 'navigation.myProfile',
-      command: () => this.router.navigate(['my-profile']),
+      command: () => this.router.navigate(['profile']),
     },
     { label: 'navigation.settings', command: () => this.router.navigate(['settings']) },
     {

src/app/core/constants/nav-items.constant.ts

@@ -352,7 +352,7 @@ export const MENU_ITEMS: MenuItem[] = [
   },
   {
     id: 'my-profile',
-    routerLink: '/my-profile',
+    routerLink: '/profile',
     label: 'navigation.profile',
     icon: 'fas fa-user',
     visible: false,

src/app/core/store/user/user.actions.ts

@@ -1,4 +1,4 @@
-import { Education, Employment, Social, User, UserSettings } from '@osf/shared/models';
+import { Education, Employment, SocialModel, User, UserSettings } from '@osf/shared/models';
 
 export class GetCurrentUser {
   static readonly type = '[User] Get Current User';
@@ -36,7 +36,7 @@ export class UpdateProfileSettingsEducation {
 export class UpdateProfileSettingsSocialLinks {
   static readonly type = '[Profile Settings] Update Social Links';
 
-  constructor(public payload: Partial<Social>[]) {}
+  constructor(public payload: Partial<SocialModel>[]) {}
 }
 
 export class UpdateProfileSettingsUser {

src/app/core/store/user/user.selectors.ts

@@ -1,6 +1,6 @@
 import { Selector } from '@ngxs/store';
 
-import { Education, Employment, Social, User, UserSettings } from '@osf/shared/models';
+import { Education, Employment, SocialModel, User, UserSettings } from '@osf/shared/models';
 
 import { UserStateModel } from './user.model';
 import { UserState } from './user.state';
@@ -54,7 +54,7 @@ export class UserSelectors {
   }
 
   @Selector([UserState])
-  static getSocialLinks(state: UserStateModel): Social | undefined {
+  static getSocialLinks(state: UserStateModel): SocialModel | undefined {
     return state.currentUser.data?.social;
   }
 

src/app/core/store/user/user.state.ts

@@ -8,7 +8,7 @@ import { inject, Injectable } from '@angular/core';
 import { ProfileSettingsKey } from '@osf/shared/enums';
 import { removeNullable } from '@osf/shared/helpers';
 import { UserMapper } from '@osf/shared/mappers';
-import { Social, User } from '@osf/shared/models';
+import { SocialModel, User } from '@osf/shared/models';
 
 import { UserService } from '../../services';
 
@@ -210,7 +210,7 @@ export class UserState {
       return;
     }
 
-    let social = {} as Partial<Social>;
+    let social = {} as Partial<SocialModel>;
 
     payload.forEach((item) => {
       social = {

src/app/features/moderation/models/registry-json-api.model.ts

@@ -1,24 +1,13 @@
-import { RegistrationReviewStates, RevisionReviewStates } from '@osf/shared/enums';
-import { ResponseJsonApi } from '@osf/shared/models';
+import { RegistrationNodeAttributesJsonApi, ResponseJsonApi } from '@osf/shared/models';
 
 export type RegistryResponseJsonApi = ResponseJsonApi<RegistryDataJsonApi[]>;
 
 export interface RegistryDataJsonApi {
   id: string;
-  attributes: RegistryAttributesJsonApi;
+  attributes: RegistrationNodeAttributesJsonApi;
   embeds: RegistryEmbedsJsonApi;
 }
 
-export interface RegistryAttributesJsonApi {
-  id: string;
-  title: string;
-  revision_state: RevisionReviewStates;
-  reviews_state: RegistrationReviewStates;
-  public: boolean;
-  embargoed: boolean;
-  embargo_end_date: string;
-}
-
 export interface RegistryEmbedsJsonApi {
   schema_responses: {
     data: { id: string }[];

src/app/features/moderation/models/registry-moderation.model.ts

@@ -9,7 +9,7 @@ export interface RegistryModeration {
   reviewsState: RegistrationReviewStates;
   public: boolean;
   embargoed: boolean;
-  embargoEndDate?: string;
+  embargoEndDate: string | null;
   actions: ReviewAction[];
   revisionId?: string | null;
 }

src/app/features/profile/components/profile-information/profile-information.component.html

@@ -21,7 +21,7 @@ <h1>{{ currentUser()?.fullName }}</h1>
       </p>
     </div>
 
-    <div class="flex flex-column gap-4">
+    <div class="flex flex-column gap-4 xl:align-items-end">
       <div class="flex flex-column gap-3 md:flex-row xl:gap-4">
         @if (currentUser()?.social?.orcid) {
           <div class="flex flex-row align-items-center gap-2">
@@ -61,54 +61,9 @@ <h3 class="font-bold">
       }
 
       <div class="flex flex-wrap align-items-center gap-3">
-        @if (currentUser()?.social?.github) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.github">
-            <img ngSrc="assets/icons/socials/github.svg" width="24" height="24" alt="github" />
-          </a>
-        }
-        @if (currentUser()?.social?.scholar) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.scholar">
-            <img ngSrc="assets/icons/socials/scholar.svg" width="24" height="24" alt="scholar" />
-          </a>
-        }
-        @if (currentUser()?.social?.twitter) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.twitter">
-            <img ngSrc="assets/icons/socials/x.svg" width="24" height="24" alt="x(twitter)" />
-          </a>
-        }
-        @if (currentUser()?.social?.linkedIn) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.linkedIn">
-            <img ngSrc="assets/icons/socials/linkedin.svg" width="24" height="24" alt="linkedin" />
-          </a>
-        }
-        @if (currentUser()?.social?.impactStory) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.impactStory">
-            <img ngSrc="assets/icons/socials/impactstory.png" width="24" height="24" alt="impactstory" />
-          </a>
-        }
-        @if (currentUser()?.social?.baiduScholar) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.baiduScholar">
-            <img ngSrc="assets/icons/socials/baidu.png" width="24" height="24" alt="baidu" />
-          </a>
-        }
-        @if (currentUser()?.social?.researchGate) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.researchGate">
-            <img ngSrc="assets/icons/socials/researchGate.svg" width="24" height="24" alt="researchGate" />
-          </a>
-        }
-        @if (currentUser()?.social?.researcherId) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.researcherId">
-            <img ngSrc="assets/icons/socials/researcherID.png" width="24" height="24" alt="researchId" />
-          </a>
-        }
-        @if (currentUser()?.social?.ssrn) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.researcherId">
-            <img ngSrc="assets/icons/socials/ssrn.svg" width="24" height="24" alt="ssrn" />
-          </a>
-        }
-        @if (currentUser()?.social?.academiaProfileID) {
-          <a class="cursor-pointer custom-light-hover" [href]="currentUser()?.social?.academiaProfileID">
-            <img ngSrc="assets/icons/socials/academia.svg" width="24" height="24" alt="academia" />
+        @for (social of userSocials(); track social.alt) {
+          <a class="cursor-pointer custom-light-hover" [href]="social.url" target="_blank" rel="noopener noreferrer">
+            <img [ngSrc]="social.icon" width="24" height="24" [alt]="social.alt | translate" />
           </a>
         }
       </div>

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -7,9 +7,12 @@ import { ChangeDetectionStrategy, Component, computed, inject, input, output } f
 import { toSignal } from '@angular/core/rxjs-interop';
 
 import { EducationHistoryComponent, EmploymentHistoryComponent } from '@osf/shared/components';
+import { SOCIAL_LINKS } from '@osf/shared/constants';
 import { IS_MEDIUM } from '@osf/shared/helpers';
 import { User } from '@osf/shared/models';
 
+import { mapUserSocials } from '../../helpers';
+
 @Component({
   selector: 'osf-profile-information',
   imports: [Button, EmploymentHistoryComponent, EducationHistoryComponent, TranslatePipe, DatePipe, NgOptimizedImage],
@@ -28,6 +31,8 @@ export class ProfileInformationComponent {
     () => this.currentUser()?.employment?.length || this.currentUser()?.education?.length
   );
 
+  userSocials = computed(() => mapUserSocials(this.currentUser()?.social, SOCIAL_LINKS));
+
   toProfileSettings() {
     this.editProfile.emit();
   }

src/app/features/profile/helpers/index.ts

@@ -0,0 +1 @@
+export * from './user-socials.helper';

src/app/features/profile/helpers/user-socials.helper.ts

@@ -0,0 +1,39 @@
+import { SocialLinksModel, SocialLinkViewModel, SocialModel } from '@osf/shared/models';
+
+export function mapUserSocials(
+  socialData: SocialModel | undefined,
+  socialLinks: SocialLinksModel[]
+): SocialLinkViewModel[] {
+  if (!socialData) {
+    return [];
+  }
+
+  return socialLinks.reduce<SocialLinkViewModel[]>((acc, social) => {
+    const socialValue = socialData[social.key];
+
+    if (!socialValue || (Array.isArray(socialValue) && socialValue.length === 0)) {
+      return acc;
+    }
+
+    let url;
+    if (social.linkedField) {
+      const linkedValue = socialData[social.linkedField.key];
+      if (linkedValue) {
+        url = `${social.address}${socialValue}${social.linkedField.address}${linkedValue}`;
+      }
+    } else {
+      const value = Array.isArray(socialValue) ? socialValue[0] : socialValue;
+      url = social.address + value;
+    }
+
+    if (url && social.key !== 'profileWebsites') {
+      acc.push({
+        url,
+        icon: `assets/icons/socials/${social.icon}`,
+        alt: social.label,
+      });
+    }
+
+    return acc;
+  }, []);
+}