Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 01:32:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

- memoize all components

Browse Source 
- implement metadata context
This commit is contained in:
Amruth Pillai
2020-07-09 14:00:18 +05:30
parent 9e98da038c
commit 3aaef5f730
71 changed files with 489 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/modals/AuthModal.js
View File

@ -1,5 +1,5 @@
import { navigate } from 'gatsby';
import React, { useContext, useEffect, useState } from 'react';
import React, { memo, useContext, useEffect, useState } from 'react';
import Button from '../components/shared/Button';
import ModalContext from '../contexts/ModalContext';
import UserContext from '../contexts/UserContext';
@ -63,4 +63,4 @@ const AuthModal = () => {
);
};
export default AuthModal;
export default memo(AuthModal);

4
src/modals/BaseModal.js
View File

@ -2,7 +2,7 @@ import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Modal from '@material-ui/core/Modal';
import { isFunction } from 'lodash';
import React, { forwardRef, useImperativeHandle } from 'react';
import React, { forwardRef, memo, useImperativeHandle } from 'react';
import { MdClose } from 'react-icons/md';
import Button from '../components/shared/Button';
import { handleKeyUp } from '../utils';
@ -61,4 +61,4 @@ const BaseModal = forwardRef(
},
);
export default BaseModal;
export default memo(BaseModal);

4
src/modals/DataModal.js
View File

@ -1,6 +1,6 @@
import { useFormikContext } from 'formik';
import { isEmpty, isFunction } from 'lodash';
import React, { useContext, useEffect, useRef, useState } from 'react';
import React, { memo, useContext, useEffect, useRef, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import Button from '../components/shared/Button';
import ModalContext from '../contexts/ModalContext';
@ -101,4 +101,4 @@ const DataModal = ({
);
};
export default DataModal;
export default memo(DataModal);

4
src/modals/ModalRegistrar.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { memo } from 'react';
import AuthModal from './AuthModal';
import ResumeModal from './ResumeModal';
import AwardModal from './sections/AwardModal';
@ -29,4 +29,4 @@ const ModalRegistrar = () => {
);
};
export default ModalRegistrar;
export default memo(ModalRegistrar);

4
src/modals/ResumeModal.js
View File

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

4
src/modals/sections/AwardModal.js
View File

@ -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);

4
src/modals/sections/CertificateModal.js
View File

@ -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);

63
src/modals/sections/EducationModal.js
View File

@ -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);

4
src/modals/sections/HobbyModal.js
View File

@ -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);

4
src/modals/sections/LanguageModal.js
View File

@ -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);

4
src/modals/sections/ReferenceModal.js
View File

@ -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);

4
src/modals/sections/SkillModal.js
View File

@ -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);

4
src/modals/sections/SocialModal.js
View File

@ -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);

63
src/modals/sections/WorkModal.js
View File

@ -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);