Lint project

2020-11-11 03:18:10 +11:00
parent d8efead4e8
commit 39898270df
33 changed files with 852 additions and 481 deletions
--- a/web/src/components/ImageUploader/ImageUploader.js
+++ b/web/src/components/ImageUploader/ImageUploader.js
@@ -1,6 +1,6 @@
-import React, { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import Button from "@material-ui/core/Button";
+import React, { useCallback, useState } from 'react'
+import { useDropzone } from 'react-dropzone'
+import Button from '@material-ui/core/Button'
 import axios from 'axios'
 import ReactCrop from 'react-image-crop'
 import { Dialog } from '@material-ui/core'
@@ -8,17 +8,17 @@ import { Image as CloudinaryImage } from 'cloudinary-react'
 import 'react-image-crop/dist/ReactCrop.css'
 import Svg from 'src/components/Svg/Svg.js'

-const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images";
-const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload";
+const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
+const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'

 export default function ImageUploader({
-    onImageUpload,
-    imageUrl,
-    aspectRatio,
-    className,
-    isEditable,
-    width=600
-  }) {
+  onImageUpload,
+  imageUrl,
+  aspectRatio,
+  className,
+  isEditable,
+  width = 600,
+}) {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [file, setFile] = useState()
  const [cloudinaryId, setCloudinaryId] = useState(imageUrl)
@@ -27,17 +27,17 @@ export default function ImageUploader({
    aspect: aspectRatio,
    unit: '%',
    width: 100,
-  });
+  })
  async function handleImageUpload() {
    const croppedFile = await getCroppedImg(imageObj, crop, 'avatar')
-    const imageData = new FormData();
-    imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
-    imageData.append('file', croppedFile);
+    const imageData = new FormData()
+    imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
+    imageData.append('file', croppedFile)
    let upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
    try {
      const { data } = await upload
-      if (data && data.public_id !== "") {
-        onImageUpload({cloudinaryPublicId: data.public_id})
+      if (data && data.public_id !== '') {
+        onImageUpload({ cloudinaryPublicId: data.public_id })
        setCloudinaryId(data.public_id)
        setIsModalOpen(false)
      }
@@ -46,62 +46,85 @@ export default function ImageUploader({
    }
  }
  // Drag and Drop
-  const onDrop = useCallback(acceptedFiles => {
+  const onDrop = useCallback((acceptedFiles) => {
    setIsModalOpen(true)
    const fileReader = new FileReader()
    fileReader.onload = () => {
      setFile(fileReader.result)
    }
    fileReader.readAsDataURL(acceptedFiles[0])
-  }, []);
+  }, [])

-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
  return (
-    <div className={'relative overflow-hidden '+ (!imageUrl && isEditable ? 'border ' : '') + className} style={{paddingBottom: `${1/aspectRatio*100}%`}}>
+    <div
+      className={
+        'relative overflow-hidden ' +
+        (!imageUrl && isEditable ? 'border ' : '') +
+        className
+      }
+      style={{ paddingBottom: `${(1 / aspectRatio) * 100}%` }}
+    >
      <div className="absolute w-full h-full" {...getRootProps()}>
-        {cloudinaryId && isEditable && <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
-          <Svg name="pencil" strokeWidth={2} className="text-gray-300 h-24 w-24" />
-        </button>}
+        {cloudinaryId && isEditable && (
+          <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
+            <Svg
+              name="pencil"
+              strokeWidth={2}
+              className="text-gray-300 h-24 w-24"
+            />
+          </button>
+        )}
        {isEditable && <input {...getInputProps()} />}
-        {(cloudinaryId || !isEditable) && <div className="relative overflow-hidden w-full h-full">
-          <CloudinaryImage
-            className="object-cover w-full h-full shadow overflow-hidden"
-            cloudName="irevdev"
-            publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
-            width={width}
-            crop="scale"
-          />
-        </div>}
-        {!cloudinaryId && <button className="absolute inset-0"></button>}
-        {!cloudinaryId && isEditable && <div className="text-indigo-500 flex items-center justify-center rounded-lg w-full h-full">
-          <div className="px-6 text-center">
-            Drop files here ...
-            or <span className="group flex w-full items-center justify-center py-2">
-              <span className="bg-indigo-500 shadow rounded text-gray-200 cursor-pointer p-2 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-150">upload</span>
-            </span>
+        {(cloudinaryId || !isEditable) && (
+          <div className="relative overflow-hidden w-full h-full">
+            <CloudinaryImage
+              className="object-cover w-full h-full shadow overflow-hidden"
+              cloudName="irevdev"
+              publicId={cloudinaryId || 'CadHub/eia1kwru54g2kf02s2xx'}
+              width={width}
+              crop="scale"
+            />
          </div>
-        </div>}
+        )}
+        {!cloudinaryId && <button className="absolute inset-0"></button>}
+        {!cloudinaryId && isEditable && (
+          <div className="text-indigo-500 flex items-center justify-center rounded-lg w-full h-full">
+            <div className="px-6 text-center">
+              Drop files here ... or{' '}
+              <span className="group flex w-full items-center justify-center py-2">
+                <span className="bg-indigo-500 shadow rounded text-gray-200 cursor-pointer p-2 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-150">
+                  upload
+                </span>
+              </span>
+            </div>
+          </div>
+        )}
      </div>
-      <Dialog
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-      >
+      <Dialog open={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <div className="p-4">
-          <ReactCrop src={file} crop={crop} onImageLoaded={(image) => setImageObj(image)} onChange={newCrop => setCrop(newCrop)} />
-          <Button onClick={handleImageUpload} variant="outlined">Upload</Button>
+          <ReactCrop
+            src={file}
+            crop={crop}
+            onImageLoaded={(image) => setImageObj(image)}
+            onChange={(newCrop) => setCrop(newCrop)}
+          />
+          <Button onClick={handleImageUpload} variant="outlined">
+            Upload
+          </Button>
        </div>
      </Dialog>
    </div>
-  );
+  )
 }

 function getCroppedImg(image, crop, fileName) {
-  const canvas = document.createElement('canvas');
-  const scaleX = image.naturalWidth / image.width;
-  const scaleY = image.naturalHeight / image.height;
-  canvas.width = crop.width;
-  canvas.height = crop.height;
-  const ctx = canvas.getContext('2d');
+  const canvas = document.createElement('canvas')
+  const scaleX = image.naturalWidth / image.width
+  const scaleY = image.naturalHeight / image.height
+  canvas.width = crop.width
+  canvas.height = crop.height
+  const ctx = canvas.getContext('2d')
  ctx.drawImage(
    image,
    crop.x * scaleX,
@@ -112,16 +135,20 @@ function getCroppedImg(image, crop, fileName) {
    0,
    crop.width,
    crop.height
-  );
+  )

  // As Base64 string
  // const base64Image = canvas.toDataURL('image/jpeg');

  // As a blob
  return new Promise((resolve, reject) => {
-    canvas.toBlob(blob => {
-      blob.name = fileName;
-      resolve(blob);
-    }, 'image/jpeg', 1);
-  });
+    canvas.toBlob(
+      (blob) => {
+        blob.name = fileName
+        resolve(blob)
+      },
+      'image/jpeg',
+      1
+    )
+  })
 }
