From ea5ad08012b00ca49a9dfc16afa7b64ffcb44f52 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Tue, 31 Dec 2024 23:02:38 -0800
Subject: [PATCH] sending text message

---
 .../mobile/src/conversation/Conversation.tsx  | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index 86a58128..a2a7194a 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -6,6 +6,7 @@ import {Message} from '../message/Message';
 import {Surface, Icon, Text, TextInput, IconButton, Divider} from 'react-native-paper';
 import { ActivityIndicator } from 'react-native-paper';
 import { Colors } from '../constants/Colors';
+import { Confirm } from '../confirm/Confirm';
 
 const SCROLL_THRESHOLD = 16;
 
@@ -20,14 +21,40 @@ export type MediaAsset = {
 export function Conversation({close}: {close: ()=>void}) {
   const { state, actions } = useConversation();
   const [ more, setMore ] = useState(false);
+  const [ alert, setAlert ] = useState(false);
+  const [ sending, setSending ] = useState(false);
   const [ selected, setSelected ] = useState(null as null | string);
   const thread = useRef();
-
   const scrolled = useRef(false);
   const contentHeight = useRef(0);
   const contentLead = useRef(null);
   const scrollOffset = useRef(0);
  
+  const alertParams = {
+    title: state.strings.error,
+    prompt: state.strings.tryAgain,
+    cancel: {
+      label: state.strings.close,
+      action: () => {
+        setAlert(false);
+      },
+    },
+  };
+
+  const sendMessage = async () => {
+console.log("CALLING SEND MESSAGE");
+    if (!sending) {
+      setSending(true);
+      try {
+        await actions.send();
+      } catch (err) {
+        console.log(err);
+        setAlert(true);
+      }
+      setSending(false);
+    }
+  }
+
   const loadMore = async () => {
     if (!more) {
       setMore(true);
@@ -135,8 +162,13 @@ export function Conversation({close}: {close: ()=>void}) {
         )}
       </View>
       <Divider style={styles.border} bold={true} />
+      <Confirm show={alert} params={alertParams} />
       <View style={styles.add}>
-        <TextInput multiline={true} mode="outlined" style={styles.message} spellcheck={false} autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} />
+        <TextInput multiline={true} mode="outlined" style={styles.message} spellcheck={false} autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} 
+                value={state.message}
+                onChangeText={value => actions.setMessage(value)}
+
+/>
         <View style={styles.controls}>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
@@ -146,7 +178,14 @@ export function Conversation({close}: {close: ()=>void}) {
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} /></Surface></Pressable>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="format-size" size={24} color={Colors.primary} /></Surface></Pressable>
           <View style={styles.end}>
-            <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="send" size={24} color={Colors.primary} /></Surface></Pressable>
+            <Pressable style={styles.control} onPress={sendMessage}><Surface style={styles.surface} elevation={2}>
+              { sending && (
+                <ActivityIndicator size="small" />
+              )}
+              { !sending && (
+                <Icon style={styles.button} source="send" size={24} color={Colors.primary} />
+              )}
+            </Surface></Pressable>
           </View>
         </View>
       </View>