add tags to profile

Author: ImanRezasefat

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<AdaptorRe
     return { data: null, error: 'Error in updating user wallet' };
   }
 };
+
+//FIXME Use this type after migrating to v3
+export const getUserDetailsAdaptor = async (username: string): Promise<AdaptorRes<UserDetails>> => {
+  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' };
+  }
+};

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<ImportRes> {
 export async function reviews(params: PaginateReq, filters?: FilterReq): Promise<Reviews> {
   return (await get<Reviews>('user/reviews', { params }, filters)).data;
 }
+
+export async function getUserDetails(username: string): Promise<UserDetails> {
+  return (await get<UserDetails>(`users/by-username/${username}`, { ...overwrittenConfigV3 })).data;
+}

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;
+}

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,
                         };

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",

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",

src/core/translation/locales/jp/profile.json

@@ -16,7 +16,9 @@
       "request-sent": "リクエスト送信済み",
       "connect": "接続",
       "message": "メッセージ"
-    }
+    },
+    "available-for-work": "仕事を探しています",
+    "hiring": "採用中"
   },
   "main-info": {
     "connections": "つながり",

src/core/translation/locales/kr/profile.json

@@ -16,7 +16,9 @@
       "request-sent": "요청 전송됨",
       "connect": "연결",
       "message": "메시지"
-    }
+    },
+    "available-for-work": "구직 중",
+    "hiring": "채용 중"
   },
   "main-info": {
     "connections": "연결",

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<DesktopHeaderProps> = ({
   identity,
   myProfile,
-  isLoggedIn,
   connectStatus,
   handleOpenEditInfoModal,
   handleOpenQRCodeModal,
@@ -41,6 +41,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
   displayConnectButton,
   displayMessageButton,
   displayThreeDotsButton,
+  userTags,
 }) => {
   const { username, name, profileImage } = getIdentityMeta(identity);
 
@@ -59,7 +60,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
             <div className="text-2xl md:text-3xl font-semibold text-Gray-light-mode-900">{name}</div>
             {type === 'users' && (identity as User).open_to_work && (
               <Chip
-                label="Available for work"
+                label={translate('profile-header.available-for-work')}
                 size="lg"
                 theme="secondary"
                 startIcon={<Dot color={variables.color_success_500} size="small" shadow={false} />}
@@ -69,13 +70,16 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
 
             {type === 'organizations' && (identity as Organization).hiring && (
               <Chip
-                label="Hiring"
+                label={translate('profile-header.hiring')}
                 size="lg"
                 theme="secondary"
                 startIcon={<Dot color={variables.color_success_500} size="small" shadow={false} />}
                 shape="sharp"
               />
             )}
+
+            {type === 'users' &&
+              userTags.map(tag => <Chip key={tag} label={tag} size="lg" theme="secondary" shape="sharp" />)}
           </div>
           <div className="text-base font-normal text-Gray-light-mode-500">{username}</div>
         </div>
@@ -88,7 +92,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
             onClick={handleOpenQRCodeModal}
           >
             <Icon fontSize={20} name="share-01" color={variables.color_grey_700} />
-            Share
+            {translate('profile-header.actions.share')}
           </Button>
           {displayMessageButton() && (
             <Button
@@ -97,7 +101,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
               style={{ height: '40px', fontSize: '14px' }}
               onClick={handleMessage}
             >
-              Message
+              {translate('profile-header.actions.message')}
             </Button>
           )}
           {displayConnectButton() && (
@@ -108,7 +112,9 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
               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')}
             </Button>
           )}
           {displayThreeDotsButton() && <ThreeDotsButton otherIdentityId={identity?.id || ''} />}

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,13 +104,15 @@ export const ProfileHeader = () => {
           displayConnectButton={displayConnectButton}
           displayMessageButton={displayMessageButton}
           displayThreeDotsButton={displayThreeDotsButton}
+          userTags={userTags}
         />
         <MobileHeader
           identity={identity}
           type={identityType}
           myProfile={myProfile}
           handleOpenEditInfoModal={handleOpenEditInfoModal}
           handleOpenEditAvatar={handleOpenEditAvatar}
+          userTags={userTags}
         />
       </div>
       <div className="md:hidden">