Add functionality to edit AboutStudentAccordion on the student profil…

…e edit page (#2899) * added aboutStudent to redux editProfile * update student data * finished update for student * showing data from response in 'About the student' * fixed test * fixed test * fixed error in user profile * fixed ProfessionalInfoTab * fixed sonar issues * Revert "fixed sonar issues" This reverts commit 6e080f5. * reverted changes * added curly braces for better readability * Revert "added curly braces for better readability" This reverts commit 783bc40. * added curly braces
ita-social-projects · Nov 28, 2024 · 1451bae · 1451bae
1 parent d312938
commit 1451bae
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 35 deletions.
diff --git a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx
@@ -8,6 +8,7 @@ import AddIcon from '@mui/icons-material/Add'
 import { useModalContext } from '~/context/modal-context'
 
 import {
+  AboutStudentData,
   ButtonVariantEnum,
   ComponentEnum,
   MainUserRole,
@@ -33,7 +34,6 @@ import AboutStudentAccordion from '~/containers/edit-profile/professional-info-t
 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'
@@ -42,20 +42,40 @@ const ProfessionalInfoTab: FC = () => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const { userRole } = useAppSelector((state) => state.appMain)
-  const { categories, professionalBlock } = useAppSelector(
+  const { categories, professionalBlock, aboutStudent } = useAppSelector(
     (state) => state.editProfile
   )
 
   const { openModal, closeModal } = useModalContext()
 
+  const isTutor = userRole === UserRoleEnum.Tutor
+
   const { isValid, data, handleInputChange } = useForm<ProfessionalBlock>({
     initialValues: professionalBlock
   })
 
-  const debouncedProfessionalBlockData = useDebounce(() => {
-    dispatch(setField({ field: 'professionalBlock', value: data }))
+  const {
+    isValid: isValidStudent,
+    data: dataStudent,
+    handleInputChange: handleInputChangeStudent
+  } = useForm<AboutStudentData>({
+    initialValues: aboutStudent
+  })
+
+  const debouncedAboutUserData = useDebounce(() => {
+    dispatch(
+      setField({
+        field: isTutor ? 'professionalBlock' : 'aboutStudent',
+        value: isTutor ? data : dataStudent
+      })
+    )
   }, 300)
 
+  useEffect(() => {
+    debouncedAboutUserData()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, dataStudent])
+
   const { hash, pathname } = useLocation()
 
   useEffect(() => {
@@ -64,11 +84,6 @@ const ProfessionalInfoTab: FC = () => {
     }
   }, [pathname, hash])
 
-  useEffect(() => {
-    debouncedProfessionalBlockData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data])
-
   const handleDeleteCategory = (categoryId: string) => {
     const userRoleToDeleteCategory = userRole as MainUserRole
     dispatch(
@@ -78,9 +93,12 @@ const ProfessionalInfoTab: FC = () => {
 
   useEffect(() => {
     dispatch(
-      updateValidityStatus({ tab: 'professionalInfoTab', value: isValid })
+      updateValidityStatus({
+        tab: 'professionalInfoTab',
+        value: isValid && isValidStudent
+      })
     )
-  }, [isValid, dispatch])
+  }, [isValid, isValidStudent, dispatch])
 
   const openProfessionalCategoryModal: OpenProfessionalCategoryModalHandler = (
     initialValues,
@@ -100,7 +118,7 @@ const ProfessionalInfoTab: FC = () => {
     })
   }
 
-  const TutorInfo = (
+  const AboutUserInfo = (
     <Box component='section' id='education'>
       <Box sx={highlightElem}></Box>
       <TitleWithDescription
@@ -114,13 +132,16 @@ const ProfessionalInfoTab: FC = () => {
         )}
       />
       <Box sx={styles.accordionContainer}>
-        {userRole === UserRoleEnum.Tutor ? (
+        {isTutor ? (
           <AboutTutorAccordion
             data={data}
             handleInputChange={handleInputChange}
           />
         ) : (
-          <AboutStudentAccordion data={aboutStudentData} />
+          <AboutStudentAccordion
+            data={dataStudent}
+            handleInputChange={handleInputChangeStudent}
+          />
         )}
       </Box>
     </Box>
@@ -160,7 +181,7 @@ const ProfessionalInfoTab: FC = () => {
           openProfessionalCategoryModal={openProfessionalCategoryModal}
         />
       </Box>
-      {TutorInfo}
+      {AboutUserInfo}
     </Box>
   )
 }

diff --git a/...ners/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx b/...ners/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx
@@ -15,20 +15,20 @@ 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,
-  mockHandleStudentInputChange
-} from '~/containers/user-profile/about-user-block/about-user-block.constants'
+import { aboutStudentKeys } from '~/containers/user-profile/about-user-block/about-user-block.constants'
 
 interface AboutStudentAccordionProps {
   data: AboutStudentData
-  handleInputChange?: UseFormEventHandler<
+  handleInputChange: UseFormEventHandler<
     AboutStudentData,
     React.ChangeEvent<HTMLInputElement>
   >
 }
 
-const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({ data }) => {
+const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({
+  data,
+  handleInputChange
+}) => {
   const { t } = useTranslation()
   const [expandedItem, handleAccordionChange] = useAccordions({
     initialState: 0,
@@ -45,12 +45,12 @@ const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({ data }) => {
             'editProfilePage.profile.professionalTab.accordionStudent.textareaLabel'
           )}
           maxLength={1000}
-          onChange={mockHandleStudentInputChange}
+          onChange={handleInputChange(item)}
           value={data[item]}
         />
       )
     }))
-  }, [t, data])
+  }, [t, data, handleInputChange])
 
   return (
     <Accordions

diff --git a/src/containers/user-profile/about-user-block/AboutStudentBlock.tsx b/src/containers/user-profile/about-user-block/AboutStudentBlock.tsx
@@ -1,18 +1,20 @@
+import { FC } from 'react'
 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'
+import { aboutStudentKeys } from '~/containers/user-profile/about-user-block/about-user-block.constants'
+import { UserRoleEnum, AboutStudentData } from '~/types'
 
-const AboutStudentBlock = () => {
+interface AboutStudentBlockProps {
+  data: AboutStudentData
+}
+
+const AboutStudentBlock: FC<AboutStudentBlockProps> = ({ data }) => {
   const { t } = useTranslation()
 
   return (
     <AboutUserBlock
-      data={aboutStudentData}
+      data={data}
       itemKeys={aboutStudentKeys}
       title={t('userProfilePage.studentAbout.title')}
       userRole={UserRoleEnum.Student}

diff --git a/src/pages/edit-profile/EditProfile.tsx b/src/pages/edit-profile/EditProfile.tsx
@@ -147,6 +147,7 @@ const EditProfile = () => {
       videoLink,
       notificationSettings,
       professionalBlock,
+      aboutStudent,
       categories,
       ...rest
     } = changedFields
@@ -168,6 +169,10 @@ const EditProfile = () => {
     if (professionalBlock)
       dataToUpdate.professionalBlock = profileState.professionalBlock
 
+    if (aboutStudent) {
+      dataToUpdate.aboutStudent = aboutStudent
+    }
+
     if (categories) {
       dataToUpdate.mainSubjects = categories
     }

diff --git a/src/pages/user-profile/UserProfile.jsx b/src/pages/user-profile/UserProfile.jsx
@@ -68,7 +68,6 @@ const UserProfile = () => {
   }
 
   const isTutor = preferredRole === UserRoleEnum.Tutor
-  const isStudent = preferredRole === UserRoleEnum.Student
 
   const shouldShowPresentation =
     (isTutor && isMyProfile) ||
@@ -99,7 +98,9 @@ const UserProfile = () => {
       {response.professionalBlock && (
         <AboutTutorBlock data={response.professionalBlock} />
       )}
-      {isStudent && <AboutStudentBlock />}
+      {response.aboutStudent && (
+        <AboutStudentBlock data={response.aboutStudent} />
+      )}
       {shouldShowPresentation && VideoPresentationComponent}
       <CommentsWithRatingBlock
         averageRating={user.reviewStats.averageRating}

diff --git a/src/redux/features/editProfileSlice.ts b/src/redux/features/editProfileSlice.ts
@@ -12,6 +12,7 @@ import {
   MainUserRole,
   NotificationSettings,
   ProfessionalBlock,
+  AboutStudentData,
   SubjectNameInterface,
   UpdatedPhoto,
   UpdateUserParams,
@@ -34,6 +35,7 @@ export interface EditProfileState {
   photo?: UpdatedPhoto | null
   categories: DataByRole<UserMainSubject[]>
   professionalBlock: ProfessionalBlock
+  aboutStudent: AboutStudentData
   notificationSettings: NotificationSettings
   loading: LoadingStatus
   error: string | null
@@ -51,6 +53,11 @@ export const initialProfessoinalBlock: ProfessionalBlock = {
   scientificActivities: '',
   awards: ''
 }
+export const initialAboutStudent: AboutStudentData = {
+  personalIntroduction: '',
+  learningGoals: '',
+  learningActivities: ''
+}
 export const intitialNotificationSettings: NotificationSettings = {
   isOfferStatusNotification: false,
   isChatNotification: false,
@@ -69,6 +76,7 @@ const initialState: EditProfileState = {
   photo: null,
   categories: { [UserRoleEnum.Tutor]: [], [UserRoleEnum.Student]: [] },
   professionalBlock: initialProfessoinalBlock,
+  aboutStudent: initialAboutStudent,
   notificationSettings: intitialNotificationSettings,
   loading: LoadingStatusEnum.Idle,
   error: null,
@@ -94,6 +102,7 @@ const updateStateFromPayload = (
     videoLink,
     mainSubjects,
     professionalBlock,
+    aboutStudent,
     notificationSettings,
     bookmarkedOffers
   } = payload
@@ -108,6 +117,7 @@ const updateStateFromPayload = (
   state.videoLink = videoLink
   state.categories = mainSubjects
   state.professionalBlock = professionalBlock || initialProfessoinalBlock
+  state.aboutStudent = aboutStudent || initialAboutStudent
   state.notificationSettings =
     notificationSettings || intitialNotificationSettings
   state.bookmarkedOffers = bookmarkedOffers

diff --git a/src/types/user/user-interfaces/user.interfaces.ts b/src/types/user/user-interfaces/user.interfaces.ts
@@ -48,6 +48,7 @@ export interface UserResponse {
   FAQ: DataByRole<Faq[]>
   videoLink: DataByRole<string>
   professionalBlock?: ProfessionalBlock
+  aboutStudent?: AboutStudentData
   status: DataByRole<UserStatusEnum>
   notificationSettings: NotificationSettings
   bookmarkedOffers: string[]

diff --git a/src/types/user/user-types/user.types.ts b/src/types/user/user-types/user.types.ts
@@ -14,6 +14,7 @@ export type UpdateFields =
   | 'professionalSummary'
   | 'nativeLanguage'
   | 'professionalBlock'
+  | 'aboutStudent'
   | 'notificationSettings'
 
 export type MainUserRole = UserRoleEnum.Tutor | UserRoleEnum.Student
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
@@ -3,7 +3,7 @@ import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '~tests/test-utils'
 import { vi } from 'vitest'
 import { UserRoleEnum } from '~/types'
-import { initialProfessoinalBlock } from '~/redux/features/editProfileSlice.ts'
+import { initialProfessoinalBlock, initialAboutStudent } from '~/redux/features/editProfileSlice.ts'
 
 const mockOpenModal = vi.fn()
 
@@ -79,7 +79,8 @@ describe('ProfessionalInfoTab', () => {
       preloadedState: {
         editProfile: {
           categories: mockedCategories,
-          professionalBlock: initialProfessoinalBlock
+          professionalBlock: initialProfessoinalBlock,
+          aboutStudent: initialAboutStudent
         },
         appMain: {
           userRole: UserRoleEnum.Student
@@ -117,7 +118,8 @@ describe('ProfessionalInfoTab for tutor', () => {
       preloadedState: {
         editProfile: {
           categories: mockedCategories,
-          professionalBlock: initialProfessoinalBlock
+          professionalBlock: initialProfessoinalBlock,
+          aboutStudent: initialAboutStudent
         },
         appMain: {
           userRole: UserRoleEnum.Tutor

diff --git a/tests/unit/pages/tutor-profile/TutorProfile.spec.jsx b/tests/unit/pages/tutor-profile/TutorProfile.spec.jsx
@@ -59,6 +59,11 @@ const mockData = {
   averageRating: {
     student: 0,
     tutor: 0
+  },
+  aboutStudent: {
+    personalIntroduction: '',
+    learningGoals: '',
+    learningActivities: ''
   }
 }
 

diff --git a/tests/unit/redux/editProfileSlice.spec.js b/tests/unit/redux/editProfileSlice.spec.js
@@ -36,6 +36,11 @@ const userDataMock = {
     scientificActivities: 'Activities',
     awards: 'Awards'
   },
+  aboutStudent: {
+    personalIntroduction: '',
+    learningGoals: '',
+    learningActivities: ''
+  },
   notificationSettings: {
     isOfferStatusNotification: false,
     isChatNotification: false,
@@ -63,6 +68,11 @@ const expectedUserData = {
     scientificActivities: 'Activities',
     awards: 'Awards'
   },
+  aboutStudent: {
+    personalIntroduction: '',
+    learningGoals: '',
+    learningActivities: ''
+  },
   notificationSettings: {
     isOfferStatusNotification: false,
     isChatNotification: false,
@@ -94,6 +104,11 @@ const initialState = {
     scientificActivities: '',
     awards: ''
   },
+  aboutStudent: {
+    personalIntroduction: '',
+    learningGoals: '',
+    learningActivities: ''
+  },
   notificationSettings: {
     isOfferStatusNotification: false,
     isChatNotification: false,