- run eslint --fix across project

2025-11-16 17:51:43 +10:00 · 2020-07-09 00:14:13 +05:30
parent a1931f5e36
commit 9045e2983d
72 changed files with 1392 additions and 868 deletions
--- a/src/modals/AuthModal.js
+++ b/src/modals/AuthModal.js
@ -1,9 +1,9 @@
-import { navigate } from "gatsby";
-import React, { Fragment, useContext, useEffect, useState } from "react";
-import Button from "../components/shared/Button";
-import ModalContext from "../contexts/ModalContext";
-import UserContext from "../contexts/UserContext";
-import BaseModal from "./BaseModal";
+import { navigate } from 'gatsby';
+import React, { useContext, useEffect, useState } from 'react';
+import Button from '../components/shared/Button';
+import ModalContext from '../contexts/ModalContext';
+import UserContext from '../contexts/UserContext';
+import BaseModal from './BaseModal';

 const AuthModal = () => {
  const [open, setOpen] = useState(false);
@ -25,12 +25,12 @@ const AuthModal = () => {
  };

  const handleGotoApp = () => {
-    navigate("/app/dashboard");
+    navigate('/app/dashboard');
    setOpen(false);
  };

  const getTitle = () =>
-    user ? `Welcome, ${user.displayName}` : "Who are you?";
+    user ? `Welcome, ${user.displayName}` : 'Who are you?';

  const getMessage = () =>
    user
@ -38,10 +38,10 @@ const AuthModal = () => {
      : `Reactive Resume needs to know who you are so it can securely authenticate you into the app and show you only your information. Once you are in, you can start building your resume, editing it to add new skills or sharing it with the world!`;

  const loggedInAction = (
-    <Fragment>
+    <>
      <Button outline className="mr-8" title="Logout" onClick={logout} />
      <Button title="Go to App" onClick={handleGotoApp} />
-    </Fragment>
+    </>
  );

  const loggedOutAction = (
--- a/src/modals/BaseModal.js
+++ b/src/modals/BaseModal.js
@ -1,12 +1,12 @@
-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 { MdClose } from "react-icons/md";
-import Button from "../components/shared/Button";
-import { handleKeyDown } from "../utils";
-import styles from "./BaseModal.module.css";
+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 { MdClose } from 'react-icons/md';
+import Button from '../components/shared/Button';
+import { handleKeyDown } from '../utils';
+import styles from './BaseModal.module.css';

 const BaseModal = forwardRef(
  ({ title, state, children, action, onDestroy }, ref) => {
@ -58,7 +58,7 @@ const BaseModal = forwardRef(
        </Fade>
      </Modal>
    );
-  }
+  },
 );

 export default BaseModal;
--- a/src/modals/DataModal.js
+++ b/src/modals/DataModal.js
@ -1,12 +1,12 @@
-import { useFormikContext } from "formik";
-import { isEmpty, isFunction } from "lodash";
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { v4 as uuidv4 } from "uuid";
-import Button from "../components/shared/Button";
-import ModalContext from "../contexts/ModalContext";
-import { useDispatch } from "../contexts/ResumeContext";
-import { getModalText } from "../utils";
-import BaseModal from "./BaseModal";
+import { useFormikContext } from 'formik';
+import { isEmpty, isFunction } from 'lodash';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import Button from '../components/shared/Button';
+import ModalContext from '../contexts/ModalContext';
+import { useDispatch } from '../contexts/ResumeContext';
+import { getModalText } from '../utils';
+import BaseModal from './BaseModal';

 const DataModal = ({
  name,
@ -28,9 +28,9 @@ const DataModal = ({
  const { values, setValues, resetForm, validateForm } = useFormikContext();

  useEffect(() => {
-    const unbind = emitter.on(event, (data) => {
+    const unbind = emitter.on(event, (payload) => {
      setOpen(true);
-      setData(data);
+      setData(payload);
    });

    return () => unbind();
@ -38,7 +38,6 @@ const DataModal = ({

  useEffect(() => {
    data && setValues(data) && setEditMode(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  const onSubmit = async (newData) => {
@ -48,7 +47,7 @@ const DataModal = ({
          isFunction(onEdit)
            ? onEdit(newData)
            : dispatch({
-                type: "on_edit_item",
+                type: 'on_edit_item',
                payload: {
                  path,
                  value: newData,
@ -61,7 +60,7 @@ const DataModal = ({
        isFunction(onCreate)
          ? onCreate(newData)
          : dispatch({
-              type: "on_add_item",
+              type: 'on_add_item',
              payload: {
                path,
                value: newData,
--- a/src/modals/ModalRegistrar.js
+++ b/src/modals/ModalRegistrar.js
@ -1,16 +1,16 @@
-import React, { Fragment } from "react";
-import AuthModal from "./AuthModal";
-import ResumeModal from "./ResumeModal";
-import AwardModal from "./sections/AwardModal";
-import CertificateModal from "./sections/CertificateModal";
-import EducationModal from "./sections/EducationModal";
-import SkillModal from "./sections/SkillModal";
-import SocialModal from "./sections/SocialModal";
-import WorkModal from "./sections/WorkModal";
+import React from 'react';
+import AuthModal from './AuthModal';
+import ResumeModal from './ResumeModal';
+import AwardModal from './sections/AwardModal';
+import CertificateModal from './sections/CertificateModal';
+import EducationModal from './sections/EducationModal';
+import SkillModal from './sections/SkillModal';
+import SocialModal from './sections/SocialModal';
+import WorkModal from './sections/WorkModal';

 const ModalRegistrar = () => {
  return (
-    <Fragment>
+    <>
      <AuthModal />
      <ResumeModal />
      <SocialModal />
@ -19,7 +19,7 @@ const ModalRegistrar = () => {
      <AwardModal />
      <CertificateModal />
      <SkillModal />
-    </Fragment>
+    </>
  );
 };

--- a/src/modals/ResumeModal.js
+++ b/src/modals/ResumeModal.js
@ -1,20 +1,20 @@
-import { Formik } from "formik";
-import { get } from "lodash";
-import React, { useContext } from "react";
-import * as Yup from "yup";
-import Input from "../components/shared/Input";
-import ModalEvents from "../constants/ModalEvents";
-import DatabaseContext from "../contexts/DatabaseContext";
-import DataModal from "./DataModal";
+import { Formik } from 'formik';
+import { get } from 'lodash';
+import React, { useContext } from 'react';
+import * as Yup from 'yup';
+import Input from '../components/shared/Input';
+import ModalEvents from '../constants/ModalEvents';
+import DatabaseContext from '../contexts/DatabaseContext';
+import DataModal from './DataModal';

 const initialValues = {
-  name: "",
+  name: '',
 };

 const validationSchema = Yup.object().shape({
  name: Yup.string()
-    .min(5, "Please enter at least 5 characters.")
-    .required("This is a required field."),
+    .min(5, 'Please enter at least 5 characters.')
+    .required('This is a required field.'),
 });

 const ResumeModal = () => {
@ -22,7 +22,7 @@ const ResumeModal = () => {

  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -37,8 +37,8 @@ const ResumeModal = () => {
        <DataModal
          name="Resume"
          title={{
-            create: "Create Resume",
-            edit: "Edit Resume",
+            create: 'Create Resume',
+            edit: 'Edit Resume',
          }}
          onEdit={updateResume}
          onCreate={createResume}
@ -48,14 +48,14 @@ const ResumeModal = () => {
            label="Name"
            className="mb-8"
            placeholder="Full Stack Web Developer"
-            {...getFieldProps(formik, "name")}
+            {...getFieldProps(formik, 'name')}
          />

          <p>
            You are going to be creating a new resume from scratch, but first,
-            let's give it a name. This can be the name of the role you want to
-            apply for, or if you're making a resume for a friend, you could call
-            it Alex's Resume.
+            let&apos;s give it a name. This can be the name of the role you want
+            to apply for, or if you&apos;re making a resume for a friend, you
+            could call it Alex&apos;s Resume.
          </p>
        </DataModal>
      )}
--- a/src/modals/sections/AwardModal.js
+++ b/src/modals/sections/AwardModal.js
@ -1,21 +1,21 @@
-import { Formik } from "formik";
-import { get } from "lodash";
-import React from "react";
-import * as Yup from "yup";
-import Input from "../../components/shared/Input";
-import ModalEvents from "../../constants/ModalEvents";
-import DataModal from "../DataModal";
+import { Formik } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import DataModal from '../DataModal';

 const initialValues = {
-  title: "",
-  awarder: "",
-  date: "",
-  summary: "",
+  title: '',
+  awarder: '',
+  date: '',
+  summary: '',
 };

 const validationSchema = Yup.object().shape({
-  title: Yup.string().required("This is a required field."),
-  awarder: Yup.string().required("This is a required field."),
+  title: Yup.string().required('This is a required field.'),
+  awarder: Yup.string().required('This is a required field.'),
  date: Yup.date().max(new Date()),
  summary: Yup.string(),
 });
@ -23,7 +23,7 @@ const validationSchema = Yup.object().shape({
 const AwardModal = () => {
  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -45,26 +45,26 @@ const AwardModal = () => {
              label="Title"
              className="col-span-2"
              placeholder="Intl. Flutter Hackathon '19"
-              {...getFieldProps(formik, "title")}
+              {...getFieldProps(formik, 'title')}
            />

            <Input
              label="Awarder"
              placeholder="Google"
-              {...getFieldProps(formik, "awarder")}
+              {...getFieldProps(formik, 'awarder')}
            />

            <Input
              type="date"
              label="Date"
-              {...getFieldProps(formik, "date")}
+              {...getFieldProps(formik, 'date')}
            />

            <Input
              type="textarea"
              label="Summary"
              className="col-span-2"
-              {...getFieldProps(formik, "summary")}
+              {...getFieldProps(formik, 'summary')}
            />
          </div>
        </DataModal>
--- a/src/modals/sections/CertificateModal.js
+++ b/src/modals/sections/CertificateModal.js
@ -1,21 +1,21 @@
-import { Formik } from "formik";
-import { get } from "lodash";
-import React from "react";
-import * as Yup from "yup";
-import Input from "../../components/shared/Input";
-import ModalEvents from "../../constants/ModalEvents";
-import DataModal from "../DataModal";
+import { Formik } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import DataModal from '../DataModal';

 const initialValues = {
-  title: "",
-  issuer: "",
-  date: "",
-  summary: "",
+  title: '',
+  issuer: '',
+  date: '',
+  summary: '',
 };

 const validationSchema = Yup.object().shape({
-  title: Yup.string().required("This is a required field."),
-  issuer: Yup.string().required("This is a required field."),
+  title: Yup.string().required('This is a required field.'),
+  issuer: Yup.string().required('This is a required field.'),
  date: Yup.date().max(new Date()),
  summary: Yup.string(),
 });
@ -23,7 +23,7 @@ const validationSchema = Yup.object().shape({
 const CertificateModal = () => {
  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -45,26 +45,26 @@ const CertificateModal = () => {
              label="Title"
              className="col-span-2"
              placeholder="CCNP"
-              {...getFieldProps(formik, "title")}
+              {...getFieldProps(formik, 'title')}
            />

            <Input
              label="Issuer"
              placeholder="Cisco Systems"
-              {...getFieldProps(formik, "issuer")}
+              {...getFieldProps(formik, 'issuer')}
            />

            <Input
              type="date"
              label="Date"
-              {...getFieldProps(formik, "date")}
+              {...getFieldProps(formik, 'date')}
            />

            <Input
              type="textarea"
              label="Summary"
              className="col-span-2"
-              {...getFieldProps(formik, "summary")}
+              {...getFieldProps(formik, 'summary')}
            />
          </div>
        </DataModal>
--- a/src/modals/sections/EducationModal.js
+++ b/src/modals/sections/EducationModal.js
@ -1,44 +1,44 @@
-import { Field, FieldArray, Formik } from "formik";
-import { get } from "lodash";
-import React from "react";
-import { MdAdd } from "react-icons/md";
-import * as Yup from "yup";
-import Input from "../../components/shared/Input";
-import ModalEvents from "../../constants/ModalEvents";
-import { handleKeyDown } from "../../utils";
-import DataModal from "../DataModal";
+import { Field, FieldArray, Formik } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import { handleKeyDown } from '../../utils';
+import DataModal from '../DataModal';

 const initialValues = {
-  institution: "",
-  field: "",
-  degree: "",
-  gpa: "",
-  startDate: "",
-  endDate: "",
+  institution: '',
+  field: '',
+  degree: '',
+  gpa: '',
+  startDate: '',
+  endDate: '',
  courses: [],
-  __temp: "",
+  temp: '',
 };

 const validationSchema = Yup.object().shape({
-  institution: Yup.string().required("This is a required field."),
-  field: Yup.string().required("This is a required field."),
+  institution: Yup.string().required('This is a required field.'),
+  field: Yup.string().required('This is a required field.'),
  degree: Yup.string(),
  gpa: Yup.string(),
-  startDate: Yup.date().required("This is a required field."),
+  startDate: Yup.date().required('This is a required field.'),
  endDate: Yup.date().when(
-    "startDate",
+    'startDate',
    (startDate, schema) =>
      startDate &&
-      schema.min(startDate, "End Date must be later than Start Date")
+      schema.min(startDate, 'End Date must be later than Start Date'),
  ),
-  courses: Yup.array().of(Yup.string().required("This is a required field.")),
-  __temp: Yup.string().ensure(),
+  courses: Yup.array().of(Yup.string().required('This is a required field.')),
+  temp: Yup.string().ensure(),
 });

 const EducationModal = () => {
  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -60,49 +60,48 @@ const EducationModal = () => {
              label="Institution"
              className="col-span-2"
              placeholder="Dayananda Sagar College of Engineering"
-              {...getFieldProps(formik, "institution")}
+              {...getFieldProps(formik, 'institution')}
            />

            <Input
              label="Field of Study"
              className="col-span-2"
              placeholder="Computer Science &amp; Engineering"
-              {...getFieldProps(formik, "field")}
+              {...getFieldProps(formik, 'field')}
            />

            <Input
              label="Degree Type"
              placeholder="Bachelor's Degree"
-              {...getFieldProps(formik, "degree")}
+              {...getFieldProps(formik, 'degree')}
            />

            <Input
              label="GPA"
              placeholder="8.8"
-              {...getFieldProps(formik, "gpa")}
+              {...getFieldProps(formik, 'gpa')}
            />

            <Input
              type="date"
              label="Start Date"
              placeholder="6th August 208"
-              {...getFieldProps(formik, "startDate")}
+              {...getFieldProps(formik, 'startDate')}
            />

            <Input
              type="date"
              label="End Date"
              placeholder="6th August 208"
-              {...getFieldProps(formik, "endDate")}
+              {...getFieldProps(formik, 'endDate')}
            />

            <FieldArray
              name="courses"
              render={(arrayHelpers) => {
                const handleClickAdd = () => {
-                  formik.values.__temp &&
-                    arrayHelpers.push(formik.values.__temp);
-                  formik.setFieldValue("__temp", "");
+                  formik.values.temp && arrayHelpers.push(formik.values.temp);
+                  formik.setFieldValue('temp', '');
                };

                return (
@ -112,7 +111,7 @@ const EducationModal = () => {

                      {formik.values.courses &&
                        formik.values.courses.map((x, i) => (
-                          <Field key={i} name={`courses.${i}`}>
+                          <Field key={x} name={`courses.${i}`}>
                            {({ field, meta }) => (
                              <Input
                                className="my-1"
@ -128,7 +127,7 @@ const EducationModal = () => {
                      <div className="flex items-center">
                        <Input
                          placeholder="Algorithms &amp; Data Structures"
-                          {...getFieldProps(formik, "__temp")}
+                          {...getFieldProps(formik, 'temp')}
                        />
                        <MdAdd
                          size="18px"
--- a/src/modals/sections/SkillModal.js
+++ b/src/modals/sections/SkillModal.js
@ -1,25 +1,25 @@
-import { Formik } from "formik";
-import { get } from "lodash";
-import React from "react";
-import * as Yup from "yup";
-import Input from "../../components/shared/Input";
-import ModalEvents from "../../constants/ModalEvents";
-import DataModal from "../DataModal";
+import { Formik } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import DataModal from '../DataModal';

 const initialValues = {
-  name: "",
-  level: "",
+  name: '',
+  level: '',
 };

 const validationSchema = Yup.object().shape({
-  name: Yup.string().required("This is a required field."),
-  level: Yup.string().required("This is a required field."),
+  name: Yup.string().required('This is a required field.'),
+  level: Yup.string().required('This is a required field.'),
 });

 const SkillModal = () => {
  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -40,13 +40,13 @@ const SkillModal = () => {
            <Input
              label="Name"
              placeholder="ReactJS"
-              {...getFieldProps(formik, "name")}
+              {...getFieldProps(formik, 'name')}
            />

            <Input
              type="select"
              label="Level"
-              {...getFieldProps(formik, "level")}
+              {...getFieldProps(formik, 'level')}
            />
          </div>
        </DataModal>
--- a/src/modals/sections/SocialModal.js
+++ b/src/modals/sections/SocialModal.js
@ -1,32 +1,32 @@
-import { Formik } from "formik";
-import { get } from "lodash";
-import React from "react";
-import * as Yup from "yup";
-import Input from "../../components/shared/Input";
-import ModalEvents from "../../constants/ModalEvents";
-import DataModal from "../DataModal";
+import { Formik } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import DataModal from '../DataModal';

 const initialValues = {
-  url: "https://",
-  network: "",
-  username: "",
+  url: 'https://',
+  network: '',
+  username: '',
 };

 const validationSchema = Yup.object().shape({
  network: Yup.string()
-    .min(5, "Please enter at least 5 characters.")
-    .required("This is a required field."),
-  username: Yup.string().required("This is a required field."),
+    .min(5, 'Please enter at least 5 characters.')
+    .required('This is a required field.'),
+  username: Yup.string().required('This is a required field.'),
  url: Yup.string()
-    .min(5, "Please enter at least 5 characters.")
-    .required("This is a required field.")
-    .url("Must be a valid URL"),
+    .min(5, 'Please enter at least 5 characters.')
+    .required('This is a required field.')
+    .url('Must be a valid URL'),
 });

 const SocialModal = () => {
  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -47,20 +47,20 @@ const SocialModal = () => {
            <Input
              label="Network"
              placeholder="Twitter"
-              {...getFieldProps(formik, "network")}
+              {...getFieldProps(formik, 'network')}
            />

            <Input
              label="Username"
              placeholder="KingOKings"
-              {...getFieldProps(formik, "username")}
+              {...getFieldProps(formik, 'username')}
            />

            <Input
              label="URL"
              className="col-span-2"
              placeholder="https://twitter.com/KingOKings"
-              {...getFieldProps(formik, "url")}
+              {...getFieldProps(formik, 'url')}
            />
          </div>
        </DataModal>
--- a/src/modals/sections/WorkModal.js
+++ b/src/modals/sections/WorkModal.js
@ -1,46 +1,46 @@
-import { Field, FieldArray, Formik } from "formik";
-import { get } from "lodash";
-import React from "react";
-import { MdAdd } from "react-icons/md";
-import * as Yup from "yup";
-import Input from "../../components/shared/Input";
-import ModalEvents from "../../constants/ModalEvents";
-import { handleKeyDown } from "../../utils";
-import DataModal from "../DataModal";
+import { Field, FieldArray, Formik } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import { handleKeyDown } from '../../utils';
+import DataModal from '../DataModal';

 const initialValues = {
-  company: "",
-  position: "",
-  website: "https://",
-  startDate: "",
-  endDate: "",
-  summary: "",
+  company: '',
+  position: '',
+  website: 'https://',
+  startDate: '',
+  endDate: '',
+  summary: '',
  highlights: [],
-  __temp: "",
+  temp: '',
 };

 const validationSchema = Yup.object().shape({
-  company: Yup.string().required("This is a required field."),
-  position: Yup.string().required("This is a required field."),
-  website: Yup.string().url("Must be a valid URL"),
-  startDate: Yup.date().required("This is a required field."),
+  company: Yup.string().required('This is a required field.'),
+  position: Yup.string().required('This is a required field.'),
+  website: Yup.string().url('Must be a valid URL'),
+  startDate: Yup.date().required('This is a required field.'),
  endDate: Yup.date().when(
-    "startDate",
+    'startDate',
    (startDate, schema) =>
      startDate &&
-      schema.min(startDate, "End Date must be later than Start Date")
+      schema.min(startDate, 'End Date must be later than Start Date'),
  ),
-  summary: Yup.string().min(10, "Please enter at least 10 characters."),
+  summary: Yup.string().min(10, 'Please enter at least 10 characters.'),
  highlights: Yup.array().of(
-    Yup.string().required("This is a required field.")
+    Yup.string().required('This is a required field.'),
  ),
-  __temp: Yup.string().ensure(),
+  temp: Yup.string().ensure(),
 });

 const WorkModal = () => {
  const getFieldProps = (formik, name) => ({
    touched: get(formik, `touched.${name}`, false),
-    error: get(formik, `errors.${name}`, ""),
+    error: get(formik, `errors.${name}`, ''),
    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
    ...formik.getFieldProps(name),
  });
@ -62,49 +62,48 @@ const WorkModal = () => {
              label="Company"
              className="col-span-2"
              placeholder="Postdot Technologies Pvt. Ltd."
-              {...getFieldProps(formik, "company")}
+              {...getFieldProps(formik, 'company')}
            />

            <Input
              label="Position"
              placeholder="Full Stack Web Developer"
-              {...getFieldProps(formik, "position")}
+              {...getFieldProps(formik, 'position')}
            />

            <Input
              label="Website"
              placeholder="https://example.com/"
-              {...getFieldProps(formik, "website")}
+              {...getFieldProps(formik, 'website')}
            />

            <Input
              type="date"
              label="Start Date"
              placeholder="6th August 208"
-              {...getFieldProps(formik, "startDate")}
+              {...getFieldProps(formik, 'startDate')}
            />

            <Input
              type="date"
              label="End Date"
              placeholder="6th August 208"
-              {...getFieldProps(formik, "endDate")}
+              {...getFieldProps(formik, 'endDate')}
            />

            <Input
              type="textarea"
              label="Summary"
              className="col-span-2"
-              {...getFieldProps(formik, "summary")}
+              {...getFieldProps(formik, 'summary')}
            />

            <FieldArray
              name="highlights"
              render={(arrayHelpers) => {
                const handleClickAdd = () => {
-                  formik.values.__temp &&
-                    arrayHelpers.push(formik.values.__temp);
-                  formik.setFieldValue("__temp", "");
+                  formik.values.temp && arrayHelpers.push(formik.values.temp);
+                  formik.setFieldValue('temp', '');
                };

                return (
@ -114,7 +113,7 @@ const WorkModal = () => {

                      {formik.values.highlights &&
                        formik.values.highlights.map((x, i) => (
-                          <Field key={i} name={`highlights.${i}`}>
+                          <Field key={x} name={`highlights.${i}`}>
                            {({ field, meta }) => (
                              <Input
                                className="my-1"
@ -130,7 +129,7 @@ const WorkModal = () => {
                      <div className="flex items-center">
                        <Input
                          placeholder="Worked passionately in customer service in a high volume restaurant."
-                          {...getFieldProps(formik, "__temp")}
+                          {...getFieldProps(formik, 'temp')}
                        />
                        <MdAdd
                          size="18px"