suppot updates to topic subject

app/mobile/src/context/useChannelContext.hook.js

@@ -46,7 +46,7 @@ export function useChannelContext() {
     update.topicRevision = channel?.data?.topicRevision;
     channels.current.set(channelId, update);
   }
-  const setChannelDetails = (channelId, detail, revision) => {
+  const setChannelDetail = (channelId, detail, revision) => {
     let channel = channels.current.get(channelId);
     if (channel) {
       channel.detail = detail;
@@ -94,6 +94,7 @@ export function useChannelContext() {
         const { server, appToken, guid } = session.current;
 
         const delta = await getChannels(server, appToken, setRevision.current);
+console.log("DELTA", delta);
         for (let channel of delta) {
           if (channel.data) {
             if (channel.data.channelDetail && channel.data.channelSummary) {
@@ -234,6 +235,10 @@ export function useChannelContext() {
       const { server, appToken } = session.current;
       return await setChannelTopicSubject(server, appToken, channelId, topicId, data);
     },
+    setSubject: async (channelId, data) => {
+      const { server, appToken } = session.current;
+      return await setChannelSubject(server, appToken, channelId, data);
+    },
     remove: async (channelId) => {
       const { server, appToken } = session.current;
       return await removeChannel(server, appToken, channelId);

app/mobile/src/context/useConversationContext.hook.js

@@ -7,6 +7,7 @@ import moment from 'moment';
 
 export function useConversationContext() {
   const [state, setState] = useState({
+    topic: null,
     subject: null,
     logo: null,
     revision: null,
@@ -209,6 +210,7 @@ export function useConversationContext() {
   const setChannel = (item) => {
     let contacts = [];
     let logo = null;
+    let topic = null;
     let subject = null;
 
     let timestamp;
@@ -226,7 +228,7 @@ export function useConversationContext() {
     }
 
     if (!item) {
-      updateState({ contacts, logo, subject });
+      updateState({ contacts, logo, subject, topic });
       return;
     }
 
@@ -260,7 +262,8 @@ export function useConversationContext() {
 
     if (item?.detail?.data) {
       try {
-        subject = JSON.parse(item?.detail?.data).subject;
+        topic = JSON.parse(item?.detail?.data).subject;
+        subject = topic;
       }
       catch (err) {
         console.log(err);
@@ -284,7 +287,7 @@ export function useConversationContext() {
       }
     }
 
-    updateState({ subject, logo, contacts, host: item.cardId, created: timestamp });
+    updateState({ topic, subject, logo, contacts, host: item.cardId, created: timestamp });
   }
 
   useEffect(() => {
@@ -339,6 +342,15 @@ export function useConversationContext() {
         sync();
       }
     },
+    setSubject: async (subject) => {
+      if (conversationId.current) {
+        const { cardId, channelId } = conversationId.current;
+        if (cardId) {
+          throw new Error("can only set hosted channel subjects");
+        }
+        await channel.actions.setSubject(channelId, subject);
+      }
+    },
   }
 
   return { state, actions }

app/mobile/src/session/details/Details.jsx

@@ -1,4 +1,4 @@
-import { FlatList, View, Text, TouchableOpacity } from 'react-native';
+import { KeyboardAvoidingView, FlatList, Alert, Modal, View, Text, TouchableOpacity, TextInput } from 'react-native';
 import { styles } from './Details.styled';
 import { useDetails } from './useDetails.hook';
 import { Logo } from 'utils/Logo';
@@ -14,12 +14,26 @@ export function DetailsBody({ channel, clearConversation }) {
 
   const { state, actions } = useDetails();
 
+  const saveSubject = async () => {
+    try {
+      await actions.saveSubject();
+      actions.hideEditSubject();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Save Subject',
+        'Please try again.'
+      )
+    }
+  }
+
   return (
     <View style={styles.body}>
       <View style={styles.details}>
         <Logo src={state.logo} width={72} height={72} radius={8} />
         <View style={styles.info}>
-          <TouchableOpacity style={styles.subject}>
+          <TouchableOpacity style={styles.subject} onPress={actions.showEditSubject}>
             <Text style={styles.subject}>{ state.subject }</Text>
             { !state.hostId && (
               <Ionicons name="edit" size={16} color={Colors.text} />
@@ -61,6 +75,32 @@ export function DetailsBody({ channel, clearConversation }) {
         keyExtractor={item => item.cardId}
       />
 
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.editSubject}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideEditSubject}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.editWrapper}>
+          <View style={styles.editContainer}>
+            <Text style={styles.editHeader}>Edit Subject:</Text>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.subjectUpdate} onChangeText={actions.setSubjectUpdate}
+                  autoCapitalize="words" placeholder="Subject" />
+            </View>
+            <View style={styles.editControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditSubject}>
+                <Text>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.save} onPress={saveSubject}>
+                <Text style={styles.saveText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
     </View>
   )
 }

app/mobile/src/session/details/Details.styled.js

@@ -71,5 +71,71 @@ export const styles = StyleSheet.create({
   cards: {
     width: '100%',
   },
+  save: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.primary,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  link: {
+    marginTop: 16,
+  },
+  linkText: {
+    color: Colors.primary,
+  },
+  saveText: {
+    color: Colors.white,
+  },
+  cancel: {
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  inputField: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginBottom: 8,
+    maxHeight: 92,
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  input: {
+    fontSize: 14,
+    flexGrow: 1,
+  },
+  editControls: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  editWrapper: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(52, 52, 52, 0.8)'
+  },
+  editContainer: {
+    backgroundColor: Colors.formBackground,
+    padding: 16,
+    width: '80%',
+    maxWidth: 400,
+  },
+  editHeader: {
+    fontSize: 18,
+    paddingBottom: 16,
+  },
+
 })
 

app/mobile/src/session/details/useDetails.hook.js

@@ -10,6 +10,8 @@ export function useDetails() {
     logo: null,
     hostId: null,
     contacts: [],
+    editSubject: false,
+    subjectUpdate: null,
   });
 
   const conversation = useContext(ConversationContext);
@@ -20,12 +22,24 @@ export function useDetails() {
   }
 
   useEffect(() => {
-    const { subject, created, logo, host, contacts } = conversation.state;
-    updateState({ subject, created, logo, hostId: host,
+    const { topic, subject, created, logo, host, contacts } = conversation.state;
+    updateState({ subject, created, logo, hostId: host, subjectUpdate: topic,
       count: contacts.length, contacts: contacts.filter(card => card != null) });
   }, [conversation]);
 
   const actions = {
+    showEditSubject: () => {
+      updateState({ editSubject: true });
+    },
+    hideEditSubject: () => {
+      updateState({ editSubject: false });
+    },
+    setSubjectUpdate: (subjectUpdate) => {
+      updateState({ subjectUpdate });
+    },
+    saveSubject: async () => {
+      await conversation.actions.setSubject(state.subjectUpdate);
+    },
   };
 
   return { state, actions };

app/mobile/src/session/profile/Profile.jsx

@@ -108,9 +108,6 @@ export function Profile() {
       <View style={styles.container}>
         <View style={{ width: 128 }}>
           <Logo src={state.imageSource} width={128} height={128} radius={8} />
-          <TouchableOpacity style={styles.camera} onPress={onCamera}>
-            <Ionicons name="camerao" size={14} color={Colors.white} />
-          </TouchableOpacity>
           <TouchableOpacity style={styles.gallery} onPress={onGallery}>
             <Ionicons name="picture" size={14} color={Colors.white} />
           </TouchableOpacity>