adding support for new topics

app/mobile/src/session/conversation/Conversation.jsx

@@ -1,4 +1,4 @@
-import { View, TouchableOpacity, Text, } from 'react-native';
+import { TextInput, View, TouchableOpacity, Text, } from 'react-native';
 import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
 import { useState, useRef } from 'react';
 import { useConversation } from './useConversation.hook';
@@ -7,10 +7,11 @@ import { useNavigation } from '@react-navigation/native';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import Colors from 'constants/Colors';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { AddTopic } from './addTopic/AddTopic';
 
-export function ConversationHeader({ channel, closeConversation, openDetails }) {
+export function ConversationHeader({ closeConversation, openDetails }) {
   const navigation = useNavigation();
-  const { state, actions } = useConversation(channel?.cardId, channel?.channelId);
+  const { state, actions } = useConversation();
 
   const setDetails = () => {
     openDetails(navigation);
@@ -31,26 +32,29 @@ export function ConversationHeader({ channel, closeConversation, openDetails })
   );
 }
 
-export function ConversationBody({ channel }) {
-  const { state, actions } = useConversation(channel?.cardId, channel?.channelId);
+export function ConversationBody() {
+  const { state, actions } = useConversation();
 
   return (
-    <FlatList style={styles.topics}
-      data={state.topics}
-      maintainVisibleContentPosition={{ minIndexForVisibile: 0, }}
-      inverted={true}
-      renderItem={({item}) => <View><Text>ITEM { item?.detail?.data }</Text></View>}
-      keyExtractor={item => item.topicId}
-    />
+    <View style={styles.topics}>
+      <FlatList
+        data={state.topics}
+        maintainVisibleContentPosition={{ minIndexForVisibile: 0, }}
+        inverted={true}
+        renderItem={({item}) => <View><Text>ITEM { item?.detail?.data }</Text></View>}
+        keyExtractor={item => item.topicId}
+      />
+      <AddTopic />
+    </View>
   );
 }
 
-export function Conversation({ channel, closeConversation, openDetails }) {
-  
-  const { state, actions } = useConversation(channel?.cardId, channel?.channelId);
+export function Conversation({ closeConversation, openDetails }) {
+  const { state, actions } = useConversation();
+
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
+      <SafeAreaView edges={['right']} style={styles.header}>
         <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
         <TouchableOpacity style={styles.action} onPress={openDetails}>
           <Ionicons name="setting" size={20} color={Colors.primary} />
@@ -58,7 +62,7 @@ export function Conversation({ channel, closeConversation, openDetails }) {
         <TouchableOpacity style={styles.close} onPress={closeConversation}>
           <Ionicons name="close" size={20} color={Colors.text} />
         </TouchableOpacity>
-      </View>
+      </SafeAreaView>
       <SafeAreaView edges={['bottom']} style={styles.body}>
         <ConversationBody channel={channel} />
       </SafeAreaView>

app/mobile/src/session/conversation/Conversation.styled.js

@@ -51,8 +51,27 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     justifyContent: 'flex-end',
     alignItems: 'flex-end',
-    paddingRight: 32,
-    paddingLeft: 16,
+  },
+  add: {
+    borderTopWidth: 1,
+    borderColor: Colors.divider,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  addButtons: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  addButton: {
+    width: 24,
+    height: 24,
+  },
+  input: {
+    margin: 8,
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.white,
+    maxHeight: 64,
   },
 })
 

app/mobile/src/session/conversation/addTopic/AddTopic.jsx

@@ -0,0 +1,32 @@
+import { TextInput, View, TouchableOpacity, Text, } from 'react-native';
+import { useState, useRef } from 'react';
+import { useAddTopic } from './useAddTopic.hook';
+import { styles } from './AddTopic.styled';
+import Ionicons from '@expo/vector-icons/AntDesign';
+import Colors from 'constants/Colors';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export function AddTopic() {
+
+  const { state, actions } = useAddTopic();
+
+  return (
+    <SafeAreaView style={styles.add} edges={['right']}>
+      <TextInput style={styles.input} value={state.message} onChangeText={actions.setMessage}
+          autoCapitalize="sentences" placeholder="New Message" multiline={true} />
+      <View style={styles.addButtons}>
+        <View style={styles.addButton}>
+          <Ionicons name="picture" size={20} color={Colors.text} />
+        </View>
+        <View style={styles.addButton}>
+          <Ionicons name="videocamera" size={20} color={Colors.text} />
+        </View>
+        <View style={styles.addButton}>
+          <Ionicons name="sound" size={20} color={Colors.text} />
+        </View>
+        <View style={styles.space}></View>
+      </View>
+    </SafeAreaView>
+  );
+}
+

app/mobile/src/session/conversation/addTopic/AddTopic.styled.js

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  add: {
+    borderTopWidth: 1,
+    borderColor: Colors.divider,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  addButtons: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginLeft: 8,
+    marginRight: 8,
+    marginBottom: 16,
+  },
+  addButton: {
+    width: 32,
+    height: 32,
+    backgroundColor: Colors.white,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: Colors.divider,
+    borderRadius: 2,
+  },
+  input: {
+    margin: 8,
+    padding: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: Colors.divider,
+    backgroundColor: Colors.white,
+    maxHeight: 96,
+    minHeight: 48,
+  },
+  space: {
+    borderWidth: 1,
+    borderColor: Colors.divider,
+    height: 32,
+    marginLeft: 8,
+    marginRight: 8,
+  },
+})
+

app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -0,0 +1,24 @@
+import { useState, useEffect, useContext } from 'react';
+import { ConversationContext } from 'context/ConversationContext';
+
+export function useAddTopic(cardId, channelId) {
+
+  const [state, setState] = useState({
+    message: null,
+  });
+
+  const conversation = useContext(ConversationContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    setMessage: (message) => {
+      updateState({ message });
+    },
+  };
+
+  return { state, actions };
+}
+

app/mobile/src/session/conversation/useConversation.hook.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 
-export function useConversation(cardId, channelId) {
+export function useConversation() {
 
   const [state, setState] = useState({
     topics: [],