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

__mocks__/@react-native-async-storage/async-storage.ts

@@ -0,0 +1 @@
+export * from '@react-native-async-storage/async-storage/jest/async-storage-mock';

app/(tabs)/_layout.tsx

@@ -2,7 +2,6 @@ import { Tabs } from 'expo-router';
 import React from 'react';
 import { Platform } from 'react-native';
 
-import { HapticTab } from '@/components/HapticTab';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import TabBarBackground from '@/components/ui/TabBarBackground';
 import { Colors } from '@/constants/Colors';
@@ -16,7 +15,6 @@ export default function TabLayout() {
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
-        tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
           ios: {

app/(tabs)/explore.tsx

@@ -1,23 +0,0 @@
-import { StyleSheet, Image, Platform } from 'react-native';
-
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import { Text } from '@react-navigation/elements';
-
-export default function TabTwoScreen() {
-  return (
-    <Text>Explore</Text>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

app/(tabs)/index.tsx

@@ -1,5 +1,5 @@
 import { LanguageSelection } from '@/components/LanguageSelection';
-import { Text } from '@react-navigation/elements';
+import { Text } from 'react-native';
 import { Image, StyleSheet, Platform } from 'react-native';
 
 export default function HomeScreen() {

app/+not-found.tsx

@@ -2,7 +2,7 @@ import { Link, Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
 
 import { ThemedText } from '@/components/ThemedText';
-import { Text } from '@react-navigation/elements';
+import { Text } from 'react-native';
 export default function NotFoundScreen() {
   return (
     <>

app/i18n/api.ts

@@ -1,6 +1,6 @@
 import { Cache } from "react-native-cache";
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LIBRETRANSLATE_BASE_URL } from "@/constants/api";
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 type language_t = string;
 
@@ -35,7 +35,7 @@ export class Translator {
         });
         const data = await res.json();
         return Object.fromEntries(
-            Object.values(data).map((obj : language_matrix_entry) => {
+            Object.values(data as language_matrix_entry []).map((obj : language_matrix_entry) => {
                 return [
                     obj["code"],
                     obj,

app/lib/__test__/conversation.test.tsx

@@ -0,0 +1,32 @@
+// conversation.test.ts
+
+import { Translator } from '@/app/i18n/api';
+import { Conversation, Message, Speaker } from '@/app/lib/conversation';
+import { describe, beforeEach, it, expect, test } from '@jest/globals';
+
+describe('Conversation', () => {
+  let conversation: Conversation;
+
+  beforeEach(() => {
+    const translator = new Translator("en", "sp");
+    const s1: Speaker = { language: "en", id: "s1" };
+    const s2: Speaker = { id: "s2", language: "sp" }
+    conversation = new Conversation(translator, s1, s2);
+  });
+
+  it('should add a message to the conversation', () => {
+    conversation.addMessage({ id: "s1", language: "en" }, "Hello");
+    expect(true).toEqual(false);
+    expect(conversation.length).toBe(1);
+    expect(conversation[0].speaker.id).toEqual("s1");
+    expect(conversation[0].text).toEqual("hello");
+  });
+
+  it('should translate the last message in the conversation', async () => {
+
+    conversation.addMessage({ id: "s1", language: "en" }, "Hello");
+
+    await conversation.translateLast();
+    expect(conversation[conversation.length - 1].translation).toEqual("Hollla");
+  });
+});

app/lib/conversation.ts

@@ -0,0 +1,38 @@
+import { Translator } from "../i18n/api";
+
+export type Speaker = {
+    id: string,
+    language : string,
+}
+
+export class Message {
+    public translation? : string;
+    constructor (public text : string, public speaker : Speaker) {}
+
+    public async translate(translator : Translator, language? : string) {
+        this.translation = await translator.translate(this.text, language);
+    }
+}
+
+export class Conversation extends Array<Message> {
+    constructor (
+        private translator : Translator,
+        s1 : Speaker,
+        s2 : Speaker,
+    ) {
+        super();
+    }
+
+    public addMessage(speaker : Speaker, text : string) {
+        this.push(new Message(text, speaker));
+    }
+
+    public async translateMessage(i : number) {
+        if (!this[i]) throw new Error(`${i} is not a valid message number`);
+        await this[i].translate(this.translator, this[i].speaker.language);
+    }
+
+    public async translateLast() {
+        return await this.translateMessage(this.length-1);
+    }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      '@babel/preset-typescript',
+    ],
+  };

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>
@@ -48,3 +57,14 @@ export function LanguageSelection(props : {
     </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} />;
-}

constants/api.ts

@@ -1 +1 @@
-export const LIBRETRANSLATE_BASE_URL = process.env.LIBRETRANSALTE_BASE_URL || "https://translate.flossboxin.org.in"
+export const LIBRETRANSLATE_BASE_URL = process.env.LIBRETRANSALTE_BASE_URL || "http://localhost:5000"

jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from '@jest/types';
+import {resolve} from "path"
+// Sync object
+const config: Config.InitialOptions = {
+  verbose: true,
+  transform: {
+    "^.+.tsx?$": ["ts-jest", {}],
+  },
+  testEnvironment: "node",
+  // runner: "jest-runner-tsc",
+  moduleNameMapper: {
+    '^@/(.*)$': "<rootDir>/$1"
+  },
+  resolver: ""
+};
+
+export default config;

jest/setup.js

@@ -0,0 +1,5 @@
+import jest from "@babel/preset-typescript"
+
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
+);

package.json

@@ -11,13 +11,10 @@
     "test": "jest --watchAll",
     "lint": "expo lint"
   },
-  "jest": {
-    "preset": "jest-expo"
-  },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.7",
-    "@expo/vector-icons": "^14.0.2",
+    "@expo/vector-icons": "^14.0.4",
-    "@react-native-async-storage/async-storage": "^2.1.0",
+    "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/elements": "^2.2.5",
     "@react-navigation/native": "^7.0.14",
@@ -27,6 +24,7 @@
     "expo": "~52.0.27",
     "expo-blur": "~14.0.2",
     "expo-constants": "~17.0.4",
+    "expo-doctor": "^1.12.5",
     "expo-font": "~13.0.3",
     "expo-haptics": "~14.0.1",
     "expo-linking": "~7.0.4",
@@ -45,7 +43,9 @@
     "react-native-cache": "^2.0.3",
     "react-native-country-flag": "^2.0.2",
     "react-native-gesture-handler": "~2.20.2",
-    "react-native-reanimated": "~3.16.1",
+    "react-native-onyx": "^2.0.91",
+    "react-native-quick-sqlite": "^8.2.7",
+    "react-native-reanimated": "~3.16.7",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-web": "~0.19.13",
@@ -53,16 +53,21 @@
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.26.7",
+    "@babel/preset-typescript": "^7.26.0",
+    "@jest/globals": "^29.7.0",
+    "@jest/types": "^29.6.3",
     "@types/cheerio": "^0.22.35",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/jquery": "^3.5.32",
-    "@types/react": "~18.3.12",
+    "@types/react": "~18.3.18",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^18.3.1",
-    "jest": "^29.2.1",
+    "jest": "^29.7.0",
     "jest-expo": "~52.0.3",
+    "jest-runner-tsc": "^1.6.0",
     "react-test-renderer": "18.3.1",
-    "typescript": "^5.3.3"
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.3"
   },
   "private": true
 }