fix unit tests. add conversation model and add unit tests to it.

components/ui/ISpeakButton.tsx

@@ -1,15 +1,16 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+// import AsyncStorage from '@react-native-async-storage/async-storage';
 import { CachedTranslator, Translator, language_matrix_entry } from "@/app/i18n/api"
 import { longLang } from "@/app/i18n/lang"
 import React, { useEffect, useRef, useState } from "react"
 import { Button, Image, ImageBackground, Pressable, StyleSheet, TouchableOpacity, View } from "react-native"
-import { Text } from '@react-navigation/elements';
+import { Text } from 'react-native';
 import CountryFlag from "react-native-country-flag";
 import { chooseCountry } from '@/app/i18n/countries';
 
 type ISpeakButtonProps = {
     language: language_matrix_entry,
     translator?: Translator,
+    onLangSelected?: (lang : language_matrix_entry) => any | Promise<any>,
 }
 
 function iSpeak(language : language_matrix_entry) {
@@ -77,12 +78,16 @@ const ISpeakButton = (props : ISpeakButtonProps) => {
         title ? (
             <TouchableOpacity style={styles.button}>
                 <View>
+                    <View style={styles.flag}>
                     {countries &&
                         countries.map( c => {
                             return <CountryFlag isoCode={c} size={25} key={c}/> }
                         )
                     }
-                    <Text style={{textAlign: "center", verticalAlign: "bottom"}}>{ title } { props.language.name } { props.language.code }</Text>
+                    </View>
+                    <View style={styles.iSpeak}>
+                        <Text style={styles.iSpeakText}>{ title }</Text>
+                    </View>
                 </View>
             </TouchableOpacity>
         ) : (
@@ -94,14 +99,21 @@ const ISpeakButton = (props : ISpeakButtonProps) => {
 
 const styles = StyleSheet.create({
     button: {
-        // backgroundColor: "blue",
         width: "20%",
-        // height: "20%",
-        margin: 5,
         borderRadius: 10,
         borderColor: "white",
         borderWidth: 1,
         borderStyle: "solid",
+        height: 110,
+        alignContent: 'flex-start',
+    },
+    flag: {
+    },
+    iSpeak: {
+        textAlign: "center",
+    },
+    iSpeakText: {
+        textAlign: "center"
     }
 })
 

components/ui/IconSymbol.tsx

@@ -1,43 +0,0 @@
-// This file is a fallback for using MaterialIcons on Android and web.
-
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { SymbolWeight } from 'expo-symbols';
-import React from 'react';
-import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
-
-// Add your SFSymbol to MaterialIcons mappings here.
-const MAPPING = {
-  // See MaterialIcons here: https://icons.expo.fyi
-  // See SF Symbols in the SF Symbols app on Mac.
-  'house.fill': 'home',
-  'paperplane.fill': 'send',
-  'chevron.left.forwardslash.chevron.right': 'code',
-  'chevron.right': 'chevron-right',
-} as Partial<
-  Record<
-    import('expo-symbols').SymbolViewProps['name'],
-    React.ComponentProps<typeof MaterialIcons>['name']
-  >
->;
-
-export type IconSymbolName = keyof typeof MAPPING;
-
-/**
- * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage.
- *
- * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
- */
-export function IconSymbol({
-  name,
-  size = 24,
-  color,
-  style,
-}: {
-  name: IconSymbolName;
-  size?: number;
-  color: string | OpaqueColorValue;
-  style?: StyleProp<ViewStyle>;
-  weight?: SymbolWeight;
-}) {
-  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
-}