- memoize all components

- implement metadata context

src/components/shared/Avatar.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { toUrl } from 'gatsby-source-gravatar';
-import React, { useContext, useMemo } from 'react';
+import React, { memo, useContext, useMemo } from 'react';
 import UserContext from '../../contexts/UserContext';
 import styles from './Avatar.module.css';
 
@@ -18,4 +18,4 @@ const Avatar = ({ className }) => {
   );
 };
 
-export default Avatar;
+export default memo(Avatar);

src/components/shared/Button.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 import { handleKeyUp } from '../../utils';
 import styles from './Button.module.css';
 
@@ -21,4 +21,4 @@ const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
   );
 };
 
-export default Button;
+export default memo(Button);

src/components/shared/Heading.js

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

src/components/shared/Input.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { get, isFunction } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdClose } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
@@ -133,4 +133,4 @@ const Input = ({
   );
 };
 
-export default Input;
+export default memo(Input);

src/components/shared/InputArray.js

@@ -0,0 +1,51 @@
+import { Field } from 'formik';
+import React, { memo } from 'react';
+import { MdAdd } from 'react-icons/md';
+import { getFieldProps, handleKeyUp } from '../../utils';
+import Input from './Input';
+
+const InputArray = ({ formik, schema, helpers, label, path, placeholder }) => {
+  const handleClickAdd = () => {
+    formik.values.temp && helpers.push(formik.values.temp);
+    formik.setFieldValue('temp', '');
+  };
+
+  return (
+    <div className="col-span-2">
+      <label>
+        <span>{label}</span>
+
+        {formik.values[path] &&
+          formik.values[path].map((x, i) => (
+            <Field key={i} name={`${path}.${i}`}>
+              {({ field, meta }) => (
+                <Input
+                  className="my-1"
+                  showDeleteItemButton
+                  onDeleteItem={() => helpers.remove(i)}
+                  {...field}
+                  {...meta}
+                />
+              )}
+            </Field>
+          ))}
+
+        <div className="flex items-center">
+          <Input
+            placeholder={placeholder}
+            {...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>
+  );
+};
+
+export default memo(InputArray);

src/components/shared/Logo.js

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import { graphql, useStaticQuery } from 'gatsby';
 import GatsbyImage from 'gatsby-image';
-import React from 'react';
+import React, { memo } from 'react';
 import styles from './Logo.module.css';
 
 const Logo = ({ size = '256px', className }) => {
@@ -27,4 +27,4 @@ const Logo = ({ size = '256px', className }) => {
   );
 };
 
-export default Logo;
+export default memo(Logo);

src/components/shared/PhotoUpload.js

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { memo, useContext, useRef } from 'react';
 import { MdFileUpload } from 'react-icons/md';
 import StorageContext from '../../contexts/StorageContext';
 import { handleKeyUp } from '../../utils';
@@ -47,4 +47,4 @@ const PhotoUpload = () => {
   );
 };
 
-export default PhotoUpload;
+export default memo(PhotoUpload);

src/components/shared/SectionIcon.js

@@ -1,5 +1,5 @@
 import { Tooltip } from '@material-ui/core';
-import React from 'react';
+import React, { memo } from 'react';
 import { scroller } from 'react-scroll';
 import { handleKeyUp } from '../../utils';
 
@@ -30,4 +30,4 @@ const SectionIcon = ({ section, containerId, placement = 'right' }) => {
   );
 };
 
-export default SectionIcon;
+export default memo(SectionIcon);

src/components/shared/Wrapper.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { Slide, toast } from 'react-toastify';
 import ModalRegistrar from '../../modals/ModalRegistrar';
 
@@ -23,4 +23,4 @@ const Wrapper = ({ children }) => {
   );
 };
 
-export default Wrapper;
+export default memo(Wrapper);