From f02e30bf05a063f8dccc3761be6fc1eb20195bbe Mon Sep 17 00:00:00 2001 From: Valentyna Dudchak Date: Thu, 14 Nov 2024 18:25:57 +0200 Subject: [PATCH 1/3] added AboutStudentAccordion --- .../translations/en/edit-profile.json | 14 +++- .../translations/uk/edit-profile.json | 14 +++- .../ProfessionalInfoTab.tsx | 20 ++++-- .../AboutStudentAccordion.tsx | 70 +++++++++++++++++++ .../AboutTutorAccordion.tsx | 57 ++------------- 5 files changed, 113 insertions(+), 62 deletions(-) create mode 100644 src/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx diff --git a/src/constants/translations/en/edit-profile.json b/src/constants/translations/en/edit-profile.json index 814c38ed3..b1e37c069 100644 --- a/src/constants/translations/en/edit-profile.json +++ b/src/constants/translations/en/edit-profile.json @@ -47,14 +47,22 @@ "proficiencyLevels": "Proficiency Levels", "editCategoryBtn": "Edit category", "deleteCategoryBtnDisabledTooltip": "You have opened cooperation(s)/offers with this category.\nPlease close it before deactivation", - "aboutTheTutorTitle": "About the tutor", - "aboutTheTutorDescription": "Describe your professional experience. This information will be displayed on your public profile.", - "accordion": { + "tutorAboutTitle": "About the tutor", + "tutorAboutDescription": "Describe your professional experience. This information will be displayed on your public profile.", + "studentAboutTitle": "About the student", + "studentAboutDescription": "Describe yourself and your learning experiance. This information will be displayed on your public profile.", + "accordionTutor": { "education": "Education", "workExperience": "Work experience", "scientificActivities": "Scientific activities", "awards": "Awards", "textareaLabel": "Text here" + }, + "accordionStudent": { + "personalIntroduction": "Personal Introduction", + "learningGoals": "Learning Goals", + "learningActivities": "Learning Activities", + "textareaLabel": "Text here" } }, "notificationsTab": { diff --git a/src/constants/translations/uk/edit-profile.json b/src/constants/translations/uk/edit-profile.json index 1d786175b..b02117c03 100644 --- a/src/constants/translations/uk/edit-profile.json +++ b/src/constants/translations/uk/edit-profile.json @@ -47,14 +47,22 @@ "proficiencyLevels": "Рівні кваліфікації", "editCategoryBtn": "Редагувати", "deleteCategoryBtnDisabledTooltip": "Ви розпочали співпрацю(і)/пропозицію. з цією категорією.\nБудь ласка, закрийте її перед деактивацією", - "aboutTheTutorTitle": "Про викладача", - "aboutTheTutorDescription": "Опишіть ваш професійний досвід. Ця інформація буде відображена у вашому публічному профілі.", - "accordion": { + "tutorAboutTitle": "Про викладача", + "tutorAboutDescription": "Опишіть ваш професійний досвід. Ця інформація буде відображена у вашому публічному профілі.", + "studentAboutTitle": "Про студента", + "studentAboutDescription": "Опишіть себе та свій досвід навчання. Ця інформація буде відображена у вашому публічному профілі.", + "accordionTutor": { "education": "Освіта", "workExperience": "Досвід роботи", "scientificActivities": "Наукова діяльність", "awards": "Нагороди", "textareaLabel": "Текст" + }, + "accordionStudent": { + "personalIntroduction": "Особисте представлення", + "learningGoals": "Навчальні цілі", + "learningActivities": "Навчальні активності", + "textareaLabel": "Текст" } }, "notificationsTab": { diff --git a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx index a270b3fa2..87f482d08 100644 --- a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx +++ b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx @@ -29,9 +29,11 @@ import { useAppDispatch, useAppSelector } from '~/hooks/use-redux' import ProfessionalCategoryList from '~/containers/edit-profile/professional-info-tab/professional-category-list/ProfessionalCategoryList' import AddProfessionalCategoryModal from '~/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal' import AboutTutorAccordion from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion' +import AboutStudentAccordion from '~/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion' import TitleWithDescription from '~/components/title-with-description/TitleWithDescription' import AppButton from '~/components/app-button/AppButton' import { scrollToAndHighlight } from '~/utils/scroll-and-highlight' +import { aboutStudentData } from '~/containers/user-profile/about-user-block/about-user-block.constants' import { styles } from '~/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.styles' import { highlightElem } from '~/containers/edit-profile/common.styles' @@ -103,17 +105,23 @@ const ProfessionalInfoTab: FC = () => { - + {userRole === UserRoleEnum.Tutor ? ( + + ) : ( + + )} ) diff --git a/src/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx b/src/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx new file mode 100644 index 000000000..33e668560 --- /dev/null +++ b/src/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx @@ -0,0 +1,70 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' + +import { + AccordionItem, + AboutStudentData, + TypographyVariantEnum, + UseFormEventHandler +} from '~/types' + +import ExpandMore from '@mui/icons-material/ExpandMore' + +import useAccordions from '~/hooks/use-accordions' +import Accordions from '~/components/accordion/Accordions' +import AppTextArea from '~/components/app-text-area/AppTextArea' + +import { styles } from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.styles' +import { aboutStudentKeys } from '~/containers/user-profile/about-user-block/about-user-block.constants' + +interface AboutStudentAccordionProps { + data: AboutStudentData + handleInputChange?: UseFormEventHandler< + AboutStudentData, + React.ChangeEvent + > +} + +const AboutStudentAccordion: FC = ({ + data, + handleInputChange +}) => { + const { t } = useTranslation() + const [expandedItem, handleAccordionChange] = useAccordions({ + initialState: 0, + toggle: true + }) + + const mockHandleInputChange = () => null + + const accordionItems: AccordionItem[] = aboutStudentKeys.map((item) => { + return { + title: `editProfilePage.profile.professionalTab.accordionStudent.${item}`, + content: ( + + ) + } + }) + + return ( + } + items={accordionItems} + onChange={handleAccordionChange} + sx={styles.accordion} + titleVariant={TypographyVariantEnum.Body2} + /> + ) +} + +export default AboutStudentAccordion diff --git a/src/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx b/src/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx index 8366e98ab..e75922bb4 100644 --- a/src/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx +++ b/src/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx @@ -1,5 +1,4 @@ import { FC } from 'react' - import { useTranslation } from 'react-i18next' import { @@ -16,6 +15,7 @@ import Accordions from '~/components/accordion/Accordions' import AppTextArea from '~/components/app-text-area/AppTextArea' import { styles } from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.styles' +import { aboutTutorKeys } from '~/containers/user-profile/about-user-block/about-user-block.constants' interface AboutTutorAccordionProps { data: ProfessionalBlock @@ -35,65 +35,22 @@ const AboutTutorAccordion: FC = ({ toggle: true }) - const accordionItems: AccordionItem[] = [ - { - title: 'editProfilePage.profile.professionalTab.accordion.education', + const accordionItems: AccordionItem[] = aboutTutorKeys.map((item) => { + return { + title: `editProfilePage.profile.professionalTab.accordionTutor.${item}`, content: ( ) - }, - { - title: 'editProfilePage.profile.professionalTab.accordion.workExperience', - content: ( - - ) - }, - { - title: - 'editProfilePage.profile.professionalTab.accordion.scientificActivities', - content: ( - - ) - }, - { - title: 'editProfilePage.profile.professionalTab.accordion.awards', - content: ( - - ) } - ] + }) return ( Date: Sun, 24 Nov 2024 18:27:53 +0200 Subject: [PATCH 2/3] fixed conditional rendering & optimized using useMemo --- .../ProfessionalInfoTab.tsx | 2 +- .../AboutStudentAccordion.tsx | 26 +++++++------- .../AboutTutorAccordion.tsx | 36 ++++++++++--------- .../about-user-block.constants.ts | 2 ++ 4 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx index 87f482d08..27c213f4f 100644 --- a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx +++ b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx @@ -100,7 +100,7 @@ const ProfessionalInfoTab: FC = () => { }) } - const TutorInfo = userRole === UserRoleEnum.Tutor && ( + const TutorInfo = ( } -const AboutStudentAccordion: FC = ({ - data, - handleInputChange -}) => { +const AboutStudentAccordion: FC = ({ data }) => { const { t } = useTranslation() const [expandedItem, handleAccordionChange] = useAccordions({ initialState: 0, toggle: true }) - const mockHandleInputChange = () => null - - const accordionItems: AccordionItem[] = aboutStudentKeys.map((item) => { - return { + const accordionItems: AccordionItem[] = useMemo(() => { + return aboutStudentKeys.map((item) => ({ title: `editProfilePage.profile.professionalTab.accordionStudent.${item}`, content: ( = ({ 'editProfilePage.profile.professionalTab.accordionStudent.textareaLabel' )} maxLength={1000} - onChange={mockHandleInputChange} - value={data.education} + onChange={mockHandleStudentInputChange} + value={data[item]} /> ) - } - }) + })) + }, [t, data]) return ( = ({ toggle: true }) - const accordionItems: AccordionItem[] = aboutTutorKeys.map((item) => { - return { - title: `editProfilePage.profile.professionalTab.accordionTutor.${item}`, - content: ( - - ) - } - }) + const accordionItems: AccordionItem[] = useMemo(() => { + return aboutTutorKeys.map((item) => { + return { + title: `editProfilePage.profile.professionalTab.accordionTutor.${item}`, + content: ( + + ) + } + }) + }, [t, handleInputChange, data]) return ( = [ 'scientificActivities', 'awards' ] + +export const mockHandleStudentInputChange = () => null From 85440eaa2e2dfd0214360d77de87dd1be3be4f8a Mon Sep 17 00:00:00 2001 From: Valentyna Dudchak Date: Sun, 24 Nov 2024 18:38:01 +0200 Subject: [PATCH 3/3] fixed tests --- .../professional-info-tab/ProfessionalInfoTab.spec.jsx | 2 +- .../about-tutor-accordion/AboutTutorAccordion.spec.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/unit/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.spec.jsx b/tests/unit/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.spec.jsx index 489891a66..50c1680ed 100644 --- a/tests/unit/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.spec.jsx +++ b/tests/unit/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.spec.jsx @@ -128,7 +128,7 @@ describe('ProfessionalInfoTab for tutor', () => { it('should render about tutor block', () => { const aboutTutorTitle = screen.getByText( - 'editProfilePage.profile.professionalTab.aboutTheTutorTitle' + 'editProfilePage.profile.professionalTab.tutorAboutTitle' ) expect(aboutTutorTitle).toBeInTheDocument() diff --git a/tests/unit/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.spec.jsx b/tests/unit/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.spec.jsx index 88b6d6b58..a44bd8f30 100644 --- a/tests/unit/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.spec.jsx +++ b/tests/unit/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.spec.jsx @@ -18,7 +18,7 @@ describe('AboutTutorAccordion', () => { it('should open first accordion by default', () => { const textAreas = screen.getAllByLabelText( - 'editProfilePage.profile.professionalTab.accordion.textareaLabel' + 'editProfilePage.profile.professionalTab.accordionTutor.textareaLabel' ) expect(textAreas).toHaveLength(4) @@ -28,7 +28,7 @@ describe('AboutTutorAccordion', () => { it('should open corresponding accordion content', () => { const secondItemTitle = screen.getByText( - 'editProfilePage.profile.professionalTab.accordion.workExperience' + 'editProfilePage.profile.professionalTab.accordionTutor.workExperience' ) fireEvent.click(secondItemTitle)