diff --git a/src/core/adaptors/users/index.adaptors.tsx b/src/core/adaptors/users/index.adaptors.tsx index 22b8639f4..0f847b67b 100644 --- a/src/core/adaptors/users/index.adaptors.tsx +++ b/src/core/adaptors/users/index.adaptors.tsx @@ -5,11 +5,13 @@ import { addLanguage, Education, Experience, + getUserDetails, importLinkedin, LanguageCode, ProjectType, reviews, updateWallet, + UserDetails, } from 'src/core/api'; import { getIdentityMeta } from 'src/core/utils'; import { v4 as uuidv4 } from 'uuid'; @@ -146,3 +148,14 @@ export const updateWalletAdaptor = async (payload: WalletReq): Promise> => { + try { + const data = await getUserDetails(username); + return { data, error: null }; + } catch (error) { + console.error('Error in getting user details: ', error); + return { data: null, error: 'Error in getting user details' }; + } +}; diff --git a/src/core/api/users/users.api.ts b/src/core/api/users/users.api.ts index 06b0a926b..75d0c90e0 100644 --- a/src/core/api/users/users.api.ts +++ b/src/core/api/users/users.api.ts @@ -24,6 +24,7 @@ import { ReferReq, ImportRes, Reviews, + UserDetails, } from './users.types'; const overwrittenConfigV3 = { @@ -165,3 +166,7 @@ export async function importLinkedin(file: File): Promise { export async function reviews(params: PaginateReq, filters?: FilterReq): Promise { return (await get('user/reviews', { params }, filters)).data; } + +export async function getUserDetails(username: string): Promise { + return (await get(`users/by-username/${username}`, { ...overwrittenConfigV3 })).data; +} diff --git a/src/core/api/users/users.types.ts b/src/core/api/users/users.types.ts index 1ba73a27c..ae5940307 100644 --- a/src/core/api/users/users.types.ts +++ b/src/core/api/users/users.types.ts @@ -280,3 +280,27 @@ export interface Review { export interface Reviews extends PaginateRes { items: Review[]; } + +//FIXME Use this type after migrating to v3 +export interface UserDetails { + id: string; + first_name: string; + last_name: string; + username: string; + mission: string | null; + impact_points: number; + social_causes: string[]; + followers: number; + followings: number; + skills: string[]; + open_to_work: boolean; + open_to_volunteer: boolean; + identity_verified: boolean; + events: string[]; + tags: string[]; + avatar_id: string | null; + avatar: Media | null; + cover_id: string | null; + cover: Media | null; + created_at: string; +} diff --git a/src/core/router/router.blueprint.tsx b/src/core/router/router.blueprint.tsx index defec3280..cfafa7363 100644 --- a/src/core/router/router.blueprint.tsx +++ b/src/core/router/router.blueprint.tsx @@ -40,7 +40,7 @@ import FallBack from 'src/pages/error/fallback/fallback'; import { NotFound } from 'src/pages/error/notFound'; import { RootState } from 'src/store'; -import { getReviewsAdaptor } from '../adaptors/users/index.adaptors'; +import { getReviewsAdaptor, getUserDetailsAdaptor } from '../adaptors/users/index.adaptors'; import { DeepLinks } from '../deepLinks'; import { checkSearchFilters } from '../utils'; @@ -84,12 +84,14 @@ export const blueprint: RouteObject[] = [ kind: 'SERVICE', }); const reviews = await getReviewsAdaptor(1, 5); + const userDetails = await getUserDetailsAdaptor(params.id); // Keep this, it might be needed in the future // const [userBadges, missions] = await Promise.all([badges(user.id), userMissions(user.id)]); return { user, services: services.data, reviews: reviews.data, + userTags: userDetails.data?.tags || [], // badges: userBadges, // missions, }; diff --git a/src/core/translation/locales/en/profile.json b/src/core/translation/locales/en/profile.json index 7b2bcefae..73e2af763 100644 --- a/src/core/translation/locales/en/profile.json +++ b/src/core/translation/locales/en/profile.json @@ -16,7 +16,9 @@ "request-sent": "Request sent", "connect": "Connect", "message": "Message" - } + }, + "available-for-work": "Available for work", + "hiring": "Hiring" }, "main-info": { "connections": "connections", diff --git a/src/core/translation/locales/es/profile.json b/src/core/translation/locales/es/profile.json index ef9a47319..01de7fc1c 100644 --- a/src/core/translation/locales/es/profile.json +++ b/src/core/translation/locales/es/profile.json @@ -16,7 +16,9 @@ "request-sent": "Solicitud enviada", "connect": "Conectar", "message": "Mensaje" - } + }, + "available-for-work": "Disponible para trabajar", + "hiring": "Contratando" }, "main-info": { "connections": "conexiones", diff --git a/src/core/translation/locales/jp/profile.json b/src/core/translation/locales/jp/profile.json index a3b3f30f5..63e2ce2f5 100644 --- a/src/core/translation/locales/jp/profile.json +++ b/src/core/translation/locales/jp/profile.json @@ -16,7 +16,9 @@ "request-sent": "リクエスト送信済み", "connect": "接続", "message": "メッセージ" - } + }, + "available-for-work": "仕事を探しています", + "hiring": "採用中" }, "main-info": { "connections": "つながり", diff --git a/src/core/translation/locales/kr/profile.json b/src/core/translation/locales/kr/profile.json index 19f027dd6..0c3f75d4f 100644 --- a/src/core/translation/locales/kr/profile.json +++ b/src/core/translation/locales/kr/profile.json @@ -16,7 +16,9 @@ "request-sent": "요청 전송됨", "connect": "연결", "message": "메시지" - } + }, + "available-for-work": "구직 중", + "hiring": "채용 중" }, "main-info": { "connections": "연결", diff --git a/src/modules/userProfile/components/profileHeader/desktopHeader.tsx b/src/modules/userProfile/components/profileHeader/desktopHeader.tsx index 039117344..0ab47fdc9 100644 --- a/src/modules/userProfile/components/profileHeader/desktopHeader.tsx +++ b/src/modules/userProfile/components/profileHeader/desktopHeader.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ConnectStatus, Organization, User } from 'src/core/api'; -import { getIdentityMeta } from 'src/core/utils'; +import { getIdentityMeta, translate } from 'src/core/utils'; import { ThreeDotsButton } from 'src/modules/connections/threeDotsButton'; import { AvatarProfile } from 'src/modules/general/components/avatarProfile'; import { Button } from 'src/modules/general/components/Button'; @@ -26,11 +26,11 @@ interface DesktopHeaderProps { displayConnectButton: () => boolean; displayMessageButton: () => boolean; displayThreeDotsButton: () => boolean; + userTags: string[]; } export const DesktopHeader: React.FC = ({ identity, myProfile, - isLoggedIn, connectStatus, handleOpenEditInfoModal, handleOpenQRCodeModal, @@ -41,6 +41,7 @@ export const DesktopHeader: React.FC = ({ displayConnectButton, displayMessageButton, displayThreeDotsButton, + userTags, }) => { const { username, name, profileImage } = getIdentityMeta(identity); @@ -59,7 +60,7 @@ export const DesktopHeader: React.FC = ({
{name}
{type === 'users' && (identity as User).open_to_work && ( } @@ -69,13 +70,16 @@ export const DesktopHeader: React.FC = ({ {type === 'organizations' && (identity as Organization).hiring && ( } shape="sharp" /> )} + + {type === 'users' && + userTags.map(tag => )}
{username}
@@ -88,7 +92,7 @@ export const DesktopHeader: React.FC = ({ onClick={handleOpenQRCodeModal} > - Share + {translate('profile-header.actions.share')} {displayMessageButton() && ( )} {displayConnectButton() && ( @@ -108,7 +112,9 @@ export const DesktopHeader: React.FC = ({ style={{ height: '40px', fontSize: '14px' }} onClick={() => setOpenConnectRequest(true)} > - {connectStatus === 'PENDING' ? 'Request sent' : 'Connect'} + {connectStatus === 'PENDING' + ? translate('profile-header.actions.request-sent') + : translate('profile-header.actions.connect')} )} {displayThreeDotsButton() && } diff --git a/src/modules/userProfile/components/profileHeader/index.tsx b/src/modules/userProfile/components/profileHeader/index.tsx index fe99f6611..32c2162e5 100644 --- a/src/modules/userProfile/components/profileHeader/index.tsx +++ b/src/modules/userProfile/components/profileHeader/index.tsx @@ -16,7 +16,11 @@ import { EditImageModal } from '../../containers/editImage'; import { EditInfoOrgModal } from '../../containers/editInfoOrg'; import { ShareProfile } from '../../containers/shareProfile'; -export const ProfileHeader = () => { +interface ProfileHeaderProps { + userTags?: string[]; +} + +export const ProfileHeader = ({ userTags = [] }: ProfileHeaderProps) => { const { identity, identityType, @@ -100,6 +104,7 @@ export const ProfileHeader = () => { displayConnectButton={displayConnectButton} displayMessageButton={displayMessageButton} displayThreeDotsButton={displayThreeDotsButton} + userTags={userTags} /> { myProfile={myProfile} handleOpenEditInfoModal={handleOpenEditInfoModal} handleOpenEditAvatar={handleOpenEditAvatar} + userTags={userTags} />
diff --git a/src/modules/userProfile/components/profileHeader/mobileHeader.tsx b/src/modules/userProfile/components/profileHeader/mobileHeader.tsx index a3e4aae69..adfdffc7c 100644 --- a/src/modules/userProfile/components/profileHeader/mobileHeader.tsx +++ b/src/modules/userProfile/components/profileHeader/mobileHeader.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { Organization, User } from 'src/core/api'; -import { getIdentityMeta } from 'src/core/utils'; +import { getIdentityMeta, translate } from 'src/core/utils'; import { AvatarProfile } from 'src/modules/general/components/avatarProfile'; +import { Chip } from 'src/modules/general/components/Chip'; import { Dot } from 'src/modules/general/components/dot'; import { IconButton } from 'src/modules/general/components/iconButton'; import variables from 'src/styles/constants/_exports.module.scss'; @@ -14,6 +15,7 @@ interface MobileHeaderProps { handleOpenEditInfoModal: () => void; handleOpenEditAvatar: () => void; type: 'users' | 'organizations'; + userTags: string[]; } export const MobileHeader: React.FC = ({ identity, @@ -21,6 +23,7 @@ export const MobileHeader: React.FC = ({ handleOpenEditInfoModal, handleOpenEditAvatar, type, + userTags, }) => { const { profileImage, name, username } = getIdentityMeta(identity); return ( @@ -48,7 +51,15 @@ export const MobileHeader: React.FC = ({ {type === 'users' && (identity as User).open_to_work && (
- Available for work + {translate('profile-header.available-for-work')} +
+ )} + + {type === 'users' && !!userTags.length && ( +
+ {userTags.map(tag => ( + + ))}
)} diff --git a/src/pages/userProfile/index.tsx b/src/pages/userProfile/index.tsx index 4c4bb3d22..00e51acee 100644 --- a/src/pages/userProfile/index.tsx +++ b/src/pages/userProfile/index.tsx @@ -6,11 +6,11 @@ import css from './userProfile.module.scss'; import { useUserProfile } from './useUserProfile'; export const UserProfile = () => { - const { tabs, activeTabIndex } = useUserProfile(); + const { tabs, activeTabIndex, userTags } = useUserProfile(); return (
- +