fix component. Add flags.

app/(tabs)/index.tsx

@@ -1,9 +1,10 @@
+import { LanguageSelection } from '@/components/LanguageSelection';
 import { Text } from '@react-navigation/elements';
 import { Image, StyleSheet, Platform } from 'react-native';
 
 export default function HomeScreen() {
   return (
-    <Text>Hello World</Text>
+    <LanguageSelection />
   );
 }
 

app/i18n/api.ts

@@ -1,8 +1,9 @@
-import { language_t } from "./lang";
 import { Cache } from "react-native-cache";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
 
+type language_t = string;
+
 const cache = new Cache({
     namespace: "translation_terrace",
     policy: {
@@ -12,18 +13,45 @@ const cache = new Cache({
     backend: AsyncStorage
 });
 
-export class Translator {
-    constructor(public source : language_t, public target : language_t) {
+export type language_matrix_entry = {
+    code: string,
+    name: string,
+    targets: string []
+}
 
+export type language_matrix = {
+    [key:string] : language_matrix_entry
+}
+
+export class Translator {
+    constructor(public source : language_t, public defaultTarget : string = "en", private baseUrl = LIBRETRANSLATE_BASE_URL) {
     }
-    async translate(text : string) {
+
+    async fetchLanguages() : Promise<language_matrix> {
+        const res = await fetch(this.baseUrl + "/languages", {
+            headers: {
+                "Content-Type": "application/json"
+            }
+        });
+        const data = await res.json();
+        return Object.fromEntries(
+            Object.values(data).map((obj : language_matrix_entry) => {
+                return [
+                    obj["code"],
+                    obj,
+                ]
+            })
+        )
+    }
+
+    async translate(text : string, target : string|undefined = undefined) {
         const url = LIBRETRANSLATE_BASE_URL + `/translate`;
         const res = await fetch(url, {
             method: "POST",
             body: JSON.stringify({
                 q: text,
                 source: this.source,
-                target: this.target,
+                target: target || this.defaultTarget,
                 format: "text",
                 alternatives: 3,
                 api_key: ""
@@ -37,12 +65,14 @@ export class Translator {
 }
 
 export class CachedTranslator extends Translator {
-    async translate (text : string) {
-        const key1 = `${this.source}::${this.target}::${text}`
+    async translate (text : string, target : string|undefined = undefined) {
+        const targetKey = target || this.defaultTarget;
+        // console.debug(`Translating from ${this.source} -> ${targetKey}`)
+        const key1 = `${this.source}::${targetKey}::${text}`
         const tr1 = await cache.get(key1);
         if (tr1) return tr1;
-        const tr2 = await super.translate(text);
-        const key2 = `${this.source}::${this.target}::${text}`
+        const tr2 = await super.translate(text, target);
+        const key2 = `${this.source}::${targetKey}::${text}`
         await cache.set(key2, tr2);
     }
 }

app/i18n/countries.ts

@@ -0,0 +1,18 @@
+import _countries from "@/assets/countries.min.json";
+import LANG_FLAGS from "@/langs-flags-list/lang-flags.json"
+import { language_matrix_entry } from "./api";
+import { lang_a2_a3 } from "./lang";
+
+export const countries = _countries;
+
+export function chooseCountry(lang_a2 : string) {
+    const lang_a3 = lang_a2_a3(lang_a2);
+    if (!lang_a3) throw new Error(`Could not find alpha3 code of ${lang_a2}`);
+    const cs = countries.filter(
+        c => c.languages.includes(lang_a3.alpha3)
+    );
+
+    console.log("cc = %x, ", cs.map(c => c.alpha2))
+
+    return cs.filter(cc => Object.keys(LANG_FLAGS).includes(cc.alpha2.toLowerCase())).map(c => c.alpha2.toLowerCase());
+}

app/i18n/flagStyle.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { LANG_FLAGS } from './lang';
+
+interface FlagStyle {
+  width: number;
+  height: number;
+  backgroundColor: string;
+  backgroundImage: string;
+  backgroundSize: string;
+  backgroundPosition: string;
+}
+
+const generateFlagStyle = (index: number): FlagStyle => {
+  const xPosition = index % 24 * -25;
+  const yPosition = Math.floor(index / 24) * -15;
+  return {
+    width: 25,
+    height: 15,
+    backgroundColor: 'transparent',
+    backgroundImage: require("@/assets/images/lang-flags.png"),
+    backgroundSize: '600px 375px',
+  };
+};
+
+export const FLAG_STYLES = StyleSheet.create({
+  ...Object.fromEntries(Object.keys(LANG_FLAGS).map((k, i) => {
+    return [k, generateFlagStyle(i)]
+  }))
+});

app/i18n/lang.ts

@@ -1,9 +1,16 @@
-import * as LANG_FLAGS from "@/langs-flags-list/lang-flags.json"
+import _LANG_FLAGS from "@/langs-flags-list/lang-flags.json"
+import _LANGUAGES from "@/assets/languages.min.json"
 
-export const LANGUAGES = Object.keys(LANG_FLAGS);
-
-export type lang_t = typeof LANGUAGES[number];
+export const LANG_FLAGS = _LANG_FLAGS
 
 export function longLang(shortLang : string) {
     return ((LANG_FLAGS as any)[shortLang] as any)["nameEnglish"] as string
+}
+
+export function lang_a3_a2(a3 : string) {
+    return _LANGUAGES.find(l => l.alpha3 === a3);
+}
+
+export function lang_a2_a3(a2 : string) {
+    return _LANGUAGES.find(l => l.alpha2 === a2);
 }