merging back channels screen in mobile app

app/mobile/src/session/Session.jsx

@@ -16,7 +16,7 @@ import { ContactHeader, ContactBody, Contact } from './contact/Contact';
 import { Details, DetailsHeader, DetailsBody } from './details/Details';
 import { Conversation, ConversationHeader, ConversationBody } from './conversation/Conversation';
 import { Welcome } from './welcome/Welcome';
-import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
+import { Channels } from './channels/Channels';
 import { CommonActions } from '@react-navigation/native';
 import { ConversationContext } from 'context/ConversationContext';
 import { ProfileContext } from 'context/ProfileContext';
@@ -65,8 +65,8 @@ export function Session() {
           screenOptions={({ route }) => (screenParams)}
           screenListeners={{ state: (e) => { if (e?.data?.state?.index === 0) { conversation.actions.clearConversation() }} }}>
 
-        <ConversationStack.Screen name="channels" options={{ ...stackParams, headerTitle: (props) => <ChannelsTitle /> }}>
+        <ConversationStack.Screen name="channels" options={stackParams}>
-          {(props) => <ChannelsBody openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
+          {(props) => <Channels navigation={props.navigation} openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
         </ConversationStack.Screen>
 
         <ConversationStack.Screen name="conversation" options={{ ...stackParams, headerTitle: (props) => <ConversationHeader closeConversation={clearConversation} openDetails={openDetails} /> }}>

app/mobile/src/session/channels/Channels.jsx

@@ -1,14 +1,57 @@
-import { Text } from 'react-native';
+import { useEffect } from 'react';
+import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/AntDesign';
+import { styles } from './Channels.styled';
+import { useChannels } from './useChannels.hook';
+import { Colors } from 'constants/Colors';
 
-export function ChannelsTitle({ state, actions }) {
+export function Channels({ navigation, openConversation }) {
-  return <Text>ChannelsTitle</Text>
+
-}
+  const { state, actions } = useChannels();
-
+
-export function ChannelsBody({ state, actions, openConversation }) {
+  useEffect(() => {
-  return <Text>ChannelsBody</Text>
+    if (navigation) {
-}
+      navigation.setOptions({
-
+        headerTitle: () => (
-export function Channels({ openConversation }) {
+          <View style={styles.title}>
-  return <Text>Channels</Text>;
+            <View style={styles.inputwrapper}>
+              <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+              <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
+                  autoCapitalize="none" placeholderTextColor={Colors.disabled}  placeholder="Topics" />
+            </View>
+            <TouchableOpacity style={styles.addtop} onPress={actions.showAdding}>
+              <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
+              <Text style={styles.addtext}>New</Text>
+            </TouchableOpacity>
+          </View>
+        ),
+      });
+    }
+  }, [navigation]);
+
+  return (
+    <View style={styles.container}>
+      { !navigation && (
+        <View style={styles.columntop}>
+          <View style={styles.inputwrapper}>
+            <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+            <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
+                autoCapitalize="none" placeholderTextColor={Colors.disabled}  placeholder="Topics" />
+          </View>
+        </View>
+      )}
+      <View style={styles.content}>
+        <Text>Channels</Text>
+      </View>
+      { !navigation && (
+        <View style={styles.columnbottom}>
+          <TouchableOpacity style={styles.addbottom} onPress={actions.showAdding}>
+            <Ionicons name={'message1'} size={16} color={Colors.white} />
+            <Text style={styles.addtext}>New Topic</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
 }
 

app/mobile/src/session/channels/Channels.styled.js

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputwrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderRadius: 4,
+    backgroundColor: Colors.white,
+    alignItems: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingTop: 4,
+    paddingBottom: 4,
+  },
+  inputfield: {
+    flex: 1,
+    flexGrow: 1,
+    textAlign: 'center',
+    padding: 4,
+    color: Colors.text,
+    fontSize: 14,
+  },
+  icon: {
+    paddingLeft: 8,
+  },
+  addbottom: {
+    backgroundColor: Colors.primary,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    borderRadius: 4,
+  },
+  addtop: {
+    backgroundColor: Colors.primary,
+    marginLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderRadius: 4,
+  },
+  addtext: {
+    paddingLeft: 8,
+    color: Colors.white,
+  },
+  content: {
+    flexGrow: 1,
+  },
+  columnbottom: {
+    paddingLeft: 24,
+    paddingRight: 16,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderColor: Colors.divider,
+  },
+  columntop: {
+    paddingLeft: 24,
+    paddingRight: 16,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderColor: Colors.divider,
+  },
+});
+

app/mobile/src/session/channels/useChannels.hook.js

@@ -1,9 +1,18 @@
 import { useState } from 'react';
 
 export function useChannels() {
-  const [state, setState] = useState({});
+  const [state, setState] = useState({
+    filter: null,
+  });
 
-  const actions = {};
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    setFilter: () => {
+    },
+  };
 
   return { state, actions };
 }