improve Customize logo setting variable and props naming

https://youtrack.weseek.co.jp/issue/GW-7759
- Rename uploadAttachment to uploadBrandLogo
- Remove CropLogoModal component
- Change name of show and circular props in ImageCropModal
- Add null check of logoSrc  in GrowiNavbarLogo

packages/app/src/client/services/AdminCustomizeContainer.js

@@ -68,7 +68,7 @@ export default class AdminCustomizeContainer extends Container {
     this.switchPageListLimitationL = this.switchPageListLimitationL.bind(this);
     this.switchPageListLimitationXL = this.switchPageListLimitationXL.bind(this);
     this.deleteLogo = this.deleteLogo.bind(this);
-    this.uploadAttachment = this.uploadAttachment.bind(this);
+    this.uploadBrandLogo = this.uploadBrandLogo.bind(this);
 
   }
 
@@ -467,7 +467,7 @@ export default class AdminCustomizeContainer extends Container {
     }
   }
 
-  async uploadAttachment(file) {
+  async uploadBrandLogo(file) {
     try {
       const formData = new FormData();
       formData.append('file', file);

packages/app/src/components/Admin/Customize/CropLogoModal.tsx

@@ -1,125 +0,0 @@
-import React, {
-  FC, useCallback, useEffect, useState,
-} from 'react';
-import canvasToBlob from 'async-canvas-to-blob';
-
-import {
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from 'reactstrap';
-
-import ReactCrop from 'react-image-crop';
-import loggerFactory from '~/utils/logger';
-import 'react-image-crop/dist/ReactCrop.css';
-import { toastError } from '~/client/util/apiNotification';
-
-const logger = loggerFactory('growi:ImageCropModal');
-
-interface ICropOptions {
-  aspect: number
-  unit: string,
-  x: number
-  y: number
-  width: number,
-  height: number,
-}
-
-type CropOptions = ICropOptions | null
-
-type Props = {
-  show: boolean,
-  src: string | ArrayBuffer | null,
-  onModalClose: () => void,
-  onCropCompleted: (res: any) => void
-}
-const CropLogoModal: FC<Props> = (props: Props) => {
-
-  const {
-    show, src, onModalClose, onCropCompleted,
-  } = props;
-
-  const [imageRef, setImageRef] = useState<HTMLImageElement>();
-  const [cropOptions, setCropOtions] = useState<CropOptions>(null);
-
-  const reset = useCallback(() => {
-    if (imageRef) {
-      const size = Math.min(imageRef.width, imageRef.height);
-      setCropOtions({
-        aspect: 1,
-        unit: 'px',
-        x: imageRef.width / 2 - size / 2,
-        y: imageRef.height / 2 - size / 2,
-        width: size,
-        height: size,
-      });
-    }
-  }, [imageRef]);
-
-  useEffect(() => {
-    document.body.style.position = 'static';
-    reset();
-  }, [reset]);
-
-  const onImageLoaded = (image) => {
-    setImageRef(image);
-    reset();
-    return false;
-  };
-
-
-  const onCropChange = (crop) => {
-    setCropOtions(crop);
-  };
-
-  const getCroppedImg = async(image, crop) => {
-    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, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height);
-    try {
-      const blob = await canvasToBlob(canvas);
-      return blob;
-    }
-    catch (err) {
-      logger.error(err);
-      toastError(new Error('Failed to draw image'));
-    }
-  };
-
-  const crop = async() => {
-    // crop immages
-    if (imageRef && cropOptions?.width && cropOptions.height) {
-      const result = await getCroppedImg(imageRef, cropOptions);
-      onCropCompleted(result);
-    }
-  };
-
-  return (
-    <Modal isOpen={show} toggle={onModalClose}>
-      <ModalHeader tag="h4" toggle={onModalClose} className="bg-info text-light">
-        Image Crop
-      </ModalHeader>
-      <ModalBody className="my-4">
-        <ReactCrop src={src} crop={cropOptions} onImageLoaded={onImageLoaded} onChange={onCropChange} />
-      </ModalBody>
-      <ModalFooter>
-        <button type="button" className="btn btn-outline-danger rounded-pill mr-auto" onClick={reset}>
-          Reset
-        </button>
-        <button type="button" className="btn btn-outline-secondary rounded-pill mr-2" onClick={onModalClose}>
-          Cancel
-        </button>
-        <button type="button" className="btn btn-outline-primary rounded-pill" onClick={crop}>
-          Crop
-        </button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export default CropLogoModal;

packages/app/src/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -67,7 +67,7 @@ const CustomizeLogoSetting: FC<Props> = (props: Props) => {
 
   const onCropCompleted = async(croppedImage) => {
     try {
-      await adminCustomizeContainer.uploadAttachment(croppedImage);
+      await adminCustomizeContainer.uploadBrandLogo(croppedImage);
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.current_logo') }));
     }
     catch (err) {
@@ -149,11 +149,11 @@ const CustomizeLogoSetting: FC<Props> = (props: Props) => {
       </div>
 
       <ImageCropModal
-        show={isShow}
+        isShow={isShow}
         src={src}
         onModalClose={cancelModal}
         onCropCompleted={onCropCompleted}
-        circular={false}
+        isCircular={false}
       />
     </React.Fragment>
   );

packages/app/src/components/Common/ImageCropModal.tsx

@@ -30,16 +30,16 @@ interface ICropOptions {
 type CropOptions = ICropOptions | null
 
 type Props = {
-  show: boolean,
+  isShow: boolean,
   src: string | ArrayBuffer | null,
   onModalClose: () => void,
   onCropCompleted: (res: any) => void,
-  circular: boolean,
+  isCircular: boolean,
 }
 const ImageCropModal: FC<Props> = (props: Props) => {
 
   const {
-    show, src, onModalClose, onCropCompleted, circular,
+    isShow, src, onModalClose, onCropCompleted, isCircular,
   } = props;
 
   const [imageRef, setImageRef] = useState<HTMLImageElement>();
@@ -102,12 +102,12 @@ const ImageCropModal: FC<Props> = (props: Props) => {
   };
 
   return (
-    <Modal isOpen={show} toggle={onModalClose}>
+    <Modal isOpen={isShow} toggle={onModalClose}>
       <ModalHeader tag="h4" toggle={onModalClose} className="bg-info text-light">
         {t('crop_image_modal.image_crop')}
       </ModalHeader>
       <ModalBody className="my-4">
-        <ReactCrop src={src} crop={cropOptions} onImageLoaded={onImageLoaded} onChange={onCropChange} circularCrop={circular} />
+        <ReactCrop src={src} crop={cropOptions} onImageLoaded={onImageLoaded} onChange={onCropChange} circularCrop={isCircular} />
       </ModalBody>
       <ModalFooter>
         <button type="button" className="btn btn-outline-danger rounded-pill mr-auto" onClick={reset}>

packages/app/src/components/Me/ProfileImageSettings.jsx

@@ -164,11 +164,11 @@ class ProfileImageSettings extends React.Component {
         </div>
 
         <ImageCropModal
-          show={this.state.show}
+          isShow={this.state.show}
           src={this.state.src}
           onModalClose={this.cancelModal}
           onCropCompleted={this.onCropCompleted}
-          circular
+          isCircular
         />
 
         <div className="row my-3">

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -91,7 +91,7 @@ interface NavbarLogoProps {
 const GrowiNavbarLogo: FC<NavbarLogoProps> = memo((props: NavbarLogoProps) => {
 
   const { logoSrc } = props;
-  return logoSrc
+  return logoSrc != null
     ? (<img src={logoSrc} className="picture picture-lg " id="settingBrandLogo" width="32" />)
     : <GrowiLogo />;