--- a/web/src/components/ImageUploader/ImageUploader.stories.js
+++ b/web/src/components/ImageUploader/ImageUploader.stories.js
@@ -4,35 +4,39 @@ export const generated = () => {
  return (
    <>
      <h3>AspectRatio:1, no initial image, editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
        aspectRatio={1}
        isEditable={true}
-        className={"bg-red-400 rounded-half rounded-br-xl"}
+        className={'bg-red-400 rounded-half rounded-br-xl'}
      />
      <h3>AspectRatio 16:9, no initial image, editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
-        aspectRatio={16/9}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
+        aspectRatio={16 / 9}
        isEditable={true}
-        className={"bg-red-400 rounded-xl"}
+        className={'bg-red-400 rounded-xl'}
        imageUrl="CadHub/inakek2urbreynblzhgt"
      />
      <h3>AspectRatio:1, no initial image, NOT editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
        aspectRatio={1}
-        className={"rounded-half rounded-br-xl"}
+        className={'rounded-half rounded-br-xl'}
      />
      <h3>AspectRatio ,16:9 no initial image, NOT editable</h3>
-      <
-        ImageUploader
-        onImageUpload={({cloudinaryPublicId}) => console.log(cloudinaryPublicId)}
-        aspectRatio={16/9}
-        className={"rounded-xl"}
+      <ImageUploader
+        onImageUpload={({ cloudinaryPublicId }) =>
+          console.log(cloudinaryPublicId)
+        }
+        aspectRatio={16 / 9}
+        className={'rounded-xl'}
        imageUrl="CadHub/inakek2urbreynblzhgt"
      />
    </>