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

components/HapticTab.tsx

@@ -1,18 +0,0 @@
-import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { PlatformPressable } from '@react-navigation/elements';
-import * as Haptics from 'expo-haptics';
-
-export function HapticTab(props: BottomTabBarButtonProps) {
-  return (
-    <PlatformPressable
-      {...props}
-      onPressIn={(ev) => {
-        if (process.env.EXPO_OS === 'ios') {
-          // Add a soft haptic feedback when pressing down on the tabs.
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-        }
-        props.onPressIn?.(ev);
-      }}
-    />
-  );
-}

components/LanguageSelection.tsx

@@ -1,11 +1,18 @@
-import { CachedTranslator, Translator, language_matrix } from "@/app/i18n/api";
+import { CachedTranslator, Translator, language_matrix, language_matrix_entry } from "@/app/i18n/api";
 import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
-import { Text } from "@react-navigation/elements";
 import { useEffect, useState } from "react";
 import ISpeakButton from "./ui/ISpeakButton";
 import { LANG_FLAGS } from "@/app/i18n/lang";
-import { ScrollView } from "react-native";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { Conversation, Speaker } from "@/app/lib/conversation";
+
+async function beginConversation(language : language_matrix_entry) {
+  const translator = new Translator(language.code)
+  const s1 : Speaker = {language : "en", id: "s1"};
+  const s2 : Speaker = {id: "s2", language: language.code}
+  const conversation = new Conversation(translator, s1, s2);
+}
 
 
 export function LanguageSelection(props : {
@@ -38,7 +45,9 @@ export function LanguageSelection(props : {
             {(languages && languagesLoaded) ? Object.entries(languages).filter((l) => (LANG_FLAGS as any)[l[0]] !== undefined).map(
                     ([lang, lang_entry]) => {
                         return (
-                            <ISpeakButton language={lang_entry} key={lang_entry.code} />
+                            <View style={styles.column}>
+                              <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={beginConversation} />
+                            </View>
                         );
                     }
                 ) : <Text>Waiting...</Text>
@@ -47,4 +56,15 @@ export function LanguageSelection(props : {
             </SafeAreaProvider>
     </ScrollView>
 )
-}
+}
+
+const styles = StyleSheet.create({
+    column: {
+      flex: 1,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      flexBasis: "auto",
+      flexGrow: 1,
+      padding: 8,
+    },
+})

components/__tests__/ThemedText-test.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
-
-import { ThemedText } from '../ThemedText';
-
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});

components/__tests__/__snapshots__/ThemedText-test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<Text
-  style={
-    [
-      {
-        "color": "#11181C",
-      },
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-    ]
-  }
->
-  Snapshot test!
-</Text>
-`;

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} />;
-}