Clear image on cancel (#3528)

ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx

@@ -115,6 +115,12 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
     setRating
   );
 
+  function onCancelEditing() {
+    setFrontImage(undefined);
+    setBackImage(undefined);
+    onCancel?.();
+  }
+
   // set up hotkeys
   useEffect(() => {
     // Mousetrap.bind("u", (e) => {
@@ -474,7 +480,7 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         objectName={movie?.name ?? intl.formatMessage({ id: "movie" })}
         isNew={isNew}
         isEditing={isEditing}
-        onToggleEdit={onCancel}
+        onToggleEdit={onCancelEditing}
         onSave={formik.handleSubmit}
         saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
         onImageChange={onFrontImageChange}

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -254,7 +254,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
         <PerformerEditPanel
           performer={performer}
           isVisible={isEditing}
-          onCancelEditing={() => setIsEditing(false)}
+          onCancel={() => setIsEditing(false)}
           setImage={setImage}
           setEncodingImage={setEncodingImage}
         />

ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx

@@ -51,7 +51,7 @@ const isScraper = (
 interface IPerformerDetails {
   performer: Partial<GQL.PerformerDataFragment>;
   isVisible: boolean;
-  onCancelEditing?: () => void;
+  onCancel?: () => void;
   setImage: (image?: string | null) => void;
   setEncodingImage: (loading: boolean) => void;
 }
@@ -59,7 +59,7 @@ interface IPerformerDetails {
 export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
   performer,
   isVisible,
-  onCancelEditing,
+  onCancel,
   setImage,
   setEncodingImage,
 }) => {
@@ -402,10 +402,9 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
     setImage(formik.values.image);
   }, [formik.values.image, setImage]);
 
-  useEffect(
-    () => setEncodingImage(encodingImage),
-    [setEncodingImage, encodingImage]
-  );
+  useEffect(() => {
+    setEncodingImage(encodingImage);
+  }, [setEncodingImage, encodingImage]);
 
   function onImageLoad(imageData: string | null) {
     formik.setFieldValue("image", imageData);
@@ -450,12 +449,17 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
       setIsLoading(false);
       return;
     }
-    if (!isNew && onCancelEditing) {
-      onCancelEditing();
+    if (!isNew && onCancel) {
+      onCancel();
     }
     setIsLoading(false);
   }
 
+  function onCancelEditing() {
+    setImage(undefined);
+    onCancel?.();
+  }
+
   // set up hotkeys
   useEffect(() => {
     if (isVisible) {
@@ -473,14 +477,6 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
     }
   });
 
-  useEffect(() => {
-    setImage(formik.values.image);
-  }, [formik.values.image, setImage]);
-
-  useEffect(() => {
-    setEncodingImage(encodingImage);
-  }, [setEncodingImage, encodingImage]);
-
   useEffect(() => {
     const newQueryableScrapers = (
       Scrapers?.data?.listPerformerScrapers ?? []
@@ -687,17 +683,11 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
   function renderButtons(classNames: string) {
     return (
       <div className={cx("details-edit", "col-xl-9", classNames)}>
-        {!isNew && onCancelEditing ? (
-          <Button
-            className="mr-2"
-            variant="primary"
-            onClick={() => onCancelEditing()}
-          >
+        {!isNew && onCancel ? (
+          <Button className="mr-2" variant="primary" onClick={onCancelEditing}>
             <FormattedMessage id="actions.cancel" />
           </Button>
-        ) : (
-          ""
-        )}
+        ) : null}
         {renderScraperMenu()}
         <ImageInput
           isEditing

ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx

@@ -95,10 +95,9 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
     setImage(formik.values.image);
   }, [formik.values.image, setImage]);
 
-  useEffect(
-    () => setEncodingImage(encodingImage),
-    [setEncodingImage, encodingImage]
-  );
+  useEffect(() => {
+    setEncodingImage(encodingImage);
+  }, [setEncodingImage, encodingImage]);
 
   function setRating(v: number) {
     formik.setFieldValue("rating100", v);
@@ -110,6 +109,11 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
     setRating
   );
 
+  function onCancelEditing() {
+    setImage(undefined);
+    onCancel?.();
+  }
+
   // set up hotkeys
   useEffect(() => {
     Mousetrap.bind("s s", () => formik.handleSubmit());
@@ -317,7 +321,7 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
         objectName={studio?.name ?? intl.formatMessage({ id: "studio" })}
         isNew={isNew}
         isEditing
-        onToggleEdit={onCancel}
+        onToggleEdit={onCancelEditing}
         onSave={formik.handleSubmit}
         saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
         onImageChange={onImageChange}

ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx

@@ -82,6 +82,11 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
     onSubmit: (values) => onSubmit(values),
   });
 
+  function onCancelEditing() {
+    setImage(undefined);
+    onCancel?.();
+  }
+
   // set up hotkeys
   useEffect(() => {
     Mousetrap.bind("s s", () => formik.handleSubmit());
@@ -260,7 +265,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
         objectName={tag?.name ?? intl.formatMessage({ id: "tag" })}
         isNew={isNew}
         isEditing={isEditing}
-        onToggleEdit={onCancel}
+        onToggleEdit={onCancelEditing}
         onSave={formik.handleSubmit}
         saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
         onImageChange={onImageChange}