Performer select refactor (#4013)

* Overhaul performer select
* Add interface to load performers by id
* Add Performer ID select and replace existing

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -20,7 +20,6 @@ import {
   queryScrapeSceneQueryFragment,
 } from "src/core/StashService";
 import {
-  PerformerSelect,
   TagSelect,
   StudioSelect,
   GallerySelect,
@@ -51,6 +50,10 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { lazyComponent } from "src/utils/lazyComponent";
 import isEqual from "lodash-es/isEqual";
 import { DateInput } from "src/components/Shared/DateInput";
+import {
+  Performer,
+  PerformerSelect,
+} from "src/components/Performers/PerformerSelect";
 
 const SceneScrapeDialog = lazyComponent(() => import("./SceneScrapeDialog"));
 const SceneQueryModal = lazyComponent(() => import("./SceneQueryModal"));
@@ -78,6 +81,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
   const [galleries, setGalleries] = useState<{ id: string; title: string }[]>(
     []
   );
+  const [performers, setPerformers] = useState<Performer[]>([]);
 
   const Scrapers = useListSceneScrapers();
   const [fragmentScrapers, setFragmentScrapers] = useState<GQL.Scraper[]>([]);
@@ -98,6 +102,10 @@ export const SceneEditPanel: React.FC<IProps> = ({
     );
   }, [scene.galleries]);
 
+  useEffect(() => {
+    setPerformers(scene.performers ?? []);
+  }, [scene.performers]);
+
   const { configuration: stashConfig } = React.useContext(ConfigurationContext);
 
   // Network state
@@ -218,6 +226,14 @@ export const SceneEditPanel: React.FC<IProps> = ({
     );
   }
 
+  function onSetPerformers(items: Performer[]) {
+    setPerformers(items);
+    formik.setFieldValue(
+      "performer_ids",
+      items.map((item) => item.id)
+    );
+  }
+
   useRatingKeybinds(
     isVisible,
     stashConfig?.ui?.ratingSystemOptions?.type,
@@ -581,8 +597,15 @@ export const SceneEditPanel: React.FC<IProps> = ({
       });
 
       if (idPerfs.length > 0) {
-        const newIds = idPerfs.map((p) => p.stored_id);
-        formik.setFieldValue("performer_ids", newIds as string[]);
+        onSetPerformers(
+          idPerfs.map((p) => {
+            return {
+              id: p.stored_id!,
+              name: p.name ?? "",
+              alias_list: [],
+            };
+          })
+        );
       }
     }
 
@@ -852,13 +875,8 @@ export const SceneEditPanel: React.FC<IProps> = ({
               <Col sm={9} xl={12}>
                 <PerformerSelect
                   isMulti
-                  onSelect={(items) =>
-                    formik.setFieldValue(
-                      "performer_ids",
-                      items.map((item) => item.id)
-                    )
-                  }
-                  ids={formik.values.performer_ids}
+                  onSelect={onSetPerformers}
+                  values={performers}
                 />
               </Col>
             </Form.Group>