Add title to flags, and alias for Slovakia (#519)

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<IPerformerCardProps> = ({
   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<IPerformerCardProps> = ({
       <div className="card-section">
         <h5 className="text-truncate">{performer.name}</h5>
         {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
-        {countryISO && (
+        <CountryFlag country={performer.country} />
-          <span className={`flag-icon flag-icon-${countryISO.toLowerCase()}`} />
-        )}
         <div className="text-muted">
           Stars in {performer.scene_count}{" "}
           <Link to={NavUtils.makePerformerScenesUrl(performer)}>scenes</Link>.

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 (
-        <span
-          className={`mr-2 flag-icon flag-icon-${countryISO.toLowerCase()}`}
-        />
-      );
-    return undefined;
-  };
-
   const renderTabs = () => (
     <Tabs defaultActiveKey="details" id="performer-details" unmountOnExit>
       <Tab eventKey="details" title="Details">
@@ -257,7 +244,7 @@ export const Performer: React.FC = () => {
         <div className="row">
           <div className="performer-head col-6 col-sm-12">
             <h2>
-              {maybeRenderFlag()}
+              <CountryFlag country={performer.country} className="mr-2" />
               {performer.name}
               {renderIcons()}
             </h2>

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<ICountryFlag> = ({ className, country }) => {
+  const ISOCountry = getISOCountry(country);
+  if (!ISOCountry?.code) return <></>;
+
+  return (
+    <span
+      className={`${
+        className ?? ""
+      } flag-icon flag-icon-${ISOCountry.code.toLowerCase()}`}
+      title={ISOCountry.name}
+    />
+  );
+};
+
+export default CountryFlag;

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";

ui/v2.5/src/utils/country.ts

@@ -12,14 +12,19 @@ const fuzzyDict: Record<string, string> = {
   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;

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";