- memoize all components

- implement metadata context

src/modals/sections/AwardModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -66,4 +66,4 @@ const AwardModal = () => {
   );
 };
 
-export default AwardModal;
+export default memo(AwardModal);

src/modals/sections/CertificateModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -66,4 +66,4 @@ const CertificateModal = () => {
   );
 };
 
-export default CertificateModal;
+export default memo(CertificateModal);

src/modals/sections/EducationModal.js

@@ -1,10 +1,10 @@
-import { Field, FieldArray, Formik } from 'formik';
-import React from 'react';
-import { MdAdd } from 'react-icons/md';
+import { FieldArray, Formik } from 'formik';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
+import InputArray from '../../components/shared/InputArray';
 import ModalEvents from '../../constants/ModalEvents';
-import { getFieldProps, handleKeyUp } from '../../utils';
+import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -90,49 +90,16 @@ const EducationModal = () => {
 
             <FieldArray
               name="courses"
-              render={(arrayHelpers) => {
-                const handleClickAdd = () => {
-                  formik.values.temp && arrayHelpers.push(formik.values.temp);
-                  formik.setFieldValue('temp', '');
-                };
-
-                return (
-                  <div className="col-span-2">
-                    <label>
-                      <span>Courses</span>
-
-                      {formik.values.courses &&
-                        formik.values.courses.map((x, i) => (
-                          <Field key={x} name={`courses.${i}`}>
-                            {({ field, meta }) => (
-                              <Input
-                                className="my-1"
-                                showDeleteItemButton
-                                onDeleteItem={() => arrayHelpers.remove(i)}
-                                {...field}
-                                {...meta}
-                              />
-                            )}
-                          </Field>
-                        ))}
-
-                      <div className="flex items-center">
-                        <Input
-                          placeholder="Algorithms &amp; Data Structures"
-                          {...getFieldProps(formik, schema, 'temp')}
-                        />
-                        <MdAdd
-                          size="18px"
-                          tabIndex="0"
-                          className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
-                          onKeyUp={(e) => handleKeyUp(e, handleClickAdd)}
-                          onClick={handleClickAdd}
-                        />
-                      </div>
-                    </label>
-                  </div>
-                );
-              }}
+              render={(helpers) => (
+                <InputArray
+                  formik={formik}
+                  schema={schema}
+                  helpers={helpers}
+                  label="Courses"
+                  path="courses"
+                  placeholder="Data Structures &amp; Algortihms"
+                />
+              )}
             />
           </div>
         </DataModal>
@@ -141,4 +108,4 @@ const EducationModal = () => {
   );
 };
 
-export default EducationModal;
+export default memo(EducationModal);

src/modals/sections/HobbyModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -41,4 +41,4 @@ const HobbyModal = () => {
   );
 };
 
-export default HobbyModal;
+export default memo(HobbyModal);

src/modals/sections/LanguageModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -48,4 +48,4 @@ const LanguageModal = () => {
   );
 };
 
-export default LanguageModal;
+export default memo(LanguageModal);

src/modals/sections/ReferenceModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -73,4 +73,4 @@ const ReferenceModal = () => {
   );
 };
 
-export default ReferenceModal;
+export default memo(ReferenceModal);

src/modals/sections/SkillModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -59,4 +59,4 @@ const SkillModal = () => {
   );
 };
 
-export default SkillModal;
+export default memo(SkillModal);

src/modals/sections/SocialModal.js

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React from 'react';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
@@ -62,4 +62,4 @@ const SocialModal = () => {
   );
 };
 
-export default SocialModal;
+export default memo(SocialModal);

src/modals/sections/WorkModal.js

@@ -1,10 +1,10 @@
-import { Field, FieldArray, Formik } from 'formik';
-import React from 'react';
-import { MdAdd } from 'react-icons/md';
+import { FieldArray, Formik } from 'formik';
+import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
+import InputArray from '../../components/shared/InputArray';
 import ModalEvents from '../../constants/ModalEvents';
-import { getFieldProps, handleKeyUp } from '../../utils';
+import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -92,49 +92,16 @@ const WorkModal = () => {
 
             <FieldArray
               name="highlights"
-              render={(arrayHelpers) => {
-                const handleClickAdd = () => {
-                  formik.values.temp && arrayHelpers.push(formik.values.temp);
-                  formik.setFieldValue('temp', '');
-                };
-
-                return (
-                  <div className="col-span-2">
-                    <label>
-                      <span>Highlights</span>
-
-                      {formik.values.highlights &&
-                        formik.values.highlights.map((x, i) => (
-                          <Field key={x} name={`highlights.${i}`}>
-                            {({ field, meta }) => (
-                              <Input
-                                className="my-1"
-                                showDeleteItemButton
-                                onDeleteItem={() => arrayHelpers.remove(i)}
-                                {...field}
-                                {...meta}
-                              />
-                            )}
-                          </Field>
-                        ))}
-
-                      <div className="flex items-center">
-                        <Input
-                          placeholder="Worked passionately in customer service in a high volume restaurant."
-                          {...getFieldProps(formik, schema, 'temp')}
-                        />
-                        <MdAdd
-                          size="18px"
-                          tabIndex="0"
-                          className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
-                          onKeyUp={(e) => handleKeyUp(e, handleClickAdd)}
-                          onClick={handleClickAdd}
-                        />
-                      </div>
-                    </label>
-                  </div>
-                );
-              }}
+              render={(helpers) => (
+                <InputArray
+                  formik={formik}
+                  schema={schema}
+                  helpers={helpers}
+                  label="Highlights"
+                  path="highlights"
+                  placeholder="Worked passionately in customer service in a high volume restaurant."
+                />
+              )}
             />
           </div>
         </DataModal>
@@ -143,4 +110,4 @@ const WorkModal = () => {
   );
 };
 
-export default WorkModal;
+export default memo(WorkModal);