Improve regional selection

src/App.tsx

@@ -4,6 +4,7 @@ import {useApiClient} from "./api/ApiClientContext";
 import {Title} from "./api/models/Title";
 import {Locale, LocalePriority, selectLocaleVersion} from "./locale/selectLocaleData";
 import {usePlayabilityRating} from "./mime/usePlayabilityRating";
+import {sortLexicallyAsc} from "./util/sortLexically";
 import {sortNumericallyDesc} from "./util/sortNumerically";
 
 export default function App() {
@@ -14,7 +15,7 @@ export default function App() {
         apiClient.listTitles().then(setData);
     }, [apiClient]);
     const locale: Locale = {
-        language: "de",
+        language: "en",
         region: "DE",
     };
 
@@ -22,9 +23,12 @@ export default function App() {
 
     return (
         <div>
-            {data?.map((item: Title) => {
+            {data?.sort(sortLexicallyAsc(item =>
+                selectLocaleVersion(locale, LocalePriority.REGION_BEFORE_LOCALE, item.titles)?.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 poster = item.images.find(it => it.kind === "poster");
                 const backdrop = item.images.find(it => it.kind === "backdrop");
                 const mediaList = item.media.map(it => {
@@ -38,8 +42,9 @@ export default function App() {
                 return (
                     <div key={item.ids.uuid} className={classes.movie}>
                         <h1>{title?.name}</h1>
-                        <strong>{description?.tagline}</strong>
+                        <p><strong>{description?.tagline}</strong></p>
                         <p>{description?.overview}</p>
+                        <p><strong>{rating?.certification}</strong></p>
                         {poster && (
                             <img
                                 className={classes.poster}

src/api/models/LocalizedData.ts

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

src/api/models/Rating.ts

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

src/api/models/TitleDescription.ts

@@ -2,5 +2,7 @@ import {LocalizedData} from "./LocalizedData";
 
 export interface TitleDescription extends LocalizedData {
     overview: string,
-    tagline: string | null
+    tagline: string | null,
+    languages: string[],
+    kind: string
 }

src/api/models/TitleName.ts

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

src/locale/selectLocaleData.ts

@@ -11,24 +11,36 @@ export enum LocalePriority {
     LOCALE_BEFORE_REGION
 }
 
-function filterVersions<T extends LocalizedData>(locale: Locale, method: LocalePriority, data: T[]): T | undefined {
+function filterVersions<T extends LocalizedData>(
+    locale: Locale,
+    method: LocalePriority,
+    data: T[]
+): T | undefined {
     switch (method) {
         case LocalePriority.REGION_ONLY:
             return data.find((el) => {
                 return (el.region === locale.region);
             });
         case LocalePriority.REGION_BEFORE_LOCALE:
-            return data.sort((a, b) => (+b.languages.includes(locale.language)) - (+a.languages.includes(locale.language)))
-                .find((el) => el.region === locale.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:
-            return data.sort((a, b) => (+(b.region === locale.region)) - (+(a.region === locale.region)))
-                .find((el) => el.languages.includes(locale.language));
+            return data.sort((a, b) =>
+                +(b.region === locale.region) -
+                +(a.region === locale.region)
+            ).find((el) => el.languages?.includes(locale.language));
 
     }
 }
 
-export function selectLocaleVersion<T extends LocalizedData>(locale: Locale, method: LocalePriority, data: T[]): T | null {
-    return filterVersions(locale, method, data.filter(it => it.kind === "localized"))
+export function selectLocaleVersion<T extends LocalizedData>(
+    locale: Locale,
+    method: LocalePriority,
+    data: T[]
+): T | null {
+    return filterVersions(locale, method, data.filter(it => it?.kind === undefined || it?.kind === "localized"))
         || data.find(it => it.kind === "primary")
         || data.find(it => it.kind === "original")
         || null;