refactored layout to be screens. work on jest tests.

components/ConversationThread.tsx

@@ -1,18 +1,30 @@
 import React, { useState, useEffect } from 'react';
 import { View } from 'react-native';
-import { Conversation } from '@/app/lib/conversation';
+import { Conversation, Message } from '@/app/lib/conversation';
 import MessageBubble from '@/components/ui/MessageBubble';
+import { NavigationProp, ParamListBase } from '@react-navigation/native';
+import { language_matrix_entry, Translator } from '@/app/i18n/api';
+import { getDb } from '@/app/lib/db';
 
 interface ConversationThreadProps {
   conversation: Conversation;
 }
 
-const ConversationThread: React.FC<ConversationThreadProps> = ({ conversation }) => {
-  const [messages, setMessages] = useState<Message[]>(conversation.messages);
+const ConversationThread = ({ language, navigation }: { language: language_matrix_entry, navigation: NavigationProp<ParamListBase> }) => {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(async () => {
+    const db = await getDb();
+    const curs = await db.executeSql("SELECT host_language FROM settings LIMIT 1");
+  })
+
+  const translator = new Translator()
+
+  const conversation = new Conversation()
 
   useEffect(() => {
     const updateMessages = () => {
-      setMessages([...conversation.messages]);
+      setMessages([...conversation]);
     };
 
     conversation.on('messageAdded', updateMessages);

components/LanguageSelection.tsx

@@ -6,17 +6,22 @@ import { LANG_FLAGS } from "@/app/i18n/lang";
 import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import { Conversation, Speaker } from "@/app/lib/conversation";
+import { NavigationProp, ParamListBase } from "@react-navigation/native";
 
 
 export function LanguageSelection(props: {
+  navigation: NavigationProp<ParamListBase>
   translator?: Translator
-  onLanguageSelected?: (language: language_matrix_entry) => any,
 }) {
   const [languages, setLanguages] = useState<language_matrix | undefined>();
   const [languagesLoaded, setLanguagesLoaded] = useState<boolean>(false);
 
   const translator = props.translator || new CachedTranslator("en")
 
+  function onLangSelected(language: language_matrix_entry) {
+    props.navigation.navigate("Conversation", { language, })
+  }
+
 
   useEffect(() => {
     const fetchData = async () => {
@@ -41,7 +46,7 @@ export function LanguageSelection(props: {
             ([lang, lang_entry]) => {
               return (
                 <View style={styles.column}>
-                  <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={props.onLanguageSelected && props.onLanguageSelected(lang_entry)} />
+                  <ISpeakButton language={lang_entry} key={lang_entry.code} onLangSelected={onLangSelected} />
                 </View>
               );
             }

components/Settings.tsx

@@ -47,27 +47,23 @@ export default function Settings() {
 
   // This is the configuration schema
   const settings: SettingsElement[] = [
+    {
+      label: "LibreTranslate server",
+      type: "string",
+      get: confGet.bind(null, "@ltServer", "http://localhost:5000"),
+      set: confSet.bind(null, "@ltServer"),
+    },
     {
       label: "Host Language",
       type: "enum",
       // You can override the way the value is displayed
       values: ["en", "es", "fr"],
-      display: (v) => {
+      display: (v : string) => {
         return longLang(v);
       },
       get: confGet.bind(null, "@hostLanguage", ""),
       set: confSet.bind(null, "@hostLanguage"),
     },
-    // Choose from a list, uses the standard phone navigation screens
-    {
-      label: "Intelligence",
-      title: "Select Intelligence",
-      type: "enum",
-      values: Object.keys(intelligence),
-      display: (v: string) => intelligence[v],
-      get: confGet.bind(null, "@int", "M"),
-      set: confSet.bind(null, "@int"),
-    },
   ];
 
   useEffect(() => {