Fix/design

package.json

@@ -20,7 +20,7 @@
     "query-string": "^6.13.1",
     "react": "^16.11.0",
     "react-background-slider": "^1.2.0",
-    "react-cropper": "^1.3.0",
+    "react-cropper": "2.1.7",
     "react-dom": "^16.11.0",
     "react-images-upload": "^1.2.7",
     "react-photo-gallery": "^8.0.0",

src/Components/Upload/ImageCropper/index.jsx

@@ -0,0 +1,111 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import NoStyleButton from 'Components/Form/NoStyleButton';
+
+import Cropper from 'react-cropper';
+import 'cropperjs/dist/cropper.css';
+
+function ImageCropper(props) {
+  const { imgHandler } = props;
+  const cropperRef = useRef(null);
+  const user = useSelector((state) => state.authReducer.user);
+
+  const [pictureImg, setPictureImg] = useState(null);
+  const [pictureImgUrl, setPictureImgUrl] = useState(null);
+
+  const handlePictureImg = async (e) => {
+    if (e.target.files[0] !== undefined) {
+      setPictureImg(e.target.files[0]);
+      setPictureImgUrl(URL.createObjectURL(e.target.files[0]));
+    }
+  };
+
+  const handlePostUpload = useCallback(async () => {
+    if (user && cropperRef.current) {
+      const imgElement = cropperRef.current;
+      const { cropper } = imgElement;
+      if (pictureImg && cropper) {
+        const { name } = pictureImg;
+        const canvas = cropper.getCroppedCanvas();
+        if (canvas) {
+          canvas.toBlob(
+            async (croppedImg) => {
+              const image = new FormData();
+              image.append('img', croppedImg, name);
+              imgHandler(image);
+            },
+            undefined,
+            1,
+          );
+        }
+      } else {
+        // TO DO :: notify uploading image !
+      }
+    } else {
+      // TO DO :: implement login modal !
+    }
+  }, [imgHandler, user, pictureImg]);
+
+  const removePicture = () => {
+    setPictureImg(null);
+    setPictureImgUrl(null);
+  };
+
+  useEffect(() => {
+    handlePostUpload();
+  }, [pictureImg, handlePostUpload]);
+
+  return (
+    <>
+      <div className="imageCropper">
+        <div className="imageCropper__creator">
+          <div className="imageCropper__creator-previewPic">
+            {pictureImg && (
+              <>
+                <Cropper
+                  className="cropper"
+                  alt="imageCrop"
+                  style={{ zIndex: 2 }}
+                  src={pictureImgUrl}
+                  ref={cropperRef}
+                  crop={handlePostUpload}
+                />
+                <NoStyleButton
+                  className="imageCropper__creator-previewPic__remove"
+                  onClick={removePicture}
+                >
+                  X
+                </NoStyleButton>
+              </>
+            )}
+            {!pictureImg && (
+              <div className="imageCropper__creator-previewPic__empty">
+                <div className="imageCropper__creator-previewPic__empty-uploadPic">
+                  <label htmlFor="art-upload">
+                    Choose Image
+                    <input
+                      accept="image/*"
+                      type="file"
+                      name="img"
+                      id="art-upload"
+                      style={{ display: 'none' }}
+                      onChange={handlePictureImg}
+                    />
+                  </label>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+ImageCropper.propTypes = {
+  imgHandler: PropTypes.func.isRequired,
+};
+
+export default ImageCropper;

src/Components/Upload/ImageCropper/index.scss

@@ -0,0 +1,81 @@
+/*
+  ImageCropper Component Styling
+*/
+
+.imageCropper {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  button:focus {
+    outline: none;
+  }
+  &__creator {
+    margin-bottom: 1rem;
+    height: 100%;
+    &-previewPic {
+      height: 100%;
+      position: relative;
+      display: flex;
+      margin: auto;
+      border: 2px dotted #ccd0d5;
+      background-color: rgba(255, 244, 201, 0.3);
+
+      &__remove {
+        margin: 0.5rem;
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: $main-color;
+        font-weight: bolder;
+        font-size: 1.5rem;
+      }
+
+      &__empty {
+        position: relative;
+        width: 100%;
+        background-color: $background-color;
+        opacity: 50%;
+        &-uploadPic {
+          z-index: 1;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+
+          label {
+            margin: 0;
+            cursor: pointer;
+            font-family: 'GothamRound';
+            color: $main-color;
+
+            &:hover {
+              animation: buttonHover 0.3s ease;
+              animation-fill-mode: forwards;
+              border-radius: 18px;
+              padding: 1rem;
+              background-color: $main-color;
+              color: white;
+            }
+          }
+        }
+      }
+
+      .cropper {
+        margin: auto;
+        max-width: 80%;
+        max-height: 100%;
+      }
+    }
+  }
+}
+
+@keyframes buttonHover {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(1.3);
+  }
+}