From 0cab8f0c1c90971e822b8030834540f7e169963a Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sun, 12 Jan 2025 22:00:58 -0800
Subject: [PATCH] handle glitch on text input after send

---
 .../src/conversation/Conversation.styled.ts   |  1 -
 .../mobile/src/conversation/Conversation.tsx  |  5 ++--
 .../src/conversation/useConversation.hook.ts  | 26 +++++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts
index cedb7630..1f6dce75 100644
--- a/app/client/mobile/src/conversation/Conversation.styled.ts
+++ b/app/client/mobile/src/conversation/Conversation.styled.ts
@@ -10,7 +10,6 @@ export const styles = StyleSheet.create({
   },
   avoid: {
     width: '100%',
-    height: '30%',
     flexShrink: 0,
   },
   closeIcon: {
diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index a19b66c6..11955812 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -75,6 +75,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
       busy.current = true;
       setSending(true);
       try {
+        setAvoid(false);
         await actions.send();
       } catch (err) {
         console.log(err);
@@ -282,12 +283,12 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
         </Animated.View>
         <TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
             blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
-            onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)}
+            onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)} editable={!sending}
             textColor={state.textColorSet ? state.textColor : undefined} outlineColor="transparent" activeOutlineColor="transparent"spellcheck={false}
             autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} placeholderTextColor={state.textColorSet ? state.textColor : undefined}
             cursorColor={state.textColorSet ? state.textColor : undefined} value={state.message} onChangeText={value => actions.setMessage(value)} />
 
-        { Platform.OS === 'ios' && avoid && (<View style={styles.avoid} />) }
+        { Platform.OS === 'ios' && avoid && (<View style={{ ...styles.avoid, height: state.avoid - 64}} />) }
 
         <View style={styles.controls}>
           <Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
diff --git a/app/client/mobile/src/conversation/useConversation.hook.ts b/app/client/mobile/src/conversation/useConversation.hook.ts
index 3ebd276d..61772e4d 100644
--- a/app/client/mobile/src/conversation/useConversation.hook.ts
+++ b/app/client/mobile/src/conversation/useConversation.hook.ts
@@ -1,4 +1,5 @@
 import { useState, useContext, useEffect, useRef } from 'react'
+import { Keyboard } from 'react-native'
 import { AppContext } from '../context/AppContext'
 import { DisplayContext } from '../context/DisplayContext'
 import { Focus, FocusDetail, Topic, Profile, Card, AssetType, AssetSource, HostingMode, TransformType } from 'databag-client-sdk'
@@ -25,7 +26,6 @@ async function getImageThumb(path: string, type: string, size: number) {
 }
 
 async function getVideoThumb(path: string, position?: number) {
-console.log("GET FULL VID THUMB: ", path);
   const timeStamp = position ? position * 1000 : 0;
   const shot = await createThumbnail({ url: path, timeStamp })
   const thumb = await ImageResizer.createResizedImage('file://' + shot.path, 192, 192, "JPEG", 50, 0, null);
@@ -34,6 +34,7 @@ console.log("GET FULL VID THUMB: ", path);
 }
 
 export function useConversation() {
+  const mute = useRef(false);
   const app = useContext(AppContext) as ContextType
   const display = useContext(DisplayContext) as ContextType
   const [state, setState] = useState({
@@ -52,15 +53,16 @@ export function useConversation() {
     sealed: false,
     access: false,
     subject: '',
+    message: null,
     subjectNames: [],
     unknownContacts: 0,
-    message: '',
     assets: [] as {type: string, path: string, mime?: string, position?: number, label?: string, size?: number}[],
     textColor: '#444444',
     textColorSet: false,
     textSize: 16,
     textSizeSet: false,
     progress: 0,
+    avoid: 0,
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -130,16 +132,21 @@ export function useConversation() {
         const cardId = focused.cardId;
         updateState({ detail, cardId });
       }
-      updateState({ assets: [], message: '', topics: [], loaded: false });
+      const setKeyboard = (event: KeyboardEvent) => {
+        updateState({ avoid: event.endCoordinates.height });
+      }
+      updateState({ assets: [], message: null, topics: [], loaded: false });
       focus.addTopicListener(setTopics);
       focus.addDetailListener(setDetail);
       contact.addCardListener(setCards);
       identity.addProfileListener(setProfile);
+      const keyboard = Keyboard.addListener('keyboardDidShow', setKeyboard);
       return () => {
         focus.removeTopicListener(setTopics);
         focus.removeDetailListener(setDetail);
         contact.removeCardListener(setCards);
         identity.removeProfileListener(setProfile);
+        keyboard.remove();
       }
     }
   }, [app.state.focus]);
@@ -149,7 +156,11 @@ export function useConversation() {
       app.actions.clearFocus();
     },
     setMessage: (message: string) => {
-      updateState({ message });
+      if (mute.current) {
+        updateState({ message: '' });
+      } else {
+        updateState({ message });
+      }
     },
     setTextSize: (textSize: number) => {
       const textSizeSet = true;
@@ -281,7 +292,12 @@ export function useConversation() {
         }
         const upload = (progress: number) => { updateState({ progress }) };
         await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, upload);
-        updateState({ message: '', assets: [], progress: 0 });
+
+        mute.current = true;
+        setTimeout(() => {
+          mute.current = false;
+        }, 1000);
+        updateState({ message: null, assets: [], progress: 0 });
       }
     }, 
     addImage: (path: string, mime: string, size: number) => {