Atualizando branch com mudanças no profile class

src/components/ProfileInfo/ProfileBio/ProfileBio.tsx

@@ -1,11 +1,10 @@
 import { Link } from 'react-router-dom';
 
 import { ProfileImage } from '@/components/ProfileImage/ProfileImage';
-import { getFullName, getProfileImageUrl } from '@/utils/profileUtils';
 import { ICON_EDIT_WHITE } from '@/utils/assets';
 import { groupBannerUrl } from '@/utils/apiUtils';
 
-import type { Profile } from '@/types/Profile';
+import { type Profile, ProfileClass } from '@/types/Profile';
 import { TypeLinkToBootstrapIcon, type Link as Link_API } from '@/types/Link';
 import type { Group } from '@/types/Group';
 import './ProfileBio.less';
@@ -26,6 +25,8 @@
         ? { backgroundImage: `url(${groupBannerUrl(props.organization)})` }
         : { backgroundColor: "var(--primary-color)" }
 
+    const profile = new ProfileClass(props.profile);
+
     return (
         <div className="profile-bio-component card">
 
@@ -42,11 +43,11 @@
             </div>
 
             <div className="intro intro-section">
-                <ProfileImage className="image" imageUrl={getProfileImageUrl(props.profile)} noImageColor="#505050" />
+                <ProfileImage className="image" imageUrl={profile.imageUrl} noImageColor="#505050" />
                 {
                     isOnOwnProfile
-                        ? <h2 className="card-heading name">{ getFullName(props.profile) }</h2>
-                        : <Link className="card-heading name" to={linkToOwnProfile}>{ getFullName(props.profile) }</Link>
+                        ? <h2 className="card-heading name">{ profile.fullname }</h2>
+                        : <Link className="card-heading name" to={linkToOwnProfile}>{ profile.fullname }</Link>
                 }
                 {
                     props.profile.bio === null || props.profile.bio.length === 0

src/components/UniversiHeader/components/WelcomeUser/WelcomeUser.tsx

@@ -3,7 +3,6 @@ import { Link, redirect, useNavigate } from "react-router-dom";
 import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
 import { AuthContext } from "@/contexts/Auth";
 import "./WelcomeUser.less"
-import { getProfileImageUrl } from "@/utils/profileUtils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 
 export function WelcomeUser() {
@@ -20,7 +19,7 @@ export function WelcomeUser() {
 
     return( !isLogged ? null
         :<div className="image-container">
-            <ProfileImage className="logged-user-image" imageUrl={auth.profile ? getProfileImageUrl(auth.profile) : undefined} noImageColor="var(--card-background-color)" onClick={() => {setProfileClicked(!profileClicked)}}/>
+            <ProfileImage className="logged-user-image" imageUrl={auth.profile ? auth.profile.imageUrl : undefined} noImageColor="var(--card-background-color)" onClick={() => {setProfileClicked(!profileClicked)}}/>
             {
                 profileClicked 
                 ?

src/contexts/Auth/AuthContext.tsx

@@ -1,18 +1,18 @@
 import { createContext } from "react";
 import { User } from "@/types/User";
-import { Profile } from "@/types/Profile";
+import { type ProfileClass } from "@/types/Profile";
 import type { Group } from "@/types/Group";
 
 export type AuthContextType = {
     user : User | null;
-    profile: Profile | null;
+    profile: ProfileClass | null;
     organization: Group | null;
 
-    signin: (email : string, password: string, recaptchaToken: string | null) => Promise<Profile | null>;
-    signinGoogle: () => Promise<Profile | null>;
+    signin: (email : string, password: string, recaptchaToken: string | null) => Promise<ProfileClass | null>;
+    signinGoogle: () => Promise<ProfileClass | null>;
     signout: () => Promise<void>;
 
-    updateLoggedUser: () => Promise<Profile | null>;
+    updateLoggedUser: () => Promise<ProfileClass | null>;
 }
 
 export const AuthContext = createContext<AuthContextType>(null!);

src/contexts/Auth/AuthProvider.tsx

@@ -1,12 +1,12 @@
 import { ReactNode, useEffect, useState } from "react";
 import { AuthContext } from "./AuthContext";
-import { Profile } from "@/types/Profile";
+import { ProfileClass } from "@/types/Profile";
 import { UniversimeApi } from "@/services/UniversimeApi";
 import { goTo } from "@/services/routes";
 import type { Group } from "@/types/Group";
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [profile, setProfile] = useState<Profile | null>(null);
+  const [profile, setProfile] = useState<ProfileClass | null>(null);
   const [organization, setOrganization] = useState<Group | null>(null);
   const [finishedLogin, setFinishedLogin] = useState<boolean>(false);
   const user = profile?.user ?? null;
@@ -90,5 +90,9 @@
     if(!await UniversimeApi.Auth.validateToken()) {
         return null;
     }
-    return (await UniversimeApi.Profile.profile()).body?.profile ?? null;
+
+    const responseProfile = (await UniversimeApi.Profile.profile()).body?.profile;
+    return responseProfile
+        ? new ProfileClass(responseProfile)
+        : null;
 }

src/pages/Group/Group.tsx

@@ -5,6 +5,7 @@ import { GroupContext, GroupIntro, GroupTabRenderer, GroupTabs, fetchGroupPageDa
 import { ProfileInfo } from "@/components/ProfileInfo/ProfileInfo";
 import { AuthContext } from "@/contexts/Auth";
 import "./Group.less";
+import { ProfileClass } from "@/types/Profile";
 
 export function GroupPage() {
     const page = useLoaderData() as GroupPageLoaderResponse;
@@ -72,11 +73,11 @@ export function GroupPage() {
             group: data.group!,
             loggedData: {
                 isParticipant: data.loggedData?.isParticipant!,
-                profile: data.loggedData?.profile!,
+                profile: new ProfileClass(data.loggedData?.profile!),
                 links: data.loggedData?.links ?? [],
                 groups: data.loggedData?.groups ?? [],
             },
-            participants: data.participants,
+            participants: data.participants.map(ProfileClass.new),
             subgroups: data.subGroups,
 
             currentContent: undefined,

src/pages/Group/GroupContext.tsx

@@ -1,13 +1,13 @@
 import { createContext } from "react";
 import { Group } from "@/types/Group";
-import { Profile } from "@/types/Profile";
+import { type ProfileClass } from "@/types/Profile";
 import type { Content, Folder } from "@/types/Capacity";
 import { Link } from "@/types/Link";
 
 export type GroupContextType = null | {
     group:         Group;
     subgroups:     Group[];
-    participants:  Profile[];
+    participants:  ProfileClass[];
     folders:       Folder[];
 
     currentContent: Folder | undefined;
@@ -33,7 +33,7 @@ export type GroupContextType = null | {
 
     loggedData: {
         isParticipant: boolean;
-        profile:       Profile;
+        profile:       ProfileClass;
         links:         Link[];
         groups:        Group[];
     };

src/pages/Group/GroupTabs/GroupPeople/GroupPeople.tsx

@@ -3,9 +3,8 @@ import { Link } from "react-router-dom";
 
 import { EMPTY_LIST_CLASS, GroupContext } from "@/pages/Group";
 import { setStateAsValue } from "@/utils/tsxUtils";
-import { Profile } from "@/types/Profile";
+import { ProfileClass } from "@/types/Profile";
 import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
-import { getFullName } from "@/utils/profileUtils";
 
 import "./GroupPeople.less";
 import { Filter } from "@/components/Filter/Filter";
@@ -33,15 +32,15 @@ export function GroupPeople() {
     );
 }
 
-function makePeopleList(people: Profile[], filter: string) {
+function makePeopleList(people: ProfileClass[], filter: string) {
     if (people.length === 0) {
         return <p className={EMPTY_LIST_CLASS}>Esse grupo não possui participantes.</p>
     }
 
     const lowercaseFilter = filter.toLowerCase();
     const filteredPeople = filter.length === 0
         ? people
-        : people.filter(p => (getFullName(p)).toLowerCase().includes(lowercaseFilter));
+        : people.filter(p => (p.fullname ?? "").toLowerCase().includes(lowercaseFilter));
 
     if (filteredPeople.length === 0) {
         return <p className={EMPTY_LIST_CLASS}>Nenhum participante encontrado com a pesquisa.</p>
@@ -52,7 +51,7 @@ function makePeopleList(people: Profile[], filter: string) {
         .map(renderPerson);
 }
 
-function renderPerson(person: Profile) {
+function renderPerson(person: ProfileClass) {
     const linkToProfile = `/profile/${person.user.name}`;
 
     const imageUrl = person.image?.startsWith("/")
@@ -66,7 +65,7 @@ function renderPerson(person: Profile) {
             </Link>
 
             <div className="info">
-                <Link to={linkToProfile} className="person-name">{getFullName(person)}</Link>
+                <Link to={linkToProfile} className="person-name">{person.fullname}</Link>
                 <p className="person-bio">{person.bio}</p>
             </div>
         </div>

src/pages/ManageProfile/ManageProfile.tsx

@@ -4,7 +4,6 @@ import { Navigate, useLoaderData, useNavigate } from "react-router-dom";
 import UniversimeApi from "@/services/UniversimeApi";
 import { ManageProfileLinks, ManageProfileLoaderResponse, ManageProfilePassword, ManageProfileImage, getManageLinks, getProfileImage } from "@/pages/ManageProfile";
 import { setStateAsValue } from "@/utils/tsxUtils";
-import { getProfileImageUrl } from "@/utils/profileUtils";
 import { AuthContext } from "@/contexts/Auth";
 import * as SwalUtils from "@/utils/sweetalertUtils";
 
@@ -38,7 +37,7 @@ export function ManageProfilePage() {
             <div id="left-side">
                 <form id="profile-edit" className="card">
                     <div className="image-name-container">
-                        <ManageProfileImage currentImage={getProfileImageUrl(profile)} />
+                        <ManageProfileImage currentImage={profile.imageUrl} />
 
                         <fieldset id="fieldset-name">
                             <legend>Altere seu nome</legend>

src/pages/ManageProfile/loader.ts

@@ -1,10 +1,9 @@
 import UniversimeApi from "@/services/UniversimeApi";
-import { GENDER_OPTIONS } from "@/utils/profileUtils";
-import { Gender, Profile } from "@/types/Profile";
+import { type Gender, ProfileClass, GENDER_OPTIONS } from "@/types/Profile";
 import { Link, TypeLink, TypeLinkToLabel } from "@/types/Link";
 
 export type ManageProfileLoaderResponse = {
-    profile: Profile | null;
+    profile: ProfileClass | null;
     links: Link[];
 
     genderOptions: {
@@ -46,7 +45,7 @@ export async function ManageProfileLoader(): Promise<ManageProfileLoaderResponse
         : [];
 
     return {
-        profile,
+        profile: profile ? new ProfileClass(profile) : null,
         links,
         genderOptions,
         typeLinks,

src/pages/Profile/ProfileContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react"
-import type { Profile } from "@/types/Profile";
+import type { ProfileClass } from "@/types/Profile";
 import type { Group } from "@/types/Group";
 import type { Competence, CompetenceType, Level } from "@/types/Competence";
 import type { Recommendation } from "@/types/Recommendation";
@@ -10,7 +10,7 @@ import type { Folder } from "@/types/Capacity";
 export type ProfileContextType = null | {
     accessingLoggedUser: boolean;
 
-    profile:        Profile;
+    profile:        ProfileClass;
     editCompetence: Competence | null;
 
     allCompetenceTypes:  CompetenceType[];

src/pages/Profile/ProfileLastRecommendations/ProfileLastRecommendations.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { ProfileContext } from '@/pages/Profile';
-import { getFullName, getProfileImageUrl } from '@/utils/profileUtils';
 import { ProfileImage } from '@/components/ProfileImage/ProfileImage';
 import './ProfileLastRecommendations.css'
+import { ProfileClass } from '@/types/Profile';
 
 const MAX_RECOMMENDATIONS_QUANTITY = 3;
 
@@ -12,25 +12,27 @@
     if (profileContext === null)
         return null;
 
+    const recommendationsReceived = profileContext.profileListData.recommendationsReceived.map(r => ({ ...r, origin: new ProfileClass(r.origin), destiny: new ProfileClass(r.destiny) }));
+
     return (
         <div className="last-recommendations">
             <h2 className="heading">Últimas Recomendações</h2>
-            { profileContext.profileListData.recommendationsReceived.length > 0 ?
+            { recommendationsReceived.length > 0 ?
                 <div className="list">
                     {
-                        profileContext.profileListData.recommendationsReceived.map((recommendation, i) => {
+                        recommendationsReceived.map((recommendation, i) => {
                             if (i >= MAX_RECOMMENDATIONS_QUANTITY)
                                 return null;
 
                             const originUrl = `/profile/${recommendation.origin.user.name}`;
                             return (
                                 <div className="recommendation" key={recommendation.id}>
                                     <Link to={originUrl} target='_blank'>
-                                    <ProfileImage className="image" imageUrl={getProfileImageUrl(recommendation.origin)} noImageColor='#8A8A8A' />
+                                    <ProfileImage className="image" imageUrl={recommendation.origin.imageUrl} noImageColor='#8A8A8A' />
                                     </Link>
 
                                     <div className="box">
-                                        <Link to={originUrl} target='_blank' className="user-name">{getFullName(recommendation.origin)}</Link>
+                                        <Link to={originUrl} target='_blank' className="user-name">{recommendation.origin.fullname}</Link>
                                         <h3 className="recommended-by">Recomendou pela competência:</h3>
                                         <h3 className="competence-name">{recommendation.competenceType.name}</h3>
                                     </div>

src/pages/Profile/ProfilePage.tsx

@@ -12,6 +12,7 @@ import * as SwalUtils from "@/utils/sweetalertUtils";
 import { AuthContext } from "@/contexts/Auth";
 import { SelectionBar } from "./SelectionBar/SelectionBar";
 
+import { ProfileClass } from "@/types/Profile";
 import './Profile.css';
 
 export function ProfilePage() {
@@ -27,7 +28,7 @@ export function ProfilePage() {
         accessingLoggedUser: loaderData.accessingLoggedUser,
         allCompetenceTypes:  loaderData.allCompetenceTypes,
         editCompetence:      null,
-        profile:             loaderData.profile!,
+        profile:             new ProfileClass(loaderData.profile!),
         profileListData: {
             achievements:            loaderData.profileListData.achievements,
             competences:             loaderData.profileListData.competences,

src/pages/Profile/ProfileSettings/ProfileSettings.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, MouseEvent, useContext, useMemo, useState } from 'react';
 import { ProfileContext } from '@/pages/Profile';
 import { Link, TypeLink, TypeLinkToBootstrapIcon, TypeLinkToLabel } from '@/types/Link';
-import { getFullName, separateFullName, GENDER_OPTIONS } from '@/utils/profileUtils';
+import { GENDER_OPTIONS, ProfileClass } from "@/types/Profile";
 import { UniversimeApi } from '@/services/UniversimeApi';
 import './ProfileSettings.css'
 
@@ -31,7 +31,7 @@
             <form action="" className="settings-form">
                 <div className="section name">
                     <h2>Nome</h2>
-                    <input id="name" type="text" placeholder='Insira seu nome e sobrenome' defaultValue={getFullName(profileContext.profile)} />
+                    <input id="name" type="text" placeholder='Insira seu nome e sobrenome' defaultValue={profileContext.profile.fullname ?? undefined} />
                 </div>
 
                 <div className="section biography">
@@ -183,7 +183,7 @@
             ? (genderElement as HTMLSelectElement).value
             : '';
 
-        const [name, lastname] = separateFullName(fullname);
+        const [name, lastname] = ProfileClass.separateFullname(fullname);
 
         UniversimeApi.Profile.edit({
             profileId: profileContext.profile.id,