diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx index d774736d8..c67c1fda7 100644 --- a/ui/v2.5/src/components/Performers/PerformerCard.tsx +++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx @@ -2,7 +2,8 @@ import React from "react"; import { Card } from "react-bootstrap"; import { Link } from "react-router-dom"; import * as GQL from "src/core/generated-graphql"; -import { getCountryISO, NavUtils, TextUtils } from "src/utils"; +import { NavUtils, TextUtils } from "src/utils"; +import { CountryFlag } from "src/components/Shared"; interface IPerformerCardProps { performer: GQL.PerformerDataFragment; @@ -16,8 +17,6 @@ export const PerformerCard: React.FC = ({ const age = TextUtils.age(performer.birthdate, ageFromDate); const ageString = `${age} years old${ageFromDate ? " in this scene." : "."}`; - const countryISO = getCountryISO(performer.country); - function maybeRenderFavoriteBanner() { if (performer.favorite === false) { return; @@ -38,9 +37,7 @@ export const PerformerCard: React.FC = ({
{performer.name}
{age !== 0 ?
{ageString}
: ""} - {countryISO && ( - - )} +
Stars in {performer.scene_count}{" "} scenes. diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index 7b5d8fd07..f23f20118 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -1,5 +1,3 @@ -/* eslint-disable react/no-this-in-sfc */ - import React, { useEffect, useState } from "react"; import { Button, Tabs, Tab } from "react-bootstrap"; import { useParams, useHistory } from "react-router-dom"; @@ -11,9 +9,9 @@ import { usePerformerCreate, usePerformerDestroy, } from "src/core/StashService"; -import { Icon, LoadingIndicator } from "src/components/Shared"; +import { CountryFlag, Icon, LoadingIndicator } from "src/components/Shared"; import { useToast } from "src/hooks"; -import { getCountryISO, TextUtils } from "src/utils"; +import { TextUtils } from "src/utils"; import Lightbox from "react-images"; import { PerformerDetailsPanel } from "./PerformerDetailsPanel"; import { PerformerOperationsPanel } from "./PerformerOperationsPanel"; @@ -100,17 +98,6 @@ export const Performer: React.FC = () => { history.push("/performers"); } - const maybeRenderFlag = () => { - const countryISO = getCountryISO(performer.country); - if (countryISO) - return ( - - ); - return undefined; - }; - const renderTabs = () => ( @@ -257,7 +244,7 @@ export const Performer: React.FC = () => {

- {maybeRenderFlag()} + {performer.name} {renderIcons()}

diff --git a/ui/v2.5/src/components/Shared/CountryFlag.tsx b/ui/v2.5/src/components/Shared/CountryFlag.tsx new file mode 100644 index 000000000..32b1f666f --- /dev/null +++ b/ui/v2.5/src/components/Shared/CountryFlag.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { getISOCountry } from "src/utils"; + +interface ICountryFlag { + country?: string | null; + className?: string; +} + +const CountryFlag: React.FC = ({ className, country }) => { + const ISOCountry = getISOCountry(country); + if (!ISOCountry?.code) return <>; + + return ( + + ); +}; + +export default CountryFlag; diff --git a/ui/v2.5/src/components/Shared/index.ts b/ui/v2.5/src/components/Shared/index.ts index 1a0beedf4..cd947a32e 100644 --- a/ui/v2.5/src/components/Shared/index.ts +++ b/ui/v2.5/src/components/Shared/index.ts @@ -17,3 +17,4 @@ export { HoverPopover } from "./HoverPopover"; export { default as LoadingIndicator } from "./LoadingIndicator"; export { ImageInput } from "./ImageInput"; export { SweatDrops } from "./SweatDrops"; +export { default as CountryFlag } from "./CountryFlag"; diff --git a/ui/v2.5/src/utils/country.ts b/ui/v2.5/src/utils/country.ts index f19d4fb03..915ea68dd 100644 --- a/ui/v2.5/src/utils/country.ts +++ b/ui/v2.5/src/utils/country.ts @@ -12,14 +12,19 @@ const fuzzyDict: Record = { England: "GB", "United Kingdom": "GB", Russia: "RU", + "Slovak Republic": "SK", }; -const getISOCode = (country: string | null | undefined) => { +const getISOCountry = (country: string | null | undefined) => { if (!country) return null; - if (fuzzyDict[country]) return fuzzyDict[country]; + const code = fuzzyDict[country] ?? Countries.getAlpha2Code(country, "en"); + if (!code) return null; - return Countries.getAlpha2Code(country, "en"); + return { + code, + name: Countries.getName(code, "en"), + }; }; -export default getISOCode; +export default getISOCountry; diff --git a/ui/v2.5/src/utils/index.ts b/ui/v2.5/src/utils/index.ts index 9afad2b57..1f2370510 100644 --- a/ui/v2.5/src/utils/index.ts +++ b/ui/v2.5/src/utils/index.ts @@ -7,4 +7,4 @@ export { default as DurationUtils } from "./duration"; export { default as JWUtils } from "./jwplayer"; export { default as SessionUtils } from "./session"; export { default as flattenMessages } from "./flattenMessages"; -export { default as getCountryISO } from "./country"; +export { default as getISOCountry } from "./country";