-
{renderPerformerImage()}
-
+
+
;
- isNew?: boolean;
- isEditing?: boolean;
- isVisible: boolean;
- onDelete?: () => void;
- onImageChange?: (image?: string | null) => void;
- onImageEncoding?: (loading?: boolean) => void;
}
export const PerformerDetailsPanel: React.FC = ({
performer,
- isNew,
- isEditing,
- isVisible,
- onDelete,
- onImageChange,
- onImageEncoding,
}) => {
- const Toast = useToast();
- const history = useHistory();
-
- // Editing state
- const [
- isDisplayingScraperDialog,
- setIsDisplayingScraperDialog,
- ] = useState();
- const [
- scrapePerformerDetails,
- setScrapePerformerDetails,
- ] = useState();
- const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
-
- // Editing performer state
- const [image, setImage] = useState();
- const [name, setName] = useState(performer?.name ?? "");
- const [aliases, setAliases] = useState(performer.aliases ?? "");
- const [birthdate, setBirthdate] = useState(performer.birthdate ?? "");
- const [ethnicity, setEthnicity] = useState(performer.ethnicity ?? "");
- const [country, setCountry] = useState(performer.country ?? "");
- const [eyeColor, setEyeColor] = useState(performer.eye_color ?? "");
- const [height, setHeight] = useState(performer.height ?? "");
- const [measurements, setMeasurements] = useState(
- performer.measurements ?? ""
- );
- const [fakeTits, setFakeTits] = useState(performer.fake_tits ?? "");
- const [careerLength, setCareerLength] = useState(
- performer.career_length ?? ""
- );
- const [tattoos, setTattoos] = useState(performer.tattoos ?? "");
- const [piercings, setPiercings] = useState(performer.piercings ?? "");
- const [url, setUrl] = useState(performer.url ?? "");
- const [twitter, setTwitter] = useState(performer.twitter ?? "");
- const [instagram, setInstagram] = useState(performer.instagram ?? "");
- const [gender, setGender] = useState(
- genderToString(performer.gender ?? undefined)
- );
- const [stashIDs, setStashIDs] = useState(
- performer.stash_ids ?? []
- );
- const favorite = performer.favorite ?? false;
-
// Network state
- const [isLoading, setIsLoading] = useState(false);
-
const intl = useIntl();
- const [updatePerformer] = usePerformerUpdate();
- const [createPerformer] = usePerformerCreate();
-
- const Scrapers = useListPerformerScrapers();
- const [queryableScrapers, setQueryableScrapers] = useState([]);
-
- const [scrapedPerformer, setScrapedPerformer] = useState<
- GQL.ScrapedPerformer | undefined
- >();
-
- const imageEncoding = ImageUtils.usePasteImage(onImageLoad, isEditing);
-
- function translateScrapedGender(scrapedGender?: string) {
- if (!scrapedGender) {
- return;
- }
-
- let retEnum: GQL.GenderEnum | undefined;
-
- // try to translate from enum values first
- const upperGender = scrapedGender?.toUpperCase();
- const asEnum = genderToString(upperGender as GQL.GenderEnum);
- if (asEnum) {
- retEnum = stringToGender(asEnum);
- } else {
- // try to match against gender strings
- const caseInsensitive = true;
- retEnum = stringToGender(scrapedGender, caseInsensitive);
- }
-
- return genderToString(retEnum);
- }
-
- function updatePerformerEditStateFromScraper(
- state: Partial
- ) {
- if (state.name) {
- setName(state.name);
- }
-
- if (state.aliases) {
- setAliases(state.aliases ?? undefined);
- }
- if (state.birthdate) {
- setBirthdate(state.birthdate ?? undefined);
- }
- if (state.ethnicity) {
- setEthnicity(state.ethnicity ?? undefined);
- }
- if (state.country) {
- setCountry(state.country ?? undefined);
- }
- if (state.eye_color) {
- setEyeColor(state.eye_color ?? undefined);
- }
- if (state.height) {
- setHeight(state.height ?? undefined);
- }
- if (state.measurements) {
- setMeasurements(state.measurements ?? undefined);
- }
- if (state.fake_tits) {
- setFakeTits(state.fake_tits ?? undefined);
- }
- if (state.career_length) {
- setCareerLength(state.career_length ?? undefined);
- }
- if (state.tattoos) {
- setTattoos(state.tattoos ?? undefined);
- }
- if (state.piercings) {
- setPiercings(state.piercings ?? undefined);
- }
- if (state.url) {
- setUrl(state.url ?? undefined);
- }
- if (state.twitter) {
- setTwitter(state.twitter ?? undefined);
- }
- if (state.instagram) {
- setInstagram(state.instagram ?? undefined);
- }
- if (state.gender) {
- // gender is a string in the scraper data
- setGender(translateScrapedGender(state.gender ?? undefined));
- }
-
- // image is a base64 string
- // #404: don't overwrite image if it has been modified by the user
- // overwrite if not new since it came from a dialog
- // otherwise follow existing behaviour
- if (
- (!isNew || image === undefined) &&
- (state as GQL.ScrapedPerformerDataFragment).image !== undefined
- ) {
- const imageStr = (state as GQL.ScrapedPerformerDataFragment).image;
- setImage(imageStr ?? undefined);
- }
- }
-
- function onImageLoad(imageData: string) {
- setImage(imageData);
- }
-
- async function onSave(
- performerInput:
- | Partial
- | Partial
- ) {
- 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) {
- Mousetrap.bind("s s", () => {
- onSave?.(getPerformerInput());
- });
-
- if (!isNew) {
- Mousetrap.bind("d d", () => {
- setIsDeleteAlertOpen(true);
- });
- }
-
- return () => {
- Mousetrap.unbind("s s");
-
- if (!isNew) {
- Mousetrap.unbind("d d");
- }
- };
- }
- });
-
- useEffect(() => {
- if (onImageChange) {
- onImageChange(image);
- }
- return () => onImageChange?.();
- }, [image, onImageChange]);
-
- useEffect(() => onImageEncoding?.(imageEncoding), [
- onImageEncoding,
- imageEncoding,
- ]);
-
- useEffect(() => {
- const newQueryableScrapers = (
- Scrapers?.data?.listPerformerScrapers ?? []
- ).filter((s) =>
- s.performer?.supported_scrapes.includes(GQL.ScrapeType.Name)
- );
-
- setQueryableScrapers(newQueryableScrapers);
- }, [Scrapers]);
-
- if (isLoading) return ) {
- ImageUtils.onImageChange(event, onImageLoad);
- }
-
- function onDisplayScrapeDialog(scraper: GQL.Scraper) {
- setIsDisplayingScraperDialog(scraper);
- }
-
- async function onReloadScrapers() {
- setIsLoading(true);
- try {
- await mutateReloadScrapers();
-
- // reload the performer scrapers
- await Scrapers.refetch();
- } catch (e) {
- Toast.error(e);
- } finally {
- setIsLoading(false);
- }
- }
-
- function getQueryScraperPerformerInput() {
- if (!scrapePerformerDetails) return {};
-
- // image is not supported
- const { __typename, image: _image, ...ret } = scrapePerformerDetails;
- return ret;
- }
-
- async function onScrapePerformer() {
- setIsDisplayingScraperDialog(undefined);
- try {
- if (!scrapePerformerDetails || !isDisplayingScraperDialog) return;
- setIsLoading(true);
- const result = await queryScrapePerformer(
- isDisplayingScraperDialog.id,
- getQueryScraperPerformerInput()
- );
- if (!result?.data?.scrapePerformer) return;
-
- // if this is a new performer, just dump the data
- if (isNew) {
- updatePerformerEditStateFromScraper(result.data.scrapePerformer);
- } else {
- setScrapedPerformer(result.data.scrapePerformer);
- }
- } catch (e) {
- Toast.error(e);
- } finally {
- setIsLoading(false);
- }
- }
-
- async function onScrapePerformerURL() {
- if (!url) return;
- setIsLoading(true);
- try {
- const result = await queryScrapePerformerURL(url);
- if (!result.data || !result.data.scrapePerformerURL) {
- return;
- }
-
- // if this is a new performer, just dump the data
- if (isNew) {
- updatePerformerEditStateFromScraper(result.data.scrapePerformerURL);
- } else {
- setScrapedPerformer(result.data.scrapePerformerURL);
- }
- } catch (e) {
- Toast.error(e);
- } finally {
- setIsLoading(false);
- }
- }
-
- function renderEthnicity() {
- return TableUtils.renderInputGroup({
- title: "Ethnicity",
- value: ethnicity,
- isEditing: !!isEditing,
- placeholder: "Ethnicity",
- onChange: setEthnicity,
- });
- }
-
- function renderScraperMenu() {
- if (!performer || !isEditing) {
- return;
- }
-
- const popover = (
-
-
- <>
- {queryableScrapers
- ? queryableScrapers.map((s) => (
-
-
- );
-
- return (
-
-
-
- );
- }
-
- function renderScraperDialog() {
- return (
- setIsDisplayingScraperDialog(undefined)}
- header="Scrape"
- accept={{ onClick: onScrapePerformer, text: "Scrape" }}
- >
-
- );
- }
-
- function urlScrapable(scrapedUrl: string) {
- return (
- !!scrapedUrl &&
- (Scrapers?.data?.listPerformerScrapers ?? []).some((s) =>
- (s?.performer?.urls ?? []).some((u) => scrapedUrl.includes(u))
- )
- );
- }
-
- function maybeRenderScrapeButton() {
- if (!url || !isEditing || !urlScrapable(url)) {
- return undefined;
- }
- return (
-
- );
- }
-
- function maybeRenderScrapeDialog() {
- if (!scrapedPerformer) {
- return;
- }
-
- const currentPerformer: Partial = {
- name,
- aliases,
- birthdate,
- ethnicity,
- country,
- eye_color: eyeColor,
- height,
- measurements,
- fake_tits: fakeTits,
- career_length: careerLength,
- tattoos,
- piercings,
- url,
- twitter,
- instagram,
- gender: stringToGender(gender),
- image_path: image ?? performer.image_path,
- };
-
- return (
- {
- onScrapeDialogClosed(p);
- }}
- />
- );
- }
-
- function onScrapeDialogClosed(p?: GQL.ScrapedPerformerDataFragment) {
- if (p) {
- updatePerformerEditStateFromScraper(p);
- }
- setScrapedPerformer(undefined);
- }
-
- function renderURLField() {
- return (
-
-
- URL
- {maybeRenderScrapeButton()}
-
-
- {EditableTextUtils.renderInputGroup({
- title: "URL",
- value: url,
- url: TextUtils.sanitiseURL(url),
- isEditing: !!isEditing,
- onChange: setUrl,
- })}
-
-
- );
- }
-
- function maybeRenderButtons() {
- if (isEditing) {
- return (
- setIsDeleteAlertOpen(false) }}
- >
-
- );
- }
-
- function maybeRenderName() {
- if (isEditing) {
- return TableUtils.renderInputGroup({
- title: "Name",
- value: name,
- isEditing: !!isEditing,
- placeholder: "Name",
- onChange: setName,
- });
- }
- }
-
- function maybeRenderAliases() {
- if (isEditing) {
- return TableUtils.renderInputGroup({
- title: "Aliases",
- value: aliases,
- isEditing: !!isEditing,
- placeholder: "Aliases",
- onChange: setAliases,
- });
- }
- }
-
- function renderGender() {
- return TableUtils.renderHtmlSelect({
- title: "Gender",
- value: gender,
- isEditing: !!isEditing,
- onChange: (value: string) => setGender(value),
- selectOptions: [""].concat(getGenderStrings()),
- });
- }
-
- const removeStashID = (stashID: GQL.StashIdInput) => {
- setStashIDs(
- stashIDs.filter(
- (s) =>
- !(s.endpoint === stashID.endpoint && s.stash_id === stashID.stash_id)
- )
- );
- };
-
function renderStashIDs() {
if (!performer.stash_ids?.length) {
return;
}
return (
-
- StashIDs
-
+
-
+
+
);
}
- const formatHeight = () => {
- if (isEditing) {
- return height;
- }
+ const formatHeight = (height?: string | null) => {
if (!height) {
return "";
}
@@ -717,92 +63,45 @@ export const PerformerDetailsPanel: React.FC = ({
return (
<>
- {renderDeleteAlert()}
- {renderScraperDialog()}
- {maybeRenderScrapeDialog()}
-
-
-
- {maybeRenderName()}
- {maybeRenderAliases()}
- {renderGender()}
- {TableUtils.renderInputGroup({
- title: "Birthdate",
- value: isEditing
- ? birthdate
- : TextUtils.formatDate(intl, birthdate),
- isEditing: !!isEditing,
- onChange: setBirthdate,
- })}
- {renderEthnicity()}
- {TableUtils.renderInputGroup({
- title: "Eye Color",
- value: eyeColor,
- isEditing: !!isEditing,
- onChange: setEyeColor,
- })}
- {TableUtils.renderInputGroup({
- title: "Country",
- value: country,
- isEditing: !!isEditing,
- onChange: setCountry,
- })}
- {TableUtils.renderInputGroup({
- title: `Height ${isEditing ? "(cm)" : ""}`,
- value: formatHeight(),
- isEditing: !!isEditing,
- onChange: setHeight,
- })}
- {TableUtils.renderInputGroup({
- title: "Measurements",
- value: measurements,
- isEditing: !!isEditing,
- onChange: setMeasurements,
- })}
- {TableUtils.renderInputGroup({
- title: "Fake Tits",
- value: fakeTits,
- isEditing: !!isEditing,
- onChange: setFakeTits,
- })}
- {TableUtils.renderInputGroup({
- title: "Career Length",
- value: careerLength,
- isEditing: !!isEditing,
- onChange: setCareerLength,
- })}
- {TableUtils.renderInputGroup({
- title: "Tattoos",
- value: tattoos,
- isEditing: !!isEditing,
- onChange: setTattoos,
- })}
- {TableUtils.renderInputGroup({
- title: "Piercings",
- value: piercings,
- isEditing: !!isEditing,
- onChange: setPiercings,
- })}
- {renderURLField()}
- {TableUtils.renderInputGroup({
- title: "Twitter",
- value: twitter,
- url: TextUtils.sanitiseURL(twitter, TextUtils.twitterURL),
- isEditing: !!isEditing,
- onChange: setTwitter,
- })}
- {TableUtils.renderInputGroup({
- title: "Instagram",
- value: instagram,
- url: TextUtils.sanitiseURL(instagram, TextUtils.instagramURL),
- isEditing: !!isEditing,
- onChange: setInstagram,
- })}
- {renderStashIDs()}
-
-
-
- {maybeRenderButtons()}
+ ;
+ isNew?: boolean;
+ isVisible: boolean;
+ onDelete?: () => void;
+ onImageChange?: (image?: string | null) => void;
+ onImageEncoding?: (loading?: boolean) => void;
+}
+
+export const PerformerEditPanel: React.FC = ({
+ performer,
+ isNew,
+ isVisible,
+ onDelete,
+ onImageChange,
+ onImageEncoding,
+}) => {
+ const Toast = useToast();
+ const history = useHistory();
+
+ // Editing state
+ const [
+ isDisplayingScraperDialog,
+ setIsDisplayingScraperDialog,
+ ] = useState();
+ const [
+ scrapePerformerDetails,
+ setScrapePerformerDetails,
+ ] = useState();
+ const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
+
+ // Network state
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [updatePerformer] = usePerformerUpdate();
+ const [createPerformer] = usePerformerCreate();
+
+ const Scrapers = useListPerformerScrapers();
+ const [queryableScrapers, setQueryableScrapers] = useState([]);
+
+ const [scrapedPerformer, setScrapedPerformer] = useState<
+ GQL.ScrapedPerformer | undefined
+ >();
+
+ const imageEncoding = ImageUtils.usePasteImage(onImageLoad, true);
+
+ const genderOptions = [""].concat(getGenderStrings());
+
+ const schema = yup.object({
+ name: yup.string().required(),
+ aliases: yup.string().optional(),
+ gender: yup.string().optional().oneOf(genderOptions),
+ birthdate: yup.string().optional(),
+ ethnicity: yup.string().optional(),
+ eye_color: yup.string().optional(),
+ country: yup.string().optional(),
+ height: yup.string().optional(),
+ measurements: yup.string().optional(),
+ fake_tits: yup.string().optional(),
+ career_length: yup.string().optional(),
+ tattoos: yup.string().optional(),
+ piercings: yup.string().optional(),
+ url: yup.string().optional(),
+ twitter: yup.string().optional(),
+ instagram: yup.string().optional(),
+ stash_ids: yup.mixed().optional(),
+ image: yup.string().optional().nullable(),
+ });
+
+ const initialValues = {
+ name: performer.name ?? "",
+ aliases: performer.aliases ?? "",
+ gender: genderToString(performer.gender ?? undefined),
+ birthdate: performer.birthdate ?? "",
+ ethnicity: performer.ethnicity ?? "",
+ eye_color: performer.eye_color ?? "",
+ country: performer.country ?? "",
+ height: performer.height ?? "",
+ measurements: performer.measurements ?? "",
+ fake_tits: performer.fake_tits ?? "",
+ career_length: performer.career_length ?? "",
+ tattoos: performer.tattoos ?? "",
+ piercings: performer.piercings ?? "",
+ url: performer.url ?? "",
+ twitter: performer.twitter ?? "",
+ instagram: performer.instagram ?? "",
+ stash_ids: performer.stash_ids ?? undefined,
+ image: undefined,
+ };
+
+ type InputValues = typeof initialValues;
+
+ const formik = useFormik({
+ initialValues,
+ validationSchema: schema,
+ onSubmit: (values) => onSave(getPerformerInput(values)),
+ });
+
+ function translateScrapedGender(scrapedGender?: string) {
+ if (!scrapedGender) {
+ return;
+ }
+
+ let retEnum: GQL.GenderEnum | undefined;
+
+ // try to translate from enum values first
+ const upperGender = scrapedGender?.toUpperCase();
+ const asEnum = genderToString(upperGender as GQL.GenderEnum);
+ if (asEnum) {
+ retEnum = stringToGender(asEnum);
+ } else {
+ // try to match against gender strings
+ const caseInsensitive = true;
+ retEnum = stringToGender(scrapedGender, caseInsensitive);
+ }
+
+ return genderToString(retEnum);
+ }
+
+ function updatePerformerEditStateFromScraper(
+ state: Partial
+ ) {
+ if (state.name) {
+ formik.setFieldValue("name", state.name);
+ }
+
+ if (state.aliases) {
+ formik.setFieldValue("aliases", state.aliases);
+ }
+ if (state.birthdate) {
+ formik.setFieldValue("birthdate", state.birthdate);
+ }
+ if (state.ethnicity) {
+ formik.setFieldValue("ethnicity", state.ethnicity);
+ }
+ if (state.country) {
+ formik.setFieldValue("country", state.country);
+ }
+ if (state.eye_color) {
+ formik.setFieldValue("eye_color", state.eye_color);
+ }
+ if (state.height) {
+ formik.setFieldValue("height", state.height);
+ }
+ if (state.measurements) {
+ formik.setFieldValue("measurements", state.measurements);
+ }
+ if (state.fake_tits) {
+ formik.setFieldValue("fake_tits", state.fake_tits);
+ }
+ if (state.career_length) {
+ formik.setFieldValue("career_length", state.career_length);
+ }
+ if (state.tattoos) {
+ formik.setFieldValue("tattoos", state.tattoos);
+ }
+ if (state.piercings) {
+ formik.setFieldValue("piercings", state.piercings);
+ }
+ if (state.url) {
+ formik.setFieldValue("url", state.url);
+ }
+ if (state.twitter) {
+ formik.setFieldValue("twitter", state.twitter);
+ }
+ if (state.instagram) {
+ formik.setFieldValue("instagram", state.instagram);
+ }
+ if (state.gender) {
+ // gender is a string in the scraper data
+ formik.setFieldValue(
+ "gender",
+ translateScrapedGender(state.gender ?? undefined)
+ );
+ }
+
+ // image is a base64 string
+ // #404: don't overwrite image if it has been modified by the user
+ // overwrite if not new since it came from a dialog
+ // otherwise follow existing behaviour
+ if (
+ (!isNew || formik.values.image === undefined) &&
+ (state as GQL.ScrapedPerformerDataFragment).image !== undefined
+ ) {
+ const imageStr = (state as GQL.ScrapedPerformerDataFragment).image;
+ formik.setFieldValue("image", imageStr ?? undefined);
+ }
+ }
+
+ function onImageLoad(imageData: string) {
+ formik.setFieldValue("image", imageData);
+ }
+
+ async function onSave(
+ performerInput:
+ | Partial
+ | Partial
+ ) {
+ 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" });
+ }
+
+ history.push(`/performers/${performer.id}`);
+ } 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 (isVisible) {
+ Mousetrap.bind("s s", () => {
+ onSave?.(getPerformerInput(formik.values));
+ });
+
+ if (!isNew) {
+ Mousetrap.bind("d d", () => {
+ setIsDeleteAlertOpen(true);
+ });
+ }
+
+ return () => {
+ Mousetrap.unbind("s s");
+
+ if (!isNew) {
+ Mousetrap.unbind("d d");
+ }
+ };
+ }
+ });
+
+ useEffect(() => {
+ if (onImageChange) {
+ onImageChange(formik.values.image);
+ }
+ return () => onImageChange?.();
+ }, [formik.values.image, onImageChange]);
+
+ useEffect(() => onImageEncoding?.(imageEncoding), [
+ onImageEncoding,
+ imageEncoding,
+ ]);
+
+ useEffect(() => {
+ const newQueryableScrapers = (
+ Scrapers?.data?.listPerformerScrapers ?? []
+ ).filter((s) =>
+ s.performer?.supported_scrapes.includes(GQL.ScrapeType.Name)
+ );
+
+ setQueryableScrapers(newQueryableScrapers);
+ }, [Scrapers]);
+
+ if (isLoading) return ) {
+ ImageUtils.onImageChange(event, onImageLoad);
+ }
+
+ function onDisplayScrapeDialog(scraper: GQL.Scraper) {
+ setIsDisplayingScraperDialog(scraper);
+ }
+
+ async function onReloadScrapers() {
+ setIsLoading(true);
+ try {
+ await mutateReloadScrapers();
+
+ // reload the performer scrapers
+ await Scrapers.refetch();
+ } catch (e) {
+ Toast.error(e);
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ function getQueryScraperPerformerInput() {
+ if (!scrapePerformerDetails) return {};
+
+ // image is not supported
+ const { __typename, image: _image, ...ret } = scrapePerformerDetails;
+ return ret;
+ }
+
+ async function onScrapePerformer() {
+ setIsDisplayingScraperDialog(undefined);
+ try {
+ if (!scrapePerformerDetails || !isDisplayingScraperDialog) return;
+ setIsLoading(true);
+ const result = await queryScrapePerformer(
+ isDisplayingScraperDialog.id,
+ getQueryScraperPerformerInput()
+ );
+ if (!result?.data?.scrapePerformer) return;
+
+ // if this is a new performer, just dump the data
+ if (isNew) {
+ updatePerformerEditStateFromScraper(result.data.scrapePerformer);
+ } else {
+ setScrapedPerformer(result.data.scrapePerformer);
+ }
+ } catch (e) {
+ Toast.error(e);
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ async function onScrapePerformerURL() {
+ const { url } = formik.values;
+ if (!url) return;
+ setIsLoading(true);
+ try {
+ const result = await queryScrapePerformerURL(url);
+ if (!result.data || !result.data.scrapePerformerURL) {
+ return;
+ }
+
+ // if this is a new performer, just dump the data
+ if (isNew) {
+ updatePerformerEditStateFromScraper(result.data.scrapePerformerURL);
+ } else {
+ setScrapedPerformer(result.data.scrapePerformerURL);
+ }
+ } catch (e) {
+ Toast.error(e);
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ function renderScraperMenu() {
+ if (!performer) {
+ return;
+ }
+
+ const popover = (
+
+
+ <>
+ {queryableScrapers
+ ? queryableScrapers.map((s) => (
+
+
+ );
+
+ return (
+
+
+
+ );
+ }
+
+ function renderScraperDialog() {
+ return (
+ setIsDisplayingScraperDialog(undefined)}
+ header="Scrape"
+ accept={{ onClick: onScrapePerformer, text: "Scrape" }}
+ >
+
+ );
+ }
+
+ function urlScrapable(scrapedUrl?: string) {
+ return (
+ !!scrapedUrl &&
+ (Scrapers?.data?.listPerformerScrapers ?? []).some((s) =>
+ (s?.performer?.urls ?? []).some((u) => scrapedUrl.includes(u))
+ )
+ );
+ }
+
+ function maybeRenderScrapeDialog() {
+ if (!scrapedPerformer) {
+ return;
+ }
+
+ const currentPerformer: Partial = {
+ ...formik.values,
+ gender: stringToGender(formik.values.gender),
+ image_path: formik.values.image ?? performer.image_path,
+ };
+
+ return (
+ {
+ onScrapeDialogClosed(p);
+ }}
+ />
+ );
+ }
+
+ function onScrapeDialogClosed(p?: GQL.ScrapedPerformerDataFragment) {
+ if (p) {
+ updatePerformerEditStateFromScraper(p);
+ }
+ setScrapedPerformer(undefined);
+ }
+
+ function maybeRenderScrapeButton() {
+ return (
+
+ );
+ }
+
+ function renderButtons() {
+ return (
+
+
+ );
+ }
+
+ function renderDeleteAlert() {
+ return (
+ setIsDeleteAlertOpen(false) }}
+ >
+
+ );
+ }
+
+ const removeStashID = (stashID: GQL.StashIdInput) => {
+ formik.setFieldValue(
+ "stash_ids",
+ (formik.values.stash_ids ?? []).filter(
+ (s) =>
+ !(s.endpoint === stashID.endpoint && s.stash_id === stashID.stash_id)
+ )
+ );
+ };
+
+ function renderStashIDs() {
+ if (!formik.values.stash_ids?.length) {
+ return;
+ }
+
+ return (
+
+
+ );
+ }
+
+ return (
+ <>
+ {renderDeleteAlert()}
+ {renderScraperDialog()}
+ {maybeRenderScrapeDialog()}
+
+ = ({ name, value }) => {
+ if (!value) {
+ return null;
+ }
+
+ return (
+ = ({ name, value, url }) => {
+ if (!value) {
+ return null;
+ }
+ return (
+
+ {renderPerformerImage()}
+
+ Create Performer
-
-
-
- ))
- : ""}
-
-
-
-
-
- setScrapePerformerDetails(query)}
- />
-
-
-
- {!isNew ? (
-
- ) : (
- ""
- )}
- {renderScraperMenu()}
-
- );
- }
- }
-
- function renderDeleteAlert() {
- return (
- Are you sure you want to delete {name}?
--
+
- StashIDs +
-
-
- {stashIDs.map((stashID) => {
+ {performer.stash_ids.map((stashID) => {
const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
const link = base ? (
= ({
);
return (
- - {isEditing && ( - - )} {link} ); })}
+
+
+ ))
+ : ""}
+
+
+
+
+
+ setScrapePerformerDetails(query)}
+ />
+
+ Are you sure you want to delete {performer.name}?
+StashIDs
+ -
+ {formik.values.stash_ids.map((stashID) => {
+ const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
+ const link = base ? (
+
+ {stashID.stash_id}
+
+ ) : (
+ stashID.stash_id
+ );
+ return (
+
- + + {link} + + ); + })} +
-
+
- {name}: +
- {value ?? undefined} +
-
+
- {name}: +
- + {url ? ( + + {value} + + ) : undefined} + +