diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx index 5b9fa9da1..05385aaa4 100644 --- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx @@ -31,6 +31,7 @@ import { Studio, StudioSelect } from "src/components/Studios/StudioSelect"; import { Scene, SceneSelect } from "src/components/Scenes/SceneSelect"; import { useTagsEdit } from "src/hooks/tagsEdit"; import { ScraperMenu } from "src/components/Shared/ScraperMenu"; +import { sortURLs } from "src/utils/url"; interface IProps { gallery: Partial; @@ -81,7 +82,7 @@ export const GalleryEditPanel: React.FC = ({ const initialValues = { title: gallery?.title ?? "", code: gallery?.code ?? "", - urls: gallery?.urls ?? [], + urls: sortURLs(gallery?.urls ?? []), date: gallery?.date ?? "", photographer: gallery?.photographer ?? "", studio_id: gallery?.studio?.id ?? null, diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx index 0b94baf27..6f548027f 100644 --- a/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx +++ b/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx @@ -28,6 +28,7 @@ import { Studio, StudioSelect } from "src/components/Studios/StudioSelect"; import { useTagsEdit } from "src/hooks/tagsEdit"; import { Group } from "src/components/Groups/GroupSelect"; import { RelatedGroupTable, IRelatedGroupEntry } from "./RelatedGroupTable"; +import { sortURLs } from "src/utils/url"; interface IGroupEditPanel { group: Partial; @@ -97,7 +98,7 @@ export const GroupEditPanel: React.FC = ({ return { group_id: m.group.id, description: m.description ?? "" }; }), director: group?.director ?? "", - urls: group?.urls ?? [], + urls: sortURLs(group?.urls ?? []), synopsis: group?.synopsis ?? "", }; diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx index f2771f542..83fc0343c 100644 --- a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx +++ b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx @@ -35,6 +35,7 @@ import { } from "src/components/Galleries/GallerySelect"; import { useTagsEdit } from "src/hooks/tagsEdit"; import { ScraperMenu } from "src/components/Shared/ScraperMenu"; +import { sortURLs } from "src/utils/url"; interface IProps { image: GQL.ImageDataFragment; @@ -91,7 +92,7 @@ export const ImageEditPanel: React.FC = ({ const initialValues = { title: image.title ?? "", code: image.code ?? "", - urls: image?.urls ?? [], + urls: sortURLs(image?.urls ?? []), date: image?.date ?? "", details: image.details ?? "", photographer: image.photographer ?? "", diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx index 8d1352da0..969af6633 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx @@ -48,6 +48,7 @@ import { yupUniqueStringList, } from "src/utils/yup"; import { useTagsEdit } from "src/hooks/tagsEdit"; +import { sortURLs } from "src/utils/url"; import { CustomFieldsInput } from "src/components/Shared/CustomFields"; import { cloneDeep } from "@apollo/client/utilities"; @@ -153,7 +154,7 @@ export const PerformerEditPanel: React.FC = ({ tattoos: performer.tattoos ?? "", piercings: performer.piercings ?? "", career_length: performer.career_length ?? "", - urls: performer.urls ?? [], + urls: sortURLs(performer.urls ?? []), details: performer.details ?? "", tag_ids: (performer.tags ?? []).map((t) => t.id), ignore_auto_tag: performer.ignore_auto_tag ?? false, diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx index 11575ea7b..87968c009 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx @@ -42,6 +42,7 @@ import { Group } from "src/components/Groups/GroupSelect"; import { useTagsEdit } from "src/hooks/tagsEdit"; import { ScraperMenu } from "src/components/Shared/ScraperMenu"; import StashBoxIDSearchModal from "src/components/Shared/StashBoxIDSearchModal"; +import { sortURLs } from "src/utils/url"; const SceneScrapeDialog = lazyComponent(() => import("./SceneScrapeDialog")); const SceneQueryModal = lazyComponent(() => import("./SceneQueryModal")); @@ -138,7 +139,7 @@ export const SceneEditPanel: React.FC = ({ () => ({ title: scene.title ?? "", code: scene.code ?? "", - urls: scene.urls ?? [], + urls: sortURLs(scene.urls ?? []), date: scene.date ?? "", director: scene.director ?? "", gallery_ids: (scene.galleries ?? []).map((g) => g.id), diff --git a/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx b/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx index e35a1a992..e71419514 100644 --- a/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx +++ b/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx @@ -7,6 +7,7 @@ import { useMemo } from "react"; import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons"; import ReactDOM from "react-dom"; import { PatchComponent } from "src/patch"; +import { sortURLs } from "src/utils/url"; export const ExternalLinksButton: React.FC<{ icon?: IconDefinition; @@ -16,14 +17,16 @@ export const ExternalLinksButton: React.FC<{ }> = PatchComponent( "ExternalLinksButton", ({ urls, icon = faLink, className = "", openIfSingle = false }) => { - if (!urls.length) { + const sortedUrls = useMemo(() => sortURLs(urls), [urls]); + + if (!sortedUrls.length) { return null; } const Menu = () => ReactDOM.createPortal( - {urls.map((url) => ( + {sortedUrls.map((url) => ( = ({ ); } + const sortedURLs = useMemo(() => sortURLs(studio.urls ?? []), [studio.urls]); + function renderURLs() { - if (!studio.urls?.length) { + if (!sortedURLs.length) { return; } return (