beginning channel screen layout

app/mobile/src/session/Session.jsx

@@ -1,4 +1,5 @@
 import { View, TouchableOpacity, Text } from 'react-native';
+import { useState } from 'react';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -19,12 +20,17 @@ import { Welcome } from './welcome/Welcome';
 export function Session() {
 
   const { state, actions } = useSession();
-
+  const [ contactDrawer, setContactDrawer ] = useState(null);
   const Tab = createBottomTabNavigator();
 
-  const openCards = (nav) => {}
+  const openCards = (nav) => {
+    nav.openDrawer();
+  }
   const closeCards = (nav) => {}
-  const openProfile = (nav) => {}
+  const openProfile = (nav) => {
+    setContactDrawer('profile');
+    nav.openDrawer();
+  }
   const closeProfile = (nav) => {}
   const openContact = (nav, cardId) => {}
   const closeContact = (nav) => {}
@@ -45,7 +51,11 @@ export function Session() {
     );
   }
   const ChannelsTabScreen = ({ navigation }) => {
-    return <Channels openConversation={(cardId, channelId) => openConversation(navigation, cardId, channelId)} />
+    return (
+      <SafeAreaView style={styles.channels} edges={['top']}>
+        <Channels openConversation={(cardId, channelId) => openConversation(navigation, cardId, channelId)} />
+      </SafeAreaView>
+    )
   }
   const ConversationTabScreen = ({ navigation }) => {
     return <Conversation closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} />
@@ -91,13 +101,13 @@ export function Session() {
   const ContactDrawerContent = ({ navigation }) => {
     return (
       <SafeAreaView>
-        { state.contactDrawer === 'profile' && (
+        { contactDrawer === 'profile' && (
           <Profile closeProfile={() => closeProfile(navigation)} />
         )}
-        { state.contactDrawer === 'contact' && (
+        { contactDrawer === 'contacts' && (
           <Contact closeContact={() => closeContact(navigation)} />
         )}
-        { state.contactDrawer === 'details' && (
+        { contactDrawer === 'details' && (
           <Details closeDetails={() => closeDetails(navigation)} />
         )}
       </SafeAreaView>
@@ -107,17 +117,17 @@ export function Session() {
     return (
       <View style={styles.home}>
         <View style={styles.sidebar}>
-          <SafeAreaView edges={['top']} style={styles.options}>
-            <TouchableOpacity style={styles.option}>
+          <SafeAreaView edges={['top', 'left']} style={styles.options}>
+            <TouchableOpacity style={styles.option} onPress={() => openProfile(contactNav)}>
               <Ionicons style={styles.icon} name={'user'} size={20} />
               <Text>Profile</Text>
             </TouchableOpacity>
-            <TouchableOpacity style={styles.option}>
+            <TouchableOpacity style={styles.option} onPress={() => openCards(navigation)}>
               <Ionicons style={styles.icon} name={'contacts'} size={20} />
               <Text>Contacts</Text>
             </TouchableOpacity>
           </SafeAreaView>
-          <SafeAreaView edges={['bottom']} style={styles.channels}>
+          <SafeAreaView edges={['left', 'bottom']} style={styles.channels}>
             <Channels openConversation={(cardId, channelId) => openConversation(null, cardId, channelId)} />
           </SafeAreaView>
         </View>

app/mobile/src/session/Session.styled.js

@@ -20,14 +20,12 @@ export const styles = StyleSheet.create({
   conversation: {
     height: '100%',
     flexGrow: 1,
-    backgroundColor: 'yellow',
   },
   options: {
     display: 'flex',
     flexDirection: 'row',
     paddingTop: 8,
     paddingBottom: 4,
-    backgroundColor: 'red',
   },
   option: {
     width: '50%',
@@ -42,6 +40,5 @@ export const styles = StyleSheet.create({
   },
   channels: {
     flexGrow: 1,
-    backgroundColor: 'green',
   },
 });

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

@@ -1,12 +1,22 @@
 import { useContext } from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { AppContext } from 'context/AppContext';
+import { View, TextInput, TouchableOpacity, Text } from 'react-native';
+import { styles } from './Channels.styled';
+import { useChannels } from './useChannels.hook';
+import Ionicons from '@expo/vector-icons/AntDesign';
 
 export function Channels() {
 
-  const app = useContext(AppContext);
+  const { state, actions } = useChannels();
 
-  return (<SafeAreaView edges={['top']}><TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={app.actions.logout}><Text>~ CHANNELS LOGOUT</Text></TouchableOpacity></SafeAreaView>)
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputwrapper}>
+        <Ionicons style={styles.icon} name="search1" size={18} color={'#ffffff'} />
+        <TextInput style={styles.inputfield} value={state.topic} onChangeText={actions.setTopic}
+            autoCapitalize="none" placeholderTextColor={'#ffffff'}  placeholder="Topic" />
+        <View style={styles.space} />
+      </View>
+    </View>
+  );
 }
 

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

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  inputwrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderRadius: 4,
+    backgroundColor: Colors.lightgrey,
+    alignItems: 'center',
+    marginRight: 8,
+    marginLeft: 8,
+  },
+  inputfield: {
+    flex: 1,
+    textAlign: 'center',
+    padding: 8,
+    color: Colors.white,
+    fontSize: 16,
+  },
+  icon: {
+    paddingLeft: 8,
+  }  
+})
+

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

@@ -0,0 +1,25 @@
+import { useState, useEffect, useContext } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useNavigate } from 'react-router-dom';
+import { AppContext } from 'context/AppContext';
+import config from 'constants/Config';
+
+export function useChannels() {
+
+  const [state, setState] = useState({
+    topic: null,
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    setTopic: (topic) => {
+      updateState({ topic });
+    },
+  };
+
+  return { state, actions };
+}
+

app/mobile/src/session/useSession.hook.js

@@ -38,6 +38,9 @@ export function useSession() {
   }, [dimensions]);
 
   const actions = {
+    setContactDrawer: (contactDrawer) => {
+      updateState({ contactDrawer });
+    },
   };
 
   return { state, actions };