Optimized component re-renders caused by input change (#2593)

* optimized component re-renders caused by input change * fixed label rendering * deleted redundant test
ita-social-projects · Oct 9, 2024 · 416bb33 · 416bb33
1 parent 14e0e26
commit 416bb33
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 44 deletions.
diff --git a/src/containers/course-section/CourseSectionContainer.styles.ts b/src/containers/course-section/CourseSectionContainer.styles.ts
@@ -1,3 +1,4 @@
+import palette from '~/styles/app-theme/app.pallete'
 import { TypographyVariantEnum } from '~/types'
 
 const menuItem = {
@@ -29,7 +30,13 @@ export const styles = {
     cursor: 'pointer'
   },
   input: {
-    style: { padding: 0, margin: 0 }
+    style: { padding: 0, margin: 0 },
+    sx: {
+      '::placeholder': {
+        color: palette.primary[500],
+        opacity: 1
+      }
+    }
   },
   titleInput: {
     disableUnderline: true,

diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx
@@ -1,4 +1,4 @@
-import { useState, FC, useMemo, useCallback } from 'react'
+import { useState, FC, useMemo, useCallback, FocusEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { MenuItem } from '@mui/material'
@@ -76,14 +76,8 @@ const CourseSectionContainer: FC<SectionProps> = ({
 
   const [activeMenu, setActiveMenu] = useState<string>('')
   const [isVisible, setIsVisible] = useState<boolean>(true)
-  const [description, setDescription] = useState<string>(
-    sectionData.description
-  )
 
-  const handleDescriptionChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setDescription(event.target.value)
+  const handleDescriptionBlur = (event: FocusEvent<HTMLInputElement>) => {
     handleSectionInputChange(sectionData.id, 'description', event.target.value)
   }
 
@@ -341,22 +335,11 @@ const CourseSectionContainer: FC<SectionProps> = ({
           <AppTextField
             InputLabelProps={styles.descriptionLabel}
             InputProps={styles.descriptionInput}
+            defaultValue={sectionData.description}
             fullWidth
             inputProps={styles.input}
-            label={
-              sectionData.description
-                ? ''
-                : t('course.courseSection.defaultNewDescription')
-            }
-            onBlur={(event) =>
-              handleSectionInputChange(
-                sectionData.id,
-                'description',
-                event.target.value
-              )
-            }
-            onChange={handleDescriptionChange}
-            value={description}
+            onBlur={handleDescriptionBlur}
+            placeholder={t('course.courseSection.defaultNewDescription')}
             variant={TextFieldVariantEnum.Standard}
           />
           <ResourcesList

diff --git a/tests/unit/containers/course-section/CourseSectionContainer.spec.jsx b/tests/unit/containers/course-section/CourseSectionContainer.spec.jsx
@@ -82,27 +82,6 @@ describe('CourseSectionContainer tests', () => {
     expect(labelInput).toBeInTheDocument()
   })
 
-  it('should display default new description when description is not provided', () => {
-    const sectionDataWithoutDescription = { ...mockedSectionData }
-    delete sectionDataWithoutDescription.description
-
-    cleanup()
-    renderWithProviders(
-      <CourseSectionContainer
-        handleSectionInputChange={mockedHandleSectionInputChange}
-        isCooperation
-        resourceEventHandler={mockedResourceEventHandler}
-        sectionData={sectionDataWithoutDescription}
-        sectionEventHandler={mockedSectionEventHandler}
-      />
-    )
-    const defaultDescription = screen.getByText(
-      /course\.coursesection\.defaultnewdescription/i
-    )
-
-    expect(defaultDescription).toBeInTheDocument()
-  })
-
   it('should call handleSectionInputChange with the correct arguments when the title input is changed', () => {
     const titleInput = screen.getByDisplayValue(mockedSectionData.title)
     act(() =>