feat: ✨ handling immutability in education layout

Musketeer-Developers · Aug 23, 2022 · ef6daec · ef6daec
1 parent 50523b4
commit ef6daec
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 44 deletions.
diff --git a/src/modules/builder/editor/modules/education/components/Education.tsx b/src/modules/builder/editor/modules/education/components/Education.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, Fragment, memo } from 'react';
+import React, { ChangeEvent, Fragment, useCallback } from 'react';
 import TextField from '@mui/material/TextField';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
@@ -11,45 +11,44 @@ interface Props {
   currentIndex: number;
 }
 
-const Education: React.FC<Props> = memo(({ educationInfo, currentIndex }) => {
-  const { set: setExperiences, academics } = useEducations();
+const Education: React.FC<Props> = ({ educationInfo, currentIndex }) => {
+  const onChangeHandler = useCallback(
+    (name: string, value: any) => {
+      const currentExpInfo = { ...educationInfo };
+      switch (name) {
+        case 'academyName':
+          currentExpInfo.institution = value;
+          break;
+        case 'degree':
+          currentExpInfo.studyType = value;
+          break;
+        case 'area':
+          currentExpInfo.area = value;
+          break;
+        case 'grade':
+          currentExpInfo.score = value;
+          break;
+        case 'startDate':
+          if (value?.isValid()) {
+            currentExpInfo.startDate = value;
+          }
+          break;
+        case 'isStudyingHere':
+          currentExpInfo.isStudyingHere = value;
+          break;
+        case 'endDate':
+          if (value?.isValid()) {
+            currentExpInfo.endDate = value;
+          }
+          break;
 
-  const onChangeHandler = (name: string, value: any) => {
-    const currentExpInfo = { ...educationInfo };
-    switch (name) {
-      case 'academyName':
-        currentExpInfo.institution = value;
-        break;
-      case 'degree':
-        currentExpInfo.studyType = value;
-        break;
-      case 'area':
-        currentExpInfo.area = value;
-        break;
-      case 'grade':
-        currentExpInfo.score = value;
-        break;
-      case 'startDate':
-        if (value?.isValid()) {
-          currentExpInfo.startDate = value;
-        }
-        break;
-      case 'isStudyingHere':
-        currentExpInfo.isStudyingHere = value;
-        break;
-      case 'endDate':
-        if (value?.isValid()) {
-          currentExpInfo.endDate = value;
-        }
-        break;
-
-      default:
-        break;
-    }
-    const updatedEducations = [...academics];
-    updatedEducations[currentIndex] = currentExpInfo;
-    setExperiences(updatedEducations);
-  };
+        default:
+          break;
+      }
+      useEducations.getState().updateEducation(currentIndex, currentExpInfo);
+    },
+    [currentIndex, educationInfo]
+  );
 
   return (
     <Fragment>
@@ -145,8 +144,6 @@ const Education: React.FC<Props> = memo(({ educationInfo, currentIndex }) => {
       />
     </Fragment>
   );
-});
-
-Education.displayName = 'Education';
+};
 
 export default Education;
diff --git a/src/modules/builder/editor/modules/experience/components/Experience.tsx b/src/modules/builder/editor/modules/experience/components/Experience.tsx
@@ -131,6 +131,4 @@ const Experience: React.FC<Props> = ({ experienceInfo, currentIndex }) => {
   );
 };
 
-Experience.displayName = 'Experience';
-
 export default Experience;
diff --git a/src/stores/education.interface.ts b/src/stores/education.interface.ts
@@ -19,4 +19,5 @@ export interface EducationStore {
   set: (values: EducationItem[]) => void;
   onmoveup: (index: number) => void;
   onmovedown: (index: number) => void;
+  updateEducation: (index: number, updatedInfo: EducationItem) => void;
 }
diff --git a/src/stores/education.ts b/src/stores/education.ts
@@ -73,6 +73,15 @@ const onMoveDown = (set: SetState<EducationStore>) => (index: number) => {
   );
 };
 
+const updateEducation =
+  (set: SetState<EducationStore>) => (index: number, updatedInfo: EducationItem) => {
+    set(
+      produce((state: EducationStore) => {
+        state.academics[index] = updatedInfo;
+      })
+    );
+  };
+
 export const useEducations = create<EducationStore>((set, get) => ({
   academics: resumeData.education,
   add: addEducation(set),
@@ -81,4 +90,5 @@ export const useEducations = create<EducationStore>((set, get) => ({
   set: setEducation(set),
   onmoveup: onMoveUp(set),
   onmovedown: onMoveDown(set),
+  updateEducation: updateEducation(set),
 }));
-Original file line number
+Diff line change
@@ Expand Up @@
       );
     };
-    Experience.displayName = 'Experience';
     export default Experience;