Fix tag selector in scrape dialogs (#4526)

ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx

@@ -1,16 +1,13 @@
 import React, { useMemo } from "react";
 import * as GQL from "src/core/generated-graphql";
-import {
-  MovieSelect,
-  TagSelect,
-  StudioSelect,
-} from "src/components/Shared/Select";
+import { MovieSelect, StudioSelect } from "src/components/Shared/Select";
 import {
   ScrapeDialogRow,
   IHasName,
 } from "src/components/Shared/ScrapeDialog/ScrapeDialog";
 import { PerformerSelect } from "src/components/Performers/PerformerSelect";
 import { ScrapeResult } from "src/components/Shared/ScrapeDialog/scrapeResult";
+import { TagSelect } from "src/components/Tags/TagSelect";
 
 interface IScrapedStudioRow {
   title: string;
@@ -230,35 +227,45 @@ export const ScrapedMoviesRow: React.FC<
 };
 
 export const ScrapedTagsRow: React.FC<
-  IScrapedObjectRowImpl<GQL.ScrapedTag, string>
+  IScrapedObjectRowImpl<GQL.ScrapedTag, GQL.ScrapedTag>
 > = ({ title, result, onChange, newObjects, onCreateNew }) => {
   function renderScrapedTags(
-    scrapeResult: ScrapeResult<string[]>,
+    scrapeResult: ScrapeResult<GQL.ScrapedTag[]>,
     isNew?: boolean,
-    onChangeFn?: (value: string[]) => void
+    onChangeFn?: (value: GQL.ScrapedTag[]) => void
   ) {
     const resultValue = isNew
       ? scrapeResult.newValue
       : scrapeResult.originalValue;
     const value = resultValue ?? [];
 
+    const selectValue = value.map((p) => {
+      const aliases: string[] = [];
+      return {
+        id: p.stored_id ?? "",
+        name: p.name ?? "",
+        aliases,
+      };
+    });
+
     return (
       <TagSelect
         isMulti
-        className="form-control react-select"
+        className="form-control"
         isDisabled={!isNew}
         onSelect={(items) => {
           if (onChangeFn) {
-            onChangeFn(items.map((i) => i.id));
+            // map the id back to stored_id
+            onChangeFn(items.map((p) => ({ ...p, stored_id: p.id })));
           }
         }}
-        ids={value}
+        values={selectValue}
       />
     );
   }
 
   return (
-    <ScrapedObjectsRow<GQL.ScrapedTag, string>
+    <ScrapedObjectsRow<GQL.ScrapedTag, GQL.ScrapedTag>
       title={title}
       result={result}
       renderObjects={renderScrapedTags}

ui/v2.5/src/components/Shared/ScrapeDialog/createObjects.ts

@@ -69,14 +69,16 @@ export function useCreateScrapedStudio(props: IUseCreateNewStudioProps) {
   return useCreateObject("studio", createNewStudio);
 }
 
-interface IUseCreateNewPerformerProps {
-  scrapeResult: ScrapeResult<GQL.ScrapedPerformer[]>;
-  setScrapeResult: (scrapeResult: ScrapeResult<GQL.ScrapedPerformer[]>) => void;
-  newObjects: GQL.ScrapedPerformer[];
-  setNewObjects: (newObject: GQL.ScrapedPerformer[]) => void;
+interface IUseCreateNewObjectProps<T> {
+  scrapeResult: ScrapeResult<T[]>;
+  setScrapeResult: (scrapeResult: ScrapeResult<T[]>) => void;
+  newObjects: T[];
+  setNewObjects: (newObject: T[]) => void;
 }
 
-export function useCreateScrapedPerformer(props: IUseCreateNewPerformerProps) {
+export function useCreateScrapedPerformer(
+  props: IUseCreateNewObjectProps<GQL.ScrapedPerformer>
+) {
   const [createPerformer] = usePerformerCreate();
 
   const { scrapeResult, setScrapeResult, newObjects, setNewObjects } = props;
@@ -173,20 +175,39 @@ export function useCreateScrapedMovie(
 }
 
 export function useCreateScrapedTag(
-  props: IUseCreateNewObjectIDListProps<GQL.ScrapedTag>
+  props: IUseCreateNewObjectProps<GQL.ScrapedTag>
 ) {
   const [createTag] = useTagCreate();
 
+  const { scrapeResult, setScrapeResult, newObjects, setNewObjects } = props;
+
   async function createNewTag(toCreate: GQL.ScrapedTag) {
-    const tagInput: GQL.TagCreateInput = { name: toCreate.name ?? "" };
+    const input: GQL.TagCreateInput = { name: toCreate.name ?? "" };
+
     const result = await createTag({
-      variables: {
-        input: tagInput,
-      },
+      variables: { input },
     });
 
-    return result.data?.tagCreate?.id ?? "";
+    const newValue = [...(scrapeResult.newValue ?? [])];
+    if (result.data?.tagCreate)
+      newValue.push({
+        stored_id: result.data.tagCreate.id,
+        name: result.data.tagCreate.name,
+      });
+
+    // add the new tag to the new tags value
+    const tagClone = scrapeResult.cloneWithValue(newValue);
+    setScrapeResult(tagClone);
+
+    // remove the tag from the list
+    const newTagsClone = newObjects.concat();
+    const pIndex = newTagsClone.findIndex((p) => p.name === toCreate.name);
+    if (pIndex === -1) throw new Error("Could not find tag to remove");
+
+    newTagsClone.splice(pIndex, 1);
+
+    setNewObjects(newTagsClone);
   }
 
-  return useCreateNewObjectIDList("tag", props, createNewTag);
+  return useCreateObject("tag", createNewTag);
 }