Modify method and props name

https://youtrack.weseek.co.jp/issue/GW-7876
- Rename isShouldCrop props to showCropOption
- Add null to imageRef type
- Modify convertBase64ToBlob method
- Rename crop method to save and fix comment
- Add method to handle close modal
- Set imageRef to null and setIsCropImage true on close modal
(Crop Image modal showing previous image when close modal / cancel)
- Move close modal to ImageCropModal component
- Adjust prop and method  usage

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

@@ -80,11 +80,6 @@ const CustomizeLogoSetting = (): JSX.Element => {
     }
   }, [t]);
 
-  // Clear uploadedLogoSrc and close modal
-  const onModalCloseHandler = useCallback(() => {
-    setIsImageCropModalShow(false);
-    setUploadLogoSrc(null);
-  }, []);
 
   const onCropCompleted = useCallback(async(croppedImage) => {
     try {
@@ -99,8 +94,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       setRetrieveError(err);
       throw new Error('Failed to upload brand logo');
     }
-    onModalCloseHandler();
-  }, [t, onModalCloseHandler]);
+  }, [t]);
 
   return (
     <React.Fragment>
@@ -176,10 +170,10 @@ const CustomizeLogoSetting = (): JSX.Element => {
       <ImageCropModal
         isShow={isImageCropModalShow}
         src={uploadLogoSrc}
-        onModalClose={onModalCloseHandler}
+        onModalClose={() => setIsImageCropModalShow(false)}
         onCropCompleted={onCropCompleted}
         isCircular={false}
-        isShouldCrop={false}
+        showCropOption={false}
       />
     </React.Fragment>
   );

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

@@ -35,15 +35,15 @@ type Props = {
   onModalClose: () => void,
   onCropCompleted: (res: any) => void,
   isCircular: boolean,
-  isShouldCrop: boolean
+  showCropOption: boolean
 }
 const ImageCropModal: FC<Props> = (props: Props) => {
 
   const {
-    isShow, src, onModalClose, onCropCompleted, isCircular, isShouldCrop,
+    isShow, src, onModalClose, onCropCompleted, isCircular, showCropOption,
   } = props;
 
-  const [imageRef, setImageRef] = useState<HTMLImageElement>();
+  const [imageRef, setImageRef] = useState<HTMLImageElement | null>(null);
   const [cropOptions, setCropOtions] = useState<CropOptions>(null);
   const [isCropImage, setIsCropImage] = useState<boolean>(true);
   const { t } = useTranslation();
@@ -97,27 +97,31 @@ const ImageCropModal: FC<Props> = (props: Props) => {
 
   // Convert base64 Image to blob
   const convertBase64ToBlob = async(base64Image: string) => {
-    const parts = base64Image.split(';base64,');
-    const imageType = parts[0].split(':')[1];
-    const decodedData = window.atob(parts[1]);
-    const uInt8Array = new Uint8Array(decodedData.length);
-    for (let i = 0; i < decodedData.length; ++i) {
-      uInt8Array[i] = decodedData.charCodeAt(i);
-    }
-    return new Blob([uInt8Array], { type: imageType });
+    const base64Response = await fetch(base64Image);
+    const blob = await base64Response.blob();
+    return blob;
+  };
+
+
+  // Clear image and set isImageCrop true on modal close
+  const onModalCloseHandler = async() => {
+    setImageRef(null);
+    setIsCropImage(true);
+    onModalClose();
   };
 
-  const crop = async() => {
-    // crop immages
+  // Crop and save image
+  const save = async() => {
     if (imageRef && cropOptions?.width && cropOptions.height) {
       const result = isCropImage ? await getCroppedImg(imageRef, cropOptions) : await convertBase64ToBlob(imageRef.src);
       onCropCompleted(result);
     }
+    onModalCloseHandler();
   };
 
   return (
-    <Modal isOpen={isShow} toggle={onModalClose}>
-      <ModalHeader tag="h4" toggle={onModalClose} className="bg-info text-light">
+    <Modal isOpen={isShow} toggle={onModalCloseHandler}>
+      <ModalHeader tag="h4" toggle={onModalCloseHandler} className="bg-info text-light">
         {t('crop_image_modal.image_crop')}
       </ModalHeader>
       <ModalBody className="my-4">
@@ -131,7 +135,7 @@ const ImageCropModal: FC<Props> = (props: Props) => {
         <button type="button" className="btn btn-outline-danger rounded-pill mr-auto" onClick={reset}>
           {t('crop_image_modal.reset')}
         </button>
-        { !isShouldCrop && (
+        { !showCropOption && (
           <div className="mr-auto">
             <div className="custom-control custom-switch ">
               <input
@@ -148,10 +152,10 @@ const ImageCropModal: FC<Props> = (props: Props) => {
           </div>
         )
         }
-        <button type="button" className="btn btn-outline-secondary rounded-pill mr-2" onClick={onModalClose}>
+        <button type="button" className="btn btn-outline-secondary rounded-pill mr-2" onClick={onModalCloseHandler}>
           {t('crop_image_modal.cancel')}
         </button>
-        <button type="button" className="btn btn-outline-primary rounded-pill" onClick={crop}>
+        <button type="button" className="btn btn-outline-primary rounded-pill" onClick={save}>
           { isCropImage ? t('crop_image_modal.crop') : t('crop_image_modal.save') }
         </button>
       </ModalFooter>

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

@@ -53,8 +53,6 @@ const ProfileImageSettings = (): JSX.Element => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       setUploadedPictureSrc((response as any).attachment.filePathProxied);
 
-      // close modal
-      setShowImageCropModal(false);
     }
     catch (err) {
       toastError(err);
@@ -160,7 +158,7 @@ const ProfileImageSettings = (): JSX.Element => {
         onModalClose={() => setShowImageCropModal(false)}
         onCropCompleted={cropCompletedHandler}
         isCircular
-        isShouldCrop
+        showCropOption
       />
 
       <div className="row my-3">