fixed conditional rendering & optimized using useMemo

ita-social-projects · Nov 24, 2024 · f677b0d · f677b0d
1 parent 527ad57
commit f677b0d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 32 deletions.
diff --git 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 = (
     <Box component='section' id='education'>
       <Box sx={highlightElem}></Box>
       <TitleWithDescription

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
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -15,7 +15,10 @@ 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'
+import {
+  aboutStudentKeys,
+  mockHandleStudentInputChange
+} from '~/containers/user-profile/about-user-block/about-user-block.constants'
 
 interface AboutStudentAccordionProps {
   data: AboutStudentData
@@ -25,20 +28,15 @@ interface AboutStudentAccordionProps {
   >
 }
 
-const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({
-  data,
-  handleInputChange
-}) => {
+const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({ 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: (
         <AppTextArea
@@ -47,12 +45,12 @@ const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({
             'editProfilePage.profile.professionalTab.accordionStudent.textareaLabel'
           )}
           maxLength={1000}
-          onChange={mockHandleInputChange}
-          value={data.education}
+          onChange={mockHandleStudentInputChange}
+          value={data[item]}
         />
       )
-    }
-  })
+    }))
+  }, [t, data])
 
   return (
     <Accordions

diff --git a/...ntainers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx b/...ntainers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -35,22 +35,24 @@ const AboutTutorAccordion: FC<AboutTutorAccordionProps> = ({
     toggle: true
   })
 
-  const accordionItems: AccordionItem[] = aboutTutorKeys.map((item) => {
-    return {
-      title: `editProfilePage.profile.professionalTab.accordionTutor.${item}`,
-      content: (
-        <AppTextArea
-          fullWidth
-          label={t(
-            'editProfilePage.profile.professionalTab.accordionTutor.textareaLabel'
-          )}
-          maxLength={1000}
-          onChange={handleInputChange(item)}
-          value={data.education}
-        />
-      )
-    }
-  })
+  const accordionItems: AccordionItem[] = useMemo(() => {
+    return aboutTutorKeys.map((item) => {
+      return {
+        title: `editProfilePage.profile.professionalTab.accordionTutor.${item}`,
+        content: (
+          <AppTextArea
+            fullWidth
+            label={t(
+              'editProfilePage.profile.professionalTab.accordionTutor.textareaLabel'
+            )}
+            maxLength={1000}
+            onChange={handleInputChange(item)}
+            value={data[item]}
+          />
+        )
+      }
+    })
+  }, [t, handleInputChange, data])
 
   return (
     <Accordions

diff --git a/src/containers/user-profile/about-user-block/about-user-block.constants.ts b/src/containers/user-profile/about-user-block/about-user-block.constants.ts
@@ -19,3 +19,5 @@ export const aboutTutorKeys: Array<keyof ProfessionalBlock> = [
   'scientificActivities',
   'awards'
 ]
+
+export const mockHandleStudentInputChange = () => null