fix(con): replace the old profile card component (#988)

* Refactor the profile card related code

* Replace the old profile card in the Mentorship and MentorshipsList components

* Add ConUserProfileCardProfileProp fragment for ConUserProfileCard component

* Remove the old ProfileCard component

* Rename NewProfileCard to ProfileCard

apps/redi-connect/src/components/organisms/ConUserProfileCard.generated.ts

@@ -0,0 +1,15 @@
+// THIS FILE IS GENERATED, DO NOT EDIT!
+import * as Types from '@talent-connect/data-access';
+
+export type ConUserProfileCardProfilePropFragment = { __typename?: 'ConProfile', id: string, fullName: string, languages?: Array<Types.Language> | null, categories: Array<Types.MentoringTopic>, rediLocation: Types.RediLocation, profileAvatarImageS3Key?: string | null };
+
+export const ConUserProfileCardProfilePropFragmentDoc = `
+    fragment ConUserProfileCardProfileProp on ConProfile {
+  id
+  fullName
+  languages
+  categories
+  rediLocation
+  profileAvatarImageS3Key
+}
+    `;

apps/redi-connect/src/components/organisms/ProfileCard.graphql → apps/redi-connect/src/components/organisms/ConUserProfileCard.graphql

@@ -1,4 +1,4 @@
-fragment ProfileCardProfileProp on ConProfile {
+fragment ConUserProfileCardProfileProp on ConProfile {
   id
   fullName
   languages

apps/redi-connect/src/components/organisms/MentorProfileCard.scss → apps/redi-connect/src/components/organisms/ConUserProfileCard.scss

@@ -1,7 +1,7 @@
 @import '_variables.scss';
 @import '~bulma/sass/utilities/_all';
 
-.mentor-profile-card-wrapper {
+.profile-card-wrapper {
   height: 464px;
 
   @include mobile() {

apps/redi-connect/src/components/organisms/MentorProfileCard.tsx → apps/redi-connect/src/components/organisms/ConUserProfileCard.tsx

@@ -1,40 +1,40 @@
-import placeholderImage from '../../assets/images/img-placeholder.png'
-import { ProfileCardProfilePropFragment } from './ProfileCard.generated'
-import './MentorProfileCard.scss'
-import { NewProfileCard } from '../../../../../libs/shared-atomic-design-components/src/lib/molecules/NewProfileCard'
+import { ProfileCard } from '@talent-connect/shared-atomic-design-components'
 import {
-  REDI_LOCATION_NAMES,
   CATEGORIES_MAP,
+  REDI_LOCATION_NAMES,
 } from '@talent-connect/shared-config'
+import placeholderImage from '../../assets/images/img-placeholder.png'
+import { ConUserProfileCardProfilePropFragment } from './ConUserProfileCard.generated'
+import './ConUserProfileCard.scss'
 
-interface MentorProfileCardProps {
-  mentorProfile: ProfileCardProfilePropFragment
+interface ConUserProfileCardProps {
+  profile: ConUserProfileCardProfilePropFragment
   linkTo?: string
   isFavorite?: boolean
   toggleFavorite?: (id: string) => void
 }
 
-export function MentorProfileCard({
-  mentorProfile,
+const ConUserProfileCard = ({
+  profile,
   toggleFavorite,
   linkTo,
   isFavorite,
-}: MentorProfileCardProps) {
+}: ConUserProfileCardProps) => {
   const {
     id,
     profileAvatarImageS3Key,
     fullName,
     rediLocation,
     languages,
     categories,
-  } = mentorProfile
+  } = profile
   const tags = categories.map((category) => CATEGORIES_MAP[category])
   const location = `ReDI ${REDI_LOCATION_NAMES[rediLocation]}`
   const avatar = profileAvatarImageS3Key || placeholderImage
 
   return (
-    <div className="mentor-profile-card-wrapper">
-      <NewProfileCard
+    <div className="profile-card-wrapper">
+      <ProfileCard
         profile={{ id, avatar, fullName, location, languages }}
         tags={tags}
         linkTo={linkTo}
@@ -44,3 +44,5 @@ export function MentorProfileCard({
     </div>
   )
 }
+
+export default ConUserProfileCard

apps/redi-connect/src/components/organisms/index.ts

@@ -2,6 +2,7 @@ export { default as ApplyForMentor } from './ApplyForMentor'
 export { default as Avatar } from './Avatar'
 export { default as CompleteMentorship } from './CompleteMentorship'
 export { default as ConfirmMentorship } from './ConfirmMentorship'
+export { default as ConUserProfileCard } from './ConUserProfileCard'
 export { default as DeclineMentorshipButton } from './DeclineMentorshipButton'
 export { default as EditableAbout } from './EditableAbout'
 export { default as EditableContactDetails } from './EditableContactDetails'
@@ -13,12 +14,11 @@ export { default as EditableOccupation } from './EditableOccupation'
 export { default as EditablePersonalDetail } from './EditablePersonalDetail'
 export { default as EditableSocialMedia } from './EditableSocialMedia'
 export { default as Footer } from './Footer'
+export { default as MContacts } from './modules/MContacts'
+export { default as MSessions } from './modules/MSessions'
 export { default as Navbar } from './Navbar'
 export { default as PreFooter } from './PreFooter'
-export { default as ProfileCard } from './ProfileCard'
 export { default as RediHero } from './RediHero'
 export { default as RediProgram } from './RediProgram'
 export { default as ReportProblem } from './ReportProblem'
 export { default as SideMenu } from './SideMenu'
-export { default as MContacts } from './modules/MContacts'
-export { default as MSessions } from './modules/MSessions'

apps/redi-connect/src/pages/app/find-a-mentor/FindAMentor.tsx

@@ -37,7 +37,7 @@ import {
 } from 'use-query-params'
 
 import { paginateItems } from '@talent-connect/shared-utils'
-import { MentorProfileCard } from '../../../components/organisms/MentorProfileCard'
+import { ConUserProfileCard } from '../../../components/organisms'
 import { LoggedIn } from '../../../components/templates'
 import { getAccessTokenFromLocalStorage } from '../../../services/auth/auth'
 import './FindAMentor.scss'
@@ -360,8 +360,8 @@ const FindAMentor = () => {
                 desktop={{ size: 4 }}
                 key={mentor.id}
               >
-                <MentorProfileCard
-                  mentorProfile={mentor}
+                <ConUserProfileCard
+                  profile={mentor}
                   linkTo={`/app/find-a-mentor/profile/${mentor.id}`}
                   toggleFavorite={() => toggleFavorite(mentor.id)}
                   isFavorite={isMentorFavorite(mentor.id)}

apps/redi-connect/src/pages/app/mentorship/Mentorship.tsx

@@ -13,9 +13,9 @@ import { Columns, Content } from 'react-bulma-components'
 import { useHistory, useParams } from 'react-router-dom'
 import {
   CompleteMentorship,
+  ConUserProfileCard,
   MContacts,
   MSessions,
-  ProfileCard,
   ReportProblem,
 } from '../../../components/organisms'
 import { LoggedIn } from '../../../components/templates'
@@ -93,7 +93,7 @@ function Mentorship() {
 
       <Columns>
         <Columns.Column size={4}>
-          <ProfileCard
+          <ConUserProfileCard
             profile={viewProfile}
             linkTo={`/app/mentorships/profile/${viewProfile.id}`}
           />

apps/redi-connect/src/pages/app/mentorship/MentorshipsList.tsx

@@ -5,7 +5,7 @@ import {
 import { Heading } from '@talent-connect/shared-atomic-design-components'
 import { Columns, Content } from 'react-bulma-components'
 import { Redirect } from 'react-router-dom'
-import { ProfileCard } from '../../../components/organisms'
+import { ConUserProfileCard } from '../../../components/organisms'
 import LoggedIn from '../../../components/templates/LoggedIn'
 
 function MentorshipList() {
@@ -51,9 +51,9 @@ function MentorshipList() {
       <Columns>
         {myActiveMatches.map((match) => (
           <Columns.Column size={4} key={match.id}>
-            <ProfileCard
-              linkTo={`/app/mentorships/${match.id}`}
+            <ConUserProfileCard
               profile={match.mentee}
+              linkTo={`/app/mentorships/${match.id}`}
             />
           </Columns.Column>
         ))}

apps/redi-talent-pool/src/components/organisms/JobseekerProfileCard.tsx

@@ -1,9 +1,9 @@
+import { ProfileCard } from '@talent-connect/shared-atomic-design-components'
 import {
   desiredPositionsIdToLabelMap,
   germanFederalStates,
   topSkillsIdToLabelMap,
 } from '@talent-connect/talent-pool/config'
-import { NewProfileCard } from '../../../../../libs/shared-atomic-design-components/src/lib/molecules/NewProfileCard'
 import placeholderImage from '../../assets/img-placeholder.png'
 import { JobseekerProfileCardJobseekerProfilePropFragment } from './JobseekerProfileCard.generated'
 import './JobseekerProfileCard.scss'
@@ -45,7 +45,7 @@ export function JobseekerProfileCard({
 
   return (
     <div className="jobSeeker-profile-card-wrapper">
-      <NewProfileCard
+      <ProfileCard
         profile={{ id, avatar, fullName, location, languages }}
         subheader={subheader}
         tags={tags}

libs/shared-atomic-design-components/src/lib/molecules/NewProfileCard.scss → libs/shared-atomic-design-components/src/lib/molecules/ProfileCard.scss

@@ -5,7 +5,7 @@
   text-decoration: none;
 }
 
-.new-profile-card {
+.profile-card {
   display: flex;
   flex-direction: column;
   border-radius: 4px;