- run eslint --fix across project

src/components/shared/Avatar.js

@@ -1,13 +1,13 @@
-import cx from "classnames";
-import { toUrl } from "gatsby-source-gravatar";
-import React, { useContext, useMemo } from "react";
-import UserContext from "../../contexts/UserContext";
-import styles from "./Avatar.module.css";
+import cx from 'classnames';
+import { toUrl } from 'gatsby-source-gravatar';
+import React, { useContext, useMemo } from 'react';
+import UserContext from '../../contexts/UserContext';
+import styles from './Avatar.module.css';
 
 const Avatar = ({ className }) => {
   const { user } = useContext(UserContext);
 
-  const photoURL = useMemo(() => toUrl(user.email, "size=128"), [user.email]);
+  const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
 
   return (
     <img

src/components/shared/Button.js

@@ -1,17 +1,9 @@
-import classNames from "classnames";
-import React from "react";
-import { handleKeyDown } from "../../utils";
-import styles from "./Button.module.css";
+import classNames from 'classnames';
+import React from 'react';
+import { handleKeyDown } from '../../utils';
+import styles from './Button.module.css';
 
-const Button = ({
-  icon,
-  title,
-  onClick,
-  outline,
-  className,
-  isLoading,
-  type = "button",
-}) => {
+const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
   const Icon = icon;
   const classes = classNames(styles.container, className, {
     [styles.outline]: outline,
@@ -19,13 +11,12 @@ const Button = ({
 
   return (
     <button
-      type={type}
       className={classes}
       onKeyDown={(e) => handleKeyDown(e, onClick)}
       onClick={isLoading ? undefined : onClick}
     >
       {icon && <Icon size="14" className="mr-2" />}
-      {isLoading ? "Loading..." : title}
+      {isLoading ? 'Loading...' : title}
     </button>
   );
 };

src/components/shared/Heading.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 const Heading = ({ children }) => {
   return <h2 className="text-4xl">{children}</h2>;

src/components/shared/Input.js

@@ -1,11 +1,11 @@
-import cx from "classnames";
-import { get, isFunction } from "lodash";
-import React, { useMemo } from "react";
-import { MdClose } from "react-icons/md";
-import { v4 as uuidv4 } from "uuid";
-import { useDispatch, useSelector } from "../../contexts/ResumeContext";
-import { handleKeyDown } from "../../utils";
-import styles from "./Input.module.css";
+import cx from 'classnames';
+import { get, isFunction } from 'lodash';
+import React from 'react';
+import { MdClose } from 'react-icons/md';
+import { v4 as uuidv4 } from 'uuid';
+import { useDispatch, useSelector } from '../../contexts/ResumeContext';
+import { handleKeyDown } from '../../utils';
+import styles from './Input.module.css';
 
 const Input = ({
   name,
@@ -22,7 +22,7 @@ const Input = ({
   placeholder,
   onDeleteItem,
   showDeleteItemButton,
-  type = "text",
+  type = 'text',
 }) => {
   const uuid = uuidv4();
   const stateValue = useSelector((state) => get(state, path));
@@ -33,7 +33,7 @@ const Input = ({
     ? onChange
     : (e) => {
         dispatch({
-          type: "on_input",
+          type: 'on_input',
           payload: {
             path,
             value: e.target.value,
@@ -41,93 +41,72 @@ const Input = ({
         });
       };
 
-  return useMemo(
-    () => (
-      <div className={cx(styles.container, className)}>
-        <label htmlFor={uuid}>
-          <span>
-            {label}{" "}
-            {isRequired && (
-              <span className="opacity-75 font-normal lowercase">
-                (Required)
-              </span>
+  return (
+    <div className={cx(styles.container, className)}>
+      <label htmlFor={uuid}>
+        <span>
+          {label}{' '}
+          {isRequired && (
+            <span className="opacity-75 font-normal lowercase">(Required)</span>
+          )}
+        </span>
+
+        {type === 'text' && (
+          <div className="relative grid items-center">
+            <input
+              id={uuid}
+              name={name}
+              type={type}
+              value={value}
+              onBlur={onBlur}
+              checked={checked}
+              onChange={onChange}
+              placeholder={placeholder}
+            />
+
+            {showDeleteItemButton && isFunction(onDeleteItem) && (
+              <MdClose
+                size="16px"
+                tabIndex="0"
+                onClick={onDeleteItem}
+                onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
+                className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
+              />
             )}
-          </span>
+          </div>
+        )}
 
-          {type === "text" && (
-            <div className="relative grid items-center">
-              <input
-                id={uuid}
-                name={name}
-                type={type}
-                value={value}
-                onBlur={onBlur}
-                checked={checked}
-                onChange={onChange}
-                placeholder={placeholder}
-              />
+        {type === 'textarea' && (
+          <div className="flex flex-col">
+            <textarea
+              id={uuid}
+              rows="4"
+              name={name}
+              type={type}
+              value={value}
+              onBlur={onBlur}
+              checked={checked}
+              onChange={onChange}
+              placeholder={placeholder}
+            />
 
-              {showDeleteItemButton && isFunction(onDeleteItem) && (
-                <MdClose
-                  size="16px"
-                  tabIndex="0"
-                  onClick={onDeleteItem}
-                  onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
-                  className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
-                />
-              )}
-            </div>
-          )}
+            <p className="mt-2 text-sm opacity-75">
+              This text block supports{' '}
+              <a
+                href="https://www.markdownguide.org/basic-syntax/"
+                className="text-blue-600"
+                target="blank"
+              >
+                markdown
+              </a>
+              .
+            </p>
+          </div>
+        )}
 
-          {type === "textarea" && (
-            <div className="flex flex-col">
-              <textarea
-                id={uuid}
-                rows="4"
-                name={name}
-                type={type}
-                value={value}
-                onBlur={onBlur}
-                checked={checked}
-                onChange={onChange}
-                placeholder={placeholder}
-              />
-
-              <p className="mt-2 text-sm opacity-75">
-                This text block supports{" "}
-                <a
-                  href="https://www.markdownguide.org/basic-syntax/"
-                  className="text-blue-600"
-                  target="blank"
-                >
-                  markdown
-                </a>
-                .
-              </p>
-            </div>
-          )}
-
-          {error && touched && <p>{error}</p>}
-        </label>
-      </div>
-    ),
-    [
-      checked,
-      className,
-      error,
-      isRequired,
-      label,
-      name,
-      onBlur,
-      onChange,
-      onDeleteItem,
-      placeholder,
-      showDeleteItemButton,
-      touched,
-      type,
-      uuid,
-      value,
-    ]
+        {error && touched && <p>{error}</p>}
+      </label>
+    </div>
   );
 };
 

src/components/shared/Logo.js

@@ -1,10 +1,10 @@
-import cx from "classnames";
-import { graphql, useStaticQuery } from "gatsby";
-import GatsbyImage from "gatsby-image";
-import React from "react";
-import styles from "./Logo.module.css";
+import cx from 'classnames';
+import { graphql, useStaticQuery } from 'gatsby';
+import GatsbyImage from 'gatsby-image';
+import React from 'react';
+import styles from './Logo.module.css';
 
-const Logo = ({ size = "256px", className }) => {
+const Logo = ({ size = '256px', className }) => {
   const { file } = useStaticQuery(graphql`
     query {
       file(relativePath: { eq: "logo.png" }) {

src/components/shared/PhotoUpload.js

@@ -1,9 +1,9 @@
-import React, { useContext, useRef } from "react";
-import { MdFileUpload } from "react-icons/md";
-import StorageContext from "../../contexts/StorageContext";
-import { handleKeyDown } from "../../utils";
-import Input from "./Input";
-import styles from "./PhotoUpload.module.css";
+import React, { useContext, useRef } from 'react';
+import { MdFileUpload } from 'react-icons/md';
+import StorageContext from '../../contexts/StorageContext';
+import { handleKeyDown } from '../../utils';
+import Input from './Input';
+import styles from './PhotoUpload.module.css';
 
 const PhotoUpload = () => {
   const fileInputRef = useRef(null);

src/components/shared/SectionIcon.js

@@ -1,7 +1,7 @@
-import { Tooltip } from "@material-ui/core";
-import React from "react";
+import { Tooltip } from '@material-ui/core';
+import React from 'react';
 
-const SectionIcon = ({ section, placement = "right" }) => {
+const SectionIcon = ({ section, placement = 'right' }) => {
   const { icon: Icon, name } = section;
 
   return (

src/components/shared/Wrapper.js

@@ -1,25 +1,25 @@
-import React, { Fragment, useEffect } from "react";
-import { Slide, toast } from "react-toastify";
-import ModalRegistrar from "../../modals/ModalRegistrar";
+import React, { useEffect } from 'react';
+import { Slide, toast } from 'react-toastify';
+import ModalRegistrar from '../../modals/ModalRegistrar';
 
 const Wrapper = ({ children }) => {
   useEffect(() => {
     toast.configure({
-      role: "alert",
+      role: 'alert',
       hideProgressBar: true,
       transition: Slide,
       closeButton: false,
-      position: "bottom-right",
+      position: 'bottom-right',
       pauseOnFocusLoss: false,
     });
   }, []);
 
   return (
-    <Fragment>
+    <>
       {children}
 
       <ModalRegistrar />
-    </Fragment>
+    </>
   );
 };