- switched to useSelector

- implemented skills section

src/components/shared/Input.js

@@ -1,9 +1,9 @@
 import cx from "classnames";
 import { get, isFunction } from "lodash";
-import React, { useContext } from "react";
+import React, { useMemo } from "react";
 import { MdClose } from "react-icons/md";
 import { v4 as uuidv4 } from "uuid";
-import ResumeContext from "../../contexts/ResumeContext";
+import { useDispatch, useSelector } from "../../contexts/ResumeContext";
 import { handleKeyDown } from "../../utils";
 import styles from "./Input.module.css";
 
@@ -11,8 +11,8 @@ const Input = ({
   name,
   path,
   label,
-  value,
   error,
+  value,
   onBlur,
   touched,
   checked,
@@ -25,86 +25,109 @@ const Input = ({
   type = "text",
 }) => {
   const uuid = uuidv4();
-  const { state, dispatch } = useContext(ResumeContext);
+  const stateValue = useSelector((state) => get(state, path));
+  const dispatch = useDispatch();
 
-  const inputProps = (path) => ({
-    value: get(state, path) || "",
-    onChange: (e) => {
-      dispatch({
-        type: "on_input",
-        payload: {
-          path,
-          value: e.target.value,
-        },
-      });
-    },
-  });
+  value = value || stateValue;
+  onChange = isFunction(onChange)
+    ? onChange
+    : (e) => {
+        dispatch({
+          type: "on_input",
+          payload: {
+            path,
+            value: e.target.value,
+          },
+        });
+      };
 
-  return (
-    <div className={cx(styles.container, className)}>
-      <label htmlFor={uuid}>
-        <span>
-          {label}{" "}
-          {isRequired && (
-            <span className="opacity-75 font-normal lowercase">(Required)</span>
-          )}
-        </span>
-
-        {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}
-              {...(path && inputProps(path))}
-            />
-
-            <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>
-        ) : (
-          <div className="relative grid items-center">
-            <input
-              id={uuid}
-              name={name}
-              type={type}
-              value={value}
-              onBlur={onBlur}
-              checked={checked}
-              onChange={onChange}
-              placeholder={placeholder}
-              {...(path && inputProps(path))}
-            />
-
-            {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"
-              />
+  return useMemo(
+    () => (
+      <div className={cx(styles.container, className)}>
+        <label htmlFor={uuid}>
+          <span>
+            {label}{" "}
+            {isRequired && (
+              <span className="opacity-75 font-normal lowercase">
+                (Required)
+              </span>
             )}
-          </div>
-        )}
-        {error && touched && <p>{error}</p>}
-      </label>
-    </div>
+          </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"
+                />
+              )}
+            </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,
+    ]
   );
 };
 

src/components/shared/PhotoUpload.js

@@ -0,0 +1,50 @@
+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);
+  const { uploadPhotograph } = useContext(StorageContext);
+
+  const handleIconClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    uploadPhotograph(file);
+  };
+
+  return (
+    <div className="flex items-center">
+      <div
+        role="button"
+        tabIndex="0"
+        className={styles.circle}
+        onClick={handleIconClick}
+        onKeyDown={(e) => handleKeyDown(e, handleIconClick)}
+      >
+        <MdFileUpload size="22px" />
+        <input
+          name="file"
+          type="file"
+          ref={fileInputRef}
+          className="hidden"
+          onChange={handleImageUpload}
+        />
+      </div>
+
+      <Input
+        name="photograph"
+        label="Photograph"
+        className="pl-6"
+        path="profile.photograph"
+      />
+    </div>
+  );
+};
+
+export default PhotoUpload;

src/components/shared/PhotoUpload.module.css

@@ -0,0 +1,6 @@
+.circle {
+  width: 60px;
+  height: 60px;
+  flex: 0 0 60px;
+  @apply flex items-center justify-center cursor-pointer bg-secondary text-secondary-dark rounded-full;
+}