Add 'About the student' block (#2667)

* added AboutUserBlock

* added AboutStudentBlock

* fixed lint

src/constants/translations/en/user-profile-page.json

@@ -21,13 +21,18 @@
   "videoPresentation": {
     "title": "Video Presentation"
   },
-  "aboutTutor": {
+  "tutorAbout": {
     "title": "About the tutor",
     "education": "Education",
     "workExperience": "Work experience",
     "scientificActivities": "Scientific activities",
-    "awards": "Awards",
-    "socialMedia": "Social media"
+    "awards": "Awards"
+  },
+  "studentAbout": {
+    "title": "About the student",
+    "personalIntroduction": "Personal Introduction",
+    "learningGoals": "Learning Goals",
+    "learningActivities": "Learning Activities"
   },
   "reviews":{
     "titleTutor":"What students say",

src/constants/translations/uk/user-profile-page.json

@@ -25,13 +25,18 @@
   "videoPresentation": {
     "title": "Відео Презентація"
   },
-  "aboutTutor": {
+  "tutorAbout": {
     "title": "Про репетитора",
     "education": "Освіта",
     "workExperience": "Досвід роботи",
     "scientificActivities": "Наукова діяльність",
-    "awards": "Нагороди",
-    "socialMedia": "Соціальні медіа"
+    "awards": "Нагороди"
+  },
+  "studentAbout": {
+    "title": "Про студента",
+    "personalIntroduction": "Особисте представлення",
+    "learningGoals": "Навчальні цілі",
+    "learningActivities": "Навчальні активності"
   },
   "reviews": {
     "titleTutor": "Що говорять студенти",

src/containers/user-profile/about-user-block/AboutStudentBlock.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next'
+
+import AboutUserBlock from '~/containers/user-profile/about-user-block/AboutUserBlock'
+import {
+  aboutStudentKeys,
+  aboutStudentData
+} from '~/containers/user-profile/about-user-block/about-user-block.constants'
+import { UserRoleEnum } from '~/types'
+
+const AboutStudentBlock = () => {
+  const { t } = useTranslation()
+
+  return (
+    <AboutUserBlock
+      data={aboutStudentData}
+      itemKeys={aboutStudentKeys}
+      title={t('userProfilePage.studentAbout.title')}
+      userRole={UserRoleEnum.Student}
+    />
+  )
+}
+
+export default AboutStudentBlock

src/containers/user-profile/about-user-block/AboutTutorBlock.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import AboutUserBlock from '~/containers/user-profile/about-user-block/AboutUserBlock'
+import { aboutTutorKeys } from '~/containers/user-profile/about-user-block/about-user-block.constants'
+import { UserRoleEnum, ProfessionalBlock } from '~/types'
+
+interface AboutTutorBlockProps {
+  data: ProfessionalBlock
+}
+
+const AboutTutorBlock: FC<AboutTutorBlockProps> = ({ data }) => {
+  const { t } = useTranslation()
+
+  return (
+    <AboutUserBlock
+      data={data}
+      itemKeys={aboutTutorKeys}
+      title={t('userProfilePage.tutorAbout.title')}
+      userRole={UserRoleEnum.Tutor}
+    />
+  )
+}
+
+export default AboutTutorBlock

src/containers/user-profile/about-tutor-block/AboutTutorBlock.tsx → src/containers/user-profile/about-user-block/AboutUserBlock.tsx

@@ -1,5 +1,4 @@
 import { FC, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -8,27 +7,38 @@ import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import Accordions from '~/components/accordion/Accordions'
 import useAccordions from '~/hooks/use-accordions'
-import { ProfessionalBlock, TypographyVariantEnum } from '~/types'
-import { aboutTutorBlockKeys } from '~/containers/user-profile/about-tutor-block/AboutTutorBlock.constants'
+import {
+  ProfessionalBlock,
+  AboutStudentData,
+  TypographyVariantEnum,
+  UserRoleEnum
+} from '~/types'
 
-import { styles } from '~/containers/user-profile/about-tutor-block/AboutTutorBlock.styles'
+import { styles } from '~/containers/user-profile/about-user-block/AboutUserBlock.styles'
 
-interface AboutTutorBlockProps {
-  data: ProfessionalBlock
+interface AboutUserBlockProps {
+  data: ProfessionalBlock | AboutStudentData
+  itemKeys: Array<keyof ProfessionalBlock>
+  title: string
+  userRole: UserRoleEnum
 }
 
-const AboutTutorBlock: FC<AboutTutorBlockProps> = ({ data }) => {
-  const { t } = useTranslation()
+const AboutUserBlock: FC<AboutUserBlockProps> = ({
+  data,
+  itemKeys,
+  title,
+  userRole
+}) => {
   const { isMobile } = useBreakpoints()
 
   const [expandedItem, handleAccordionChange] = useAccordions()
 
   const accordionItems = useMemo(
     () =>
-      aboutTutorBlockKeys
+      itemKeys
         .filter((key) => data[key])
         .map((key) => ({
-          title: `userProfilePage.aboutTutor.${key}`,
+          title: `userProfilePage.${userRole}About.${key}`,
           description: data[key]
         })),
     [data]
@@ -45,7 +55,7 @@ const AboutTutorBlock: FC<AboutTutorBlockProps> = ({ data }) => {
   return (
     <Box sx={styles.root}>
       <Typography sx={styles.title} variant={titleVariant}>
-        {t('userProfilePage.aboutTutor.title')}
+        {title}
       </Typography>
       <Box sx={styles.wrapper}>
         <Accordions
@@ -65,4 +75,4 @@ const AboutTutorBlock: FC<AboutTutorBlockProps> = ({ data }) => {
   )
 }
 
-export default AboutTutorBlock
+export default AboutUserBlock

src/containers/user-profile/about-user-block/about-user-block.constants.ts

@@ -0,0 +1,21 @@
+import { AboutStudentData, ProfessionalBlock } from '~/types'
+
+export const aboutStudentKeys: Array<keyof AboutStudentData> = [
+  'personalIntroduction',
+  'learningGoals',
+  'learningActivities'
+]
+
+export const aboutStudentData: AboutStudentData = {
+  personalIntroduction: 'Test personal introduction.',
+  learningGoals:
+    'My primary goal is to become proficient in Python programming within the next six months, focusing on data analysis and automation.',
+  learningActivities: 'Some learning activities.'
+}
+
+export const aboutTutorKeys: Array<keyof ProfessionalBlock> = [
+  'education',
+  'workExperience',
+  'scientificActivities',
+  'awards'
+]

src/pages/user-profile/UserProfile.jsx

@@ -16,7 +16,8 @@ import {
 } from '~/components/profile-item/complete-profile.constants'
 
 import ProfileInfo from '~/containers/user-profile/profile-info/ProfileInfo'
-import AboutTutorBlock from '~/containers/user-profile/about-tutor-block/AboutTutorBlock'
+import AboutTutorBlock from '~/containers/user-profile/about-user-block/AboutTutorBlock'
+import AboutStudentBlock from '~/containers/user-profile/about-user-block/AboutStudentBlock'
 import VideoPresentation from '~/containers/user-profile/video-presentation/VideoPresentation'
 import CommentsWithRatingBlock from '~/containers/user-profile/comments-with-rating-block/CommentsWithRatingBlock'
 
@@ -67,6 +68,8 @@ const UserProfile = () => {
   }
 
   const isTutor = preferredRole === UserRoleEnum.Tutor
+  const isStudent = preferredRole === UserRoleEnum.Student
+
   const shouldShowPresentation =
     (isTutor && isMyProfile) ||
     (!isTutor && response.videoLink?.student) ||
@@ -96,6 +99,7 @@ const UserProfile = () => {
       {response.professionalBlock && (
         <AboutTutorBlock data={response.professionalBlock} />
       )}
+      {isStudent && <AboutStudentBlock />}
       {shouldShowPresentation && VideoPresentationComponent}
       <CommentsWithRatingBlock
         averageRating={user.reviewStats.averageRating}

src/types/user/user-interfaces/user.interfaces.ts

@@ -61,6 +61,13 @@ export interface ProfessionalBlock {
   [key: string]: string | undefined
 }
 
+export interface AboutStudentData {
+  personalIntroduction: string
+  learningGoals: string
+  learningActivities: string
+  [key: string]: string
+}
+
 export interface UserGeneralInfo
   extends Pick<UserResponse, 'firstName' | 'lastName' | 'professionalSummary'> {
   country: UserResponse['address']['country'] | null

tests/unit/pages/tutor-profile/TutorProfile.spec.jsx

@@ -136,7 +136,7 @@ describe('UserProfile', () => {
       extraData: professionalBlockMock
     })
 
-    const aboutTutorTitle = screen.getByText('userProfilePage.aboutTutor.title')
+    const aboutTutorTitle = screen.getByText('userProfilePage.tutorAbout.title')
     expect(aboutTutorTitle).toBeInTheDocument()
   })
 
@@ -146,7 +146,7 @@ describe('UserProfile', () => {
     })
 
     const aboutTutorTitle = screen.queryByText(
-      'userProfilePage.aboutTutor.title'
+      'userProfilePage.tutorAbout.title'
     )
     expect(aboutTutorTitle).not.toBeInTheDocument()
   })