Improve locale/regional selection

src/App.tsx

 import React, {useEffect, useState} from 'react';
 import {createUseStyles} from "react-jss";
 import {useApiClient} from "./api/ApiClientContext";
-import {Title} from "./api/models/Title";
-import {Locale, LocalePriority, selectLocaleVersion} from "./locale/selectLocaleData";
+import {getLocalizedDescription, getLocalizedName, getLocalizedRating, Title} from "./api/models/Title";
+import {Locale} from "./locale/Locale";
 import {usePlayabilityRating} from "./mime/usePlayabilityRating";
 import {sortLexicallyAsc} from "./util/sortLexically";
 import {sortNumericallyDesc} from "./util/sortNumerically";
@@ -23,12 +23,11 @@ export default function App() {
 
     return (
         <div>
-            {data?.sort(sortLexicallyAsc(item =>
-                selectLocaleVersion(locale, LocalePriority.REGION_BEFORE_LOCALE, item.titles)?.name || ""))
+            {data?.sort(sortLexicallyAsc(item => getLocalizedName(item, locale)?.name || ""))
                 .map((item: Title) => {
-                const title = selectLocaleVersion(locale, LocalePriority.REGION_BEFORE_LOCALE, item.titles);
-                const description = selectLocaleVersion(locale, LocalePriority.LOCALE_BEFORE_REGION, item.descriptions);
-                const rating = selectLocaleVersion(locale, LocalePriority.REGION_ONLY, item.ratings);
+                    const title = getLocalizedName(item, locale);
+                    const description = getLocalizedDescription(item, locale);
+                    const rating = getLocalizedRating(item, locale);
                     const poster = item.images.find(it => it.kind === "poster");
                     const backdrop = item.images.find(it => it.kind === "backdrop");
                     const mediaList = item.media.map(it => {
@@ -59,9 +58,12 @@ export default function App() {
                                     src={backdrop.src}
                                 />
                             )}
-                        {media && media.src}
-                        <pre>{JSON.stringify(item.subtitles, null, 2)}</pre>
-                        <pre>{JSON.stringify(item.preview, null, 2)}</pre>
+                            {media && (
+                                <p><a href={media.src}>{media.src}</a></p>
+                            )}
+                            {item.preview && (
+                                <p><a href={item.preview}>{item.preview}</a></p>
+                            )}
                         </div>
                     )
                 })}

src/api/models/LocalizedData.ts

-export interface LocalizedData {
-    region: string | null,
-    languages?: string[],
-    kind?: string,
-}

src/api/models/Rating.ts

-import {LocalizedData} from "./LocalizedData";
+import {LocalizedData} from "../../locale/LocalizedData";
 
 export interface Rating extends LocalizedData {
     region: string | null,

src/api/models/Title.ts

+import {Locale} from "../../locale/Locale";
+import {LocalePriority} from "../../locale/LocalePriority";
+import {selectLocaleVersion} from "../../locale/selectLocaleData";
+import {selectRegionalVersion} from "../../locale/selectRegionalData";
 import {Cast} from "./Cast";
 import {Genre} from "./Genre";
 import {Image} from "./Image";
@@ -28,3 +32,12 @@ export interface Title {
     createdAt: string,
     updatedAt: string
 }
+
+export const getLocalizedName = (title: Title, locale: Locale): TitleName | null =>
+    selectLocaleVersion(locale, LocalePriority.REGION, title.titles)
+
+export const getLocalizedDescription = (title: Title, locale: Locale): TitleDescription | null =>
+    selectLocaleVersion(locale, LocalePriority.LOCALE, title.descriptions)
+
+export const getLocalizedRating = (title: Title, locale: Locale): Rating | null =>
+    selectRegionalVersion(locale, title.ratings)

src/api/models/TitleDescription.ts

-import {LocalizedData} from "./LocalizedData";
+import {LocalizedData} from "../../locale/LocalizedData";
 
 export interface TitleDescription extends LocalizedData {
     overview: string,

src/api/models/TitleName.ts

-import {LocalizedData} from "./LocalizedData";
+import {LocalizedData} from "../../locale/LocalizedData";
 
 export interface TitleName extends LocalizedData {
     name: string,

src/locale/Locale.ts

+export interface Locale {
+    language: string,
+    region: string
+}

src/locale/LocalePriority.ts

+export enum LocalePriority {
+    REGION,
+    LOCALE
+}

src/locale/LocalizedData.ts

+import {RegionalData} from "./RegionalData";
+
+export interface LocalizedData extends RegionalData {
+    languages: string[],
+    kind: string,
+}

src/locale/RegionalData.ts

+export interface RegionalData {
+    region: string | null,
+}

src/locale/selectLocaleData.ts

-import {LocalizedData} from "../api/models/LocalizedData";
-
-export interface Locale {
-    language: string,
-    region: string
-}
-
-export enum LocalePriority {
-    REGION_ONLY,
-    REGION_BEFORE_LOCALE,
-    LOCALE_BEFORE_REGION
-}
+import {Locale} from "./Locale";
+import {LocalePriority} from "./LocalePriority";
+import {LocalizedData} from "./LocalizedData";
 
 function filterVersions<T extends LocalizedData>(
     locale: Locale,
@@ -17,20 +8,20 @@ function filterVersions<T extends LocalizedData>(
     data: T[]
 ): T | undefined {
     switch (method) {
-        case LocalePriority.REGION_ONLY:
-            return data.find((el) => {
-                return (el.region === locale.region);
-            });
-        case LocalePriority.REGION_BEFORE_LOCALE:
+        case LocalePriority.REGION:
             return data.sort((a, b) =>
                 +(b.languages?.includes(locale.language) || false) -
                 +(a.languages?.includes(locale.language) || false)
-            ).find((el) => el.region === locale.region);
-        case LocalePriority.LOCALE_BEFORE_REGION:
+            ).find((el) =>
+                el.region === locale.region
+                || el.region === null);
+        case LocalePriority.LOCALE:
             return data.sort((a, b) =>
                 +(b.region === locale.region) -
                 +(a.region === locale.region)
-            ).find((el) => el.languages?.includes(locale.language));
+            ).find((el) =>
+                el.languages?.includes(locale.language)
+                || el.languages.length === 0);
 
     }
 }

src/locale/selectRegionalData.ts

+import {Locale} from "./Locale";
+import {RegionalData} from "./RegionalData";
+
+export function selectRegionalVersion<T extends RegionalData>(
+    locale: Locale,
+    data: T[]
+): T | null {
+    return data.find((el) => {
+        return (el.region === locale.region);
+    }) || null;
+}