From 6ddb9055c06203af7db69d2f5ff4cc8a64fc7bc5 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 4 Jan 2025 22:31:01 -0800
Subject: [PATCH] support editing message

---
 app/client/mobile/src/contacts/Contacts.tsx   |  4 +-
 app/client/mobile/src/content/Content.tsx     |  2 +
 .../mobile/src/message/Message.styled.ts      | 49 +++++++++++++++-
 app/client/mobile/src/message/Message.tsx     | 58 ++++++++++++++++---
 app/client/mobile/src/registry/Registry.tsx   |  4 ++
 5 files changed, 107 insertions(+), 10 deletions(-)

diff --git a/app/client/mobile/src/contacts/Contacts.tsx b/app/client/mobile/src/contacts/Contacts.tsx
index 93af1206..c055b0ee 100644
--- a/app/client/mobile/src/contacts/Contacts.tsx
+++ b/app/client/mobile/src/contacts/Contacts.tsx
@@ -40,8 +40,10 @@ export function Contacts({openRegistry, openContact}: {openRegistry: () => void;
           <TextInput
             dense={true}
             style={styles.input}
+            outlineColor="transparent"
+            activeOutlineColor="transparent"
             autoCapitalize={false}
-            unserlineStyle={styles.inputUnderline}
+            underlineStyle={styles.inputUnderline}
             mode="outlined"
             placeholder={state.strings.contacts}
             left={<TextInput.Icon style={styles.icon} icon="magnify" />}
diff --git a/app/client/mobile/src/content/Content.tsx b/app/client/mobile/src/content/Content.tsx
index 9c5e3b8a..ced2111f 100644
--- a/app/client/mobile/src/content/Content.tsx
+++ b/app/client/mobile/src/content/Content.tsx
@@ -59,6 +59,8 @@ export function Content({openConversation}: {openConversation: ()=>void}) {
             style={styles.input}
             autoCapitalize={false}
             unserlineStyle={styles.inputUnderline}
+            outlineColor="transparent"
+            activeOutlineColor="transparent"
             mode="outlined"
             placeholder={state.strings.topics}
             left={<TextInput.Icon style={styles.icon} icon="magnify" />}
diff --git a/app/client/mobile/src/message/Message.styled.ts b/app/client/mobile/src/message/Message.styled.ts
index 28958165..bb5ebad5 100644
--- a/app/client/mobile/src/message/Message.styled.ts
+++ b/app/client/mobile/src/message/Message.styled.ts
@@ -119,5 +119,52 @@ export const styles = StyleSheet.create({
     width: 64,
     height: 64,
     backgroundColor: 'yellow',
-  }
+  },
+  message: { 
+    width: '100%',
+    fontSize: 14,
+    padding: 0,
+  },
+  modal: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  editArea: {
+    position: 'relative',
+    display: 'flex',
+    alignItem: 'center',
+    justifyContent: 'center',
+    width:'80%',
+    maxWidth: 400,
+    padding: 16,
+    borderRadius: 8,
+  },
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  closeIcon: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+  title: {
+    fontSize: 20,
+    paddingLeft: 4,
+    paddingBottom: 4,
+  },
+  controls: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingTop: 16,
+    gap: 8,
+  },
 })
diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx
index 3af2afaf..8ba81980 100644
--- a/app/client/mobile/src/message/Message.tsx
+++ b/app/client/mobile/src/message/Message.tsx
@@ -1,7 +1,7 @@
 import { useRef, useEffect, useState, useCallback } from 'react';
 import { avatar } from '../constants/Icons'
-import { Pressable, ScrollView, View, Image } from 'react-native';
-import {Icon, Text, IconButton, Surface, Divider} from 'react-native-paper';
+import { Pressable, ScrollView, View, Image, Modal } from 'react-native';
+import {Icon, Text, TextInput, IconButton, Button, Surface, Divider} from 'react-native-paper';
 import { Topic, Card, Profile } from 'databag-client-sdk';
 import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
@@ -12,6 +12,7 @@ import {styles} from './Message.styled';
 import { MediaAsset } from '../conversation/Conversatin';
 import { Confirm } from '../confirm/Confirm'; 
 import { Shimmer } from './shimmer/Shimmer';
