diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx index 6c6da6125..cef86ecd5 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx @@ -597,6 +597,7 @@ export const PerformerEditPanel: React.FC = ({ return ( { diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx index adb1c303c..00d1d2a0e 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScrapeDialog.tsx @@ -9,11 +9,7 @@ import { ScrapedTextAreaRow, ScrapedCountryRow, } from "src/components/Shared/ScrapeDialog/ScrapeDialog"; -import { useTagCreate } from "src/core/StashService"; import { Form } from "react-bootstrap"; -import { TagSelect } from "src/components/Shared/Select"; -import { useToast } from "src/hooks/Toast"; -import clone from "lodash-es/clone"; import { genderStrings, genderToString, @@ -25,7 +21,14 @@ import { stringToCircumcised, } from "src/utils/circumcised"; import { IStashBox } from "./PerformerStashBoxModal"; -import { ScrapeResult } from "src/components/Shared/ScrapeDialog/scrapeResult"; +import { + ObjectListScrapeResult, + ScrapeResult, +} from "src/components/Shared/ScrapeDialog/scrapeResult"; +import { ScrapedTagsRow } from "src/components/Shared/ScrapeDialog/ScrapedObjectsRow"; +import { sortStoredIdObjects } from "src/utils/data"; +import { Tag } from "src/components/Tags/TagSelect"; +import { useCreateScrapedTag } from "src/components/Shared/ScrapeDialog/createObjects"; function renderScrapedGender( result: ScrapeResult, @@ -76,55 +79,6 @@ function renderScrapedGenderRow( ); } -function renderScrapedTags( - result: ScrapeResult, - isNew?: boolean, - onChange?: (value: string[]) => void -) { - const resultValue = isNew ? result.newValue : result.originalValue; - const value = resultValue ?? []; - - return ( - { - if (onChange) { - onChange(items.map((i) => i.id)); - } - }} - ids={value} - /> - ); -} - -function renderScrapedTagsRow( - title: string, - result: ScrapeResult, - onChange: (value: ScrapeResult) => void, - newTags: GQL.ScrapedTag[], - onCreateNew?: (value: GQL.ScrapedTag) => void -) { - return ( - renderScrapedTags(result)} - renderNewField={() => - renderScrapedTags(result, true, (value) => - onChange(result.cloneWithValue(value)) - ) - } - newValues={newTags} - onChange={onChange} - onCreateNew={(i) => { - if (onCreateNew) onCreateNew(newTags[i]); - }} - /> - ); -} - function renderScrapedCircumcised( result: ScrapeResult, isNew?: boolean, @@ -176,6 +130,7 @@ function renderScrapedCircumcisedRow( interface IPerformerScrapeDialogProps { performer: Partial; + performerTags: Tag[]; scraped: GQL.ScrapedPerformer; scraper?: GQL.Scraper | IStashBox; @@ -349,55 +304,15 @@ export const PerformerScrapeDialog: React.FC = ( ) ); - const [createTag] = useTagCreate(); - const Toast = useToast(); - - interface IHasStoredID { - stored_id?: string | null; - } - - function mapStoredIdObjects( - scrapedObjects?: IHasStoredID[] - ): string[] | undefined { - if (!scrapedObjects) { - return undefined; - } - const ret = scrapedObjects - .map((p) => p.stored_id) - .filter((p) => { - return p !== undefined && p !== null; - }) as string[]; - - if (ret.length === 0) { - return undefined; - } - - // sort by id numerically - ret.sort((a, b) => { - return parseInt(a, 10) - parseInt(b, 10); - }); - - return ret; - } - - function sortIdList(idList?: string[] | null) { - if (!idList) { - return; - } - - const ret = clone(idList); - // sort by id numerically - ret.sort((a, b) => { - return parseInt(a, 10) - parseInt(b, 10); - }); - - return ret; - } - - const [tags, setTags] = useState>( - new ScrapeResult( - sortIdList(props.performer.tag_ids ?? undefined), - mapStoredIdObjects(props.scraped.tags ?? undefined) + const [tags, setTags] = useState>( + new ObjectListScrapeResult( + sortStoredIdObjects( + props.performerTags.map((t) => ({ + stored_id: t.id, + name: t.name, + })) + ), + sortStoredIdObjects(props.scraped.tags ?? undefined) ) ); @@ -405,6 +320,13 @@ export const PerformerScrapeDialog: React.FC = ( props.scraped.tags?.filter((t) => !t.stored_id) ?? [] ); + const createNewTag = useCreateScrapedTag({ + scrapeResult: tags, + setScrapeResult: setTags, + newObjects: newTags, + setNewObjects: setNewTags, + }); + const [image, setImage] = useState>( new ScrapeResult( props.performer.image, @@ -453,40 +375,6 @@ export const PerformerScrapeDialog: React.FC = ( return <>; } - async function createNewTag(toCreate: GQL.ScrapedTag) { - const tagInput: GQL.TagCreateInput = { name: toCreate.name ?? "" }; - try { - const result = await createTag({ - variables: { - input: tagInput, - }, - }); - - // add the new tag to the new tags value - const tagClone = tags.cloneWithValue(tags.newValue); - if (!tagClone.newValue) { - tagClone.newValue = []; - } - tagClone.newValue.push(result.data!.tagCreate!.id); - setTags(tagClone); - - // remove the tag from the list - const newTagsClone = newTags.concat(); - const pIndex = newTagsClone.indexOf(toCreate); - newTagsClone.splice(pIndex, 1); - - setNewTags(newTagsClone); - - Toast.success( - - Created tag: {toCreate.name} - - ); - } catch (e) { - Toast.error(e); - } - } - function makeNewScrapedItem(): GQL.ScrapedPerformer { const newImage = image.getNewValue(); return { @@ -507,12 +395,7 @@ export const PerformerScrapeDialog: React.FC = ( twitter: twitter.getNewValue(), instagram: instagram.getNewValue(), gender: gender.getNewValue(), - tags: tags.getNewValue()?.map((m) => { - return { - stored_id: m, - name: "", - }; - }), + tags: tags.getNewValue(), images: newImage ? [newImage] : undefined, details: details.getNewValue(), death_date: deathDate.getNewValue(), @@ -642,13 +525,13 @@ export const PerformerScrapeDialog: React.FC = ( result={details} onChange={(value) => setDetails(value)} /> - {renderScrapedTagsRow( - intl.formatMessage({ id: "tags" }), - tags, - (value) => setTags(value), - newTags, - createNewTag - )} + setTags(value)} + newObjects={newTags} + onCreateNew={createNewTag} + />