refactor(ImageCropper): remove react-emitter-factory

Author: purfectliterature

client/app/lib/components/core/ImageCropper/index.tsx

@@ -1,5 +1,10 @@
-import { ReactEventHandler, useRef, useState } from 'react';
-import useEmitterFactory, { Emits } from 'react-emitter-factory';
+import {
+  forwardRef,
+  ReactEventHandler,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import ReactCrop, { PercentCrop, PixelCrop } from 'react-image-crop';
 import { RotateRight } from '@mui/icons-material';
 import { Slider } from '@mui/material';
@@ -15,7 +20,7 @@ const DEFAULT_CROP: PercentCrop = {
   height: 50,
 };
 
-export interface ImageCropperEmitter {
+export interface ImageCropperRef {
   /**
    * Resets the cropper to allow initial crop to be generated on new `src` load.
    */
@@ -27,7 +32,7 @@ export interface ImageCropperEmitter {
   getImage?: () => Promise<Blob | undefined>;
 }
 
-interface ImageCropperProps extends Emits<ImageCropperEmitter> {
+interface ImageCropperProps {
   src?: string;
   alt?: string;
   circular?: boolean;
@@ -37,78 +42,82 @@ interface ImageCropperProps extends Emits<ImageCropperEmitter> {
   type?: string;
 }
 
-const ImageCropper = (props: ImageCropperProps): JSX.Element => {
-  const [crop, setCrop] = useState<PercentCrop>();
-  const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
-  const [rotation, setRotation] = useState(0);
-  const imgRef = useRef<HTMLImageElement>(null);
+const ImageCropper = forwardRef<ImageCropperRef, ImageCropperProps>(
+  (props, ref) => {
+    const [crop, setCrop] = useState<PercentCrop>();
+    const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
+    const [rotation, setRotation] = useState(0);
+    const imgRef = useRef<HTMLImageElement>(null);
 
-  const generateImage = async (): Promise<Blob | undefined> => {
-    if (!imgRef.current || !completedCrop) return undefined;
-    return getImage(
-      imgRef.current!,
-      completedCrop,
-      rotation,
-      props.type ?? 'image/jpeg',
-    );
-  };
+    const generateImage = async (): Promise<Blob | undefined> => {
+      if (!imgRef.current || !completedCrop) return undefined;
+      return getImage(
+        imgRef.current!,
+        completedCrop,
+        rotation,
+        props.type ?? 'image/jpeg',
+      );
+    };
 
-  const handleImageLoad: ReactEventHandler<HTMLImageElement> = (e) => {
-    if (props.aspect) {
-      const { width, height } = e.currentTarget;
-      setCrop(centerAspectCrop(width, height, props.aspect));
-    } else {
-      setCrop(DEFAULT_CROP);
-    }
-  };
+    const handleImageLoad: ReactEventHandler<HTMLImageElement> = (e) => {
+      if (props.aspect) {
+        const { width, height } = e.currentTarget;
+        setCrop(centerAspectCrop(width, height, props.aspect));
+      } else {
+        setCrop(DEFAULT_CROP);
+      }
+    };
 
-  // Must set completedCrop and rotation as dependencies because generateImage
-  // captures them as the state changes, except imgRef which persists throughout.
-  useEmitterFactory(
-    props,
-    {
-      resetImage: () => setCrop(undefined),
-      getImage: () => generateImage(),
-    },
-    [completedCrop, rotation],
-  );
+    // Must set completedCrop and rotation as dependencies because generateImage
+    // captures them as the state changes, except imgRef which persists throughout.
+    useImperativeHandle(
+      ref,
+      () => ({
+        resetImage: (): void => setCrop(undefined),
+        getImage: (): Promise<Blob | undefined> => generateImage(),
+      }),
+      [completedCrop, rotation],
+    );
 
-  return (
-    <div>
-      <ReactCrop
-        aspect={props.aspect}
-        circularCrop={props.circular}
-        crop={crop}
-        keepSelection
-        onChange={(_, percentCrop): void => setCrop(percentCrop)}
-        onComplete={setCompletedCrop}
-        ruleOfThirds={props.grids ?? true}
-      >
-        <img
-          ref={imgRef}
-          alt={props.alt}
-          className="pointer-events-none select-none"
-          onError={props.onLoadError}
-          onLoad={handleImageLoad}
-          src={props.src}
-          style={{ transform: `rotate(${rotation}deg)` }}
-        />
-      </ReactCrop>
+    return (
+      <div>
+        <ReactCrop
+          aspect={props.aspect}
+          circularCrop={props.circular}
+          crop={crop}
+          keepSelection
+          onChange={(_, percentCrop): void => setCrop(percentCrop)}
+          onComplete={setCompletedCrop}
+          ruleOfThirds={props.grids ?? true}
+        >
+          <img
+            ref={imgRef}
+            alt={props.alt}
+            className="pointer-events-none select-none"
+            onError={props.onLoadError}
+            onLoad={handleImageLoad}
+            src={props.src}
+            style={{ transform: `rotate(${rotation}deg)` }}
+          />
+        </ReactCrop>
 
-      <div className="flex items-center">
-        <RotateRight className="mr-8" />
+        <div className="flex items-center">
+          <RotateRight className="mr-8" />
 
-        <Slider
-          max={180}
-          min={0}
-          onChange={(_, angle): void => setRotation(angle as number)}
-          value={rotation}
-          valueLabelDisplay="auto"
-          valueLabelFormat={(degree): string => `${degree}\u00B0`}
-        />
+          <Slider
+            max={180}
+            min={0}
+            onChange={(_, angle): void => setRotation(angle as number)}
+            value={rotation}
+            valueLabelDisplay="auto"
+            valueLabelFormat={(degree): string => `${degree}\u00B0`}
+          />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
+
+ImageCropper.displayName = 'ImageCropper';
 
 export default ImageCropper;

client/app/lib/components/core/dialogs/ImageCropDialog.tsx

@@ -1,8 +1,8 @@
-import { ComponentProps, useState } from 'react';
+import { ComponentProps, useRef, useState } from 'react';
 
 import Prompt from 'lib/components/core/dialogs/Prompt';
 import ImageCropper, {
-  ImageCropperEmitter,
+  ImageCropperRef,
 } from 'lib/components/core/ImageCropper';
 import useTranslation from 'lib/hooks/useTranslation';
 import formTranslations from 'lib/translations/form';
@@ -23,15 +23,15 @@ interface ImageCropDialogProps {
 const ImageCropDialog = (props: ImageCropDialogProps): JSX.Element => {
   const { t } = useTranslation();
   const [disabled, setDisabled] = useState(false);
-  const [imageCropper, setImageCropper] = useState<ImageCropperEmitter>();
+  const imageCropperRef = useRef<ImageCropperRef>(null);
 
   const handleLoadError = (): void => {
     props.onLoadError?.();
     props.onClose?.();
   };
 
   const handleConfirmImage = async (): Promise<void> => {
-    const image = await imageCropper?.getImage?.();
+    const image = await imageCropperRef.current?.getImage?.();
     if (!image) throw new Error(`ImageCropper returned: ${image} image data.`);
 
     props.onConfirmImage?.(image);
@@ -51,10 +51,10 @@ const ImageCropDialog = (props: ImageCropDialogProps): JSX.Element => {
       title={props.title}
     >
       <ImageCropper
+        ref={imageCropperRef}
         alt={props.alt}
         aspect={props.aspect}
         circular={props.circular}
-        emitsVia={setImageCropper}
         onLoadError={handleLoadError}
         src={props.src}
         type={props.type}