Fix performer input values being lost when failing to create (#1133)

* Fix lost performer input values
* Fix unsetting image studio

ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx

@@ -27,7 +27,9 @@ export const ImageEditPanel: React.FC<IProps> = ({
   const Toast = useToast();
   const [title, setTitle] = useState<string>(image?.title ?? "");
   const [rating, setRating] = useState<number>(image.rating ?? NaN);
-  const [studioId, setStudioId] = useState<string>(image.studio?.id ?? "");
+  const [studioId, setStudioId] = useState<string | undefined>(
+    image.studio?.id ?? undefined
+  );
   const [performerIds, setPerformerIds] = useState<string[]>(
     image.performers.map((p) => p.id)
   );
@@ -153,7 +155,7 @@ export const ImageEditPanel: React.FC<IProps> = ({
             <Col xs={9}>
               <StudioSelect
                 onSelect={(items) =>
-                  setStudioId(items.length > 0 ? items[0]?.id : "")
+                  setStudioId(items.length > 0 ? items[0]?.id : undefined)
                 }
                 ids={studioId ? [studioId] : []}
               />

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

@@ -7,7 +7,6 @@ import * as GQL from "src/core/generated-graphql";
 import {
   useFindPerformer,
   usePerformerUpdate,
-  usePerformerCreate,
   usePerformerDestroy,
 } from "src/core/StashService";
 import {
@@ -62,7 +61,6 @@ export const Performer: React.FC = () => {
   const isLoading = performerLoading || loading;
 
   const [updatePerformer] = usePerformerUpdate();
-  const [createPerformer] = usePerformerCreate();
   const [deletePerformer] = usePerformerDestroy();
 
   const activeTabKey =
@@ -107,43 +105,6 @@ export const Performer: React.FC = () => {
   if (!performer.id && !isNew)
     return <ErrorMessage error={`No performer found with id ${id}.`} />;
 
-  async function onSave(
-    performerInput:
-      | Partial<GQL.PerformerCreateInput>
-      | Partial<GQL.PerformerUpdateInput>
-  ) {
-    setIsLoading(true);
-    try {
-      if (!isNew) {
-        await updatePerformer({
-          variables: {
-            input: {
-              ...performerInput,
-              stash_ids: performerInput?.stash_ids?.map((s) => ({
-                endpoint: s.endpoint,
-                stash_id: s.stash_id,
-              })),
-            } as GQL.PerformerUpdateInput,
-          },
-        });
-        if (performerInput.image) {
-          // Refetch image to bust browser cache
-          await fetch(`/performer/${id}/image`, { cache: "reload" });
-        }
-      } else {
-        const result = await createPerformer({
-          variables: performerInput as GQL.PerformerCreateInput,
-        });
-        if (result.data?.performerCreate) {
-          history.push(`/performers/${result.data.performerCreate.id}`);
-        }
-      }
-    } catch (e) {
-      Toast.error(e);
-    }
-    setIsLoading(false);
-  }
-
   async function onDelete() {
     setIsLoading(true);
     try {
@@ -187,7 +148,6 @@ export const Performer: React.FC = () => {
           isVisible={activeTabKey === "edit"}
           isNew={isNew}
           onDelete={onDelete}
-          onSave={onSave}
           onImageChange={onImageChange}
           onImageEncoding={onImageEncoding}
         />
@@ -312,7 +272,6 @@ export const Performer: React.FC = () => {
             isVisible
             isNew={isNew}
             onDelete={onDelete}
-            onSave={onSave}
             onImageChange={onImageChange}
             onImageEncoding={onImageEncoding}
           />

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

@@ -11,6 +11,8 @@ import {
   queryScrapePerformer,
   queryScrapePerformerURL,
   mutateReloadScrapers,
+  usePerformerUpdate,
+  usePerformerCreate,
 } from "src/core/StashService";
 import {
   Icon,
@@ -26,6 +28,7 @@ import {
   EditableTextUtils,
 } from "src/utils";
 import { useToast } from "src/hooks";
+import { useHistory } from "react-router-dom";
 import { PerformerScrapeDialog } from "./PerformerScrapeDialog";
 
 interface IPerformerDetails {
@@ -33,11 +36,6 @@ interface IPerformerDetails {
   isNew?: boolean;
   isEditing?: boolean;
   isVisible: boolean;
-  onSave?: (
-    performer:
-      | Partial<GQL.PerformerCreateInput>
-      | Partial<GQL.PerformerUpdateInput>
-  ) => void;
   onDelete?: () => void;
   onImageChange?: (image?: string | null) => void;
   onImageEncoding?: (loading?: boolean) => void;
@@ -48,12 +46,12 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
   isNew,
   isEditing,
   isVisible,
-  onSave,
   onDelete,
   onImageChange,
   onImageEncoding,
 }) => {
   const Toast = useToast();
+  const history = useHistory();
 
   // Editing state
   const [
@@ -100,6 +98,9 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
 
   const intl = useIntl();
 
+  const [updatePerformer] = usePerformerUpdate();
+  const [createPerformer] = usePerformerCreate();
+
   const Scrapers = useListPerformerScrapers();
   const [queryableScrapers, setQueryableScrapers] = useState<GQL.Scraper[]>([]);
 
@@ -201,6 +202,43 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
     setImage(imageData);
   }
 
+  async function onSave(
+    performerInput:
+      | Partial<GQL.PerformerCreateInput>
+      | Partial<GQL.PerformerUpdateInput>
+  ) {
+    setIsLoading(true);
+    try {
+      if (!isNew) {
+        await updatePerformer({
+          variables: {
+            input: {
+              ...performerInput,
+              stash_ids: performerInput?.stash_ids?.map((s) => ({
+                endpoint: s.endpoint,
+                stash_id: s.stash_id,
+              })),
+            } as GQL.PerformerUpdateInput,
+          },
+        });
+        if (performerInput.image) {
+          // Refetch image to bust browser cache
+          await fetch(`/performer/${performer.id}/image`, { cache: "reload" });
+        }
+      } else {
+        const result = await createPerformer({
+          variables: performerInput as GQL.PerformerCreateInput,
+        });
+        if (result.data?.performerCreate) {
+          history.push(`/performers/${result.data.performerCreate.id}`);
+        }
+      }
+    } catch (e) {
+      Toast.error(e);
+    }
+    setIsLoading(false);
+  }
+
   // set up hotkeys
   useEffect(() => {
     if (isEditing && isVisible) {