+import {BlurView} from '@react-native-community/blur';
 
 export function Message({ topic, card, profile, host, select, selected }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean, select: (id: null | string)=>void, selected: string }) {
   const { state, actions } = useMessage();
@@ -37,6 +38,10 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
     setTimeout(() => setShowAsset(true), 2000);
   }, []);
 
+  useEffect(() => {
+    setEditText(text);
+  }, [text]);
+
   const loaded = () => {
     loadedCount.current += 1;
     if (loadedCount.current >= assets.length) {
@@ -44,6 +49,23 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
     }
   }
 
+  const edit = () => {
+    setEditing(true);
+    select(null);
+  }
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await actions.saveSubject(topic.topicId, topic.sealed, {...topic.data, text: editText});
+    } catch (err) {
+      console.log(err);
+      showError();
+    }
+    setSaving(false);
+    setEditing(false);
+  }
+
   const block = () => {
     setConfirmParams({
       title: state.strings.blockMessage,
@@ -175,11 +197,7 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
               </View>
             </Pressable>
             <View style={styles.padding}>
-              { !locked && status === 'confirmed' && editing && (
-                <View style={styles.editing}>
-                </View>
-              )}
-              { !locked && status === 'confirmed' && text && !editing && (
+              { !locked && status === 'confirmed' && text && (
                   <Text style={{ ...styles.text, ...textStyle }}>{ text }</Text>
               )}
               { !locked && status !== 'confirmed' && (
@@ -212,7 +230,7 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
             <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="share-variant-outline" size={24} onPress={() => {}} />
           )}
           { !locked && profile && (
-            <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="square-edit-outline" size={24} onPress={() => {}} />
+            <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="square-edit-outline" size={24} onPress={edit} />
           )}
           { (host || profile) && (
             <IconButton style={styles.option} loading={removing} compact="true"  mode="contained" icon="trash-can-outline" size={24} onPress={remove} />
@@ -227,6 +245,30 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
       )}
       <Divider style={styles.border} />
       <Confirm show={confirmShow} busy={removing || reporting || blocking} params={confirmParams} />
+      <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={editing} onRequestClose={()=>setEditing(false)}>
+        <View style={styles.modal}>
+          <Pressable style={styles.blur} onPress={()=>setEditing(false)}>
+            <BlurView style={styles.blur} blurType="dark" blurAmount={6} reducedTransparencyFallbackColor="dark" />
+          </Pressable>
+          <Surface elevation={2} style={styles.editArea}>
+            <Text style={styles.title}>{ state.strings.edit }</Text>
+            <TextInput multiline={true} mode="outlined" style={styles.message}
+                outlineColor="transparent" activeOutlineColor="transparent" spellcheck={false}
+                autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} 
+                value={editText} onChangeText={value => setEditText(value)} />
+            <View style={styles.controls}>
+              <Button mode="outlined" onPress={()=>setEditing(false)}>
+                {state.strings.cancel}
+              </Button>
+              <Button mode="contained" loading={saving} onPress={save}>
+                {state.strings.save}
+              </Button>
+            </View>
+            <IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={24} onPress={()=>setEditing(false)} />
+          </Surface>
+        </View>
+      </Modal>
+
     </View>
   );
 }
diff --git a/app/client/mobile/src/registry/Registry.tsx b/app/client/mobile/src/registry/Registry.tsx
index 9e55e16c..08bba45c 100644
--- a/app/client/mobile/src/registry/Registry.tsx
+++ b/app/client/mobile/src/registry/Registry.tsx
@@ -19,6 +19,8 @@ export function Registry({close, openContact}: {close: () => void; openContact:
             dense={true}
             style={styles.input}
             autoCapitalize={false}
+            outlineColor="transparent"
+            activeOutlineColor="transparent"
             underlineStyle={styles.inputUnderline}
             mode="outlined"
             placeholder={state.strings.username}
@@ -32,6 +34,8 @@ export function Registry({close, openContact}: {close: () => void; openContact:
             dense={true}
             style={styles.input}
             autoCapitalize={false}
+            outlineColor="transparent"
+            activeOutlineColor="transparent"
             underlineStyle={styles.inputUnderline}
             mode="outlined"
             placeholder={state.strings.node}