cleaning up session

app/mobile/src/session/Session.jsx

@@ -1,5 +1,5 @@
 import { View, TouchableOpacity, Text } from 'react-native';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -16,10 +16,11 @@ import { RegistryTitle, RegistryBody, Registry } from './registry/Registry';
 import { useRegistry } from './registry/useRegistry.hook';
 import { Contact, ContactTitle } from './contact/Contact';
 import { Details } from './details/Details';
-import { Conversation } from './conversation/Conversation';
+import { Conversation, ConversationHeader, ConversationBody } from './conversation/Conversation';
 import { Welcome } from './welcome/Welcome';
 import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
 import { useChannels } from './channels/useChannels.hook';
+import { CommonActions } from '@react-navigation/native';
 
 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
@@ -59,7 +60,14 @@ export function Session() {
       navigation.navigate('conversation');
     }
     const clearConversation = (navigation) => {
-      navigation.goBack();
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            { name: 'channels' },
+          ],
+        })
+      );
     }
     const setDetail = (navigation) => {
       navigation.navigate('details');
@@ -79,21 +87,19 @@ export function Session() {
           }}>
           {(props) => <ChannelsBody state={channels.state} actions={channels.actions} openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
         </ConversationStack.Screen>
-        <ConversationStack.Screen name="conversation">
+        <ConversationStack.Screen name="conversation" options={{
-          {(props) => <ConversationTabScreen channel={selected} closeConversation={clearConversation} openDetails={setDetail} navigation={props.navigation} />}
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => <ConversationHeader channel={selected} closeConversation={clearConversation} openDetails={setDetail} />
+          }}>
+          {(props) => <ConversationBody channel={selected} />}
         </ConversationStack.Screen>
         <ConversationStack.Screen name="details">
-          {(props) => <DetailsTabScreen channel={selected} closeDetails={clearDetail} navigation={props.navigation} />}
+          {(props) => <Details channel={selected} clearConversation={() => clearConversation(props.navigation)} />}
         </ConversationStack.Screen>
       </ConversationStack.Navigator>
     );
   }
-  const ConversationTabScreen = ({ navigation, channel, closeConversation, openDetails }) => {
-    return <Conversation channel={channel} closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} />
-  }
-  const DetailsTabScreen = ({ navigation, channel, closeDetails }) => {
-    return <Details channel={channel} closeDetails={() => closeDetails(navigation)} />
-  }
   const ProfileStackScreen = () => {
     return (
       <ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}>
@@ -147,57 +153,31 @@ export function Session() {
     );
   }
 
-
+  const HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav, setDetails, resetConversation, clearReset }) => {
-  // drawered containers
-  const CardDrawerContent = ({ navigation, setContact, openRegistry }) => {
-    return (
-      <SafeAreaView edges={['top']} style={styles.drawer}>
-        <Cards navigation={navigation} openContact={setContact} openRegistry={openRegistry} />
-      </SafeAreaView>
-    )
-  }
-  const RegistryDrawerContent = ({ navigation, setContact }) => {
-    return (
-      <SafeAreaView edges={['top', 'bottom']} style={styles.drawer}>
-        <Registry navigation={navigation} openContact={setContact} />
-      </SafeAreaView>
-    );
-  }
-  const ProfileDrawerContent = ({ navigation }) => {
-    return (
-      <View style={styles.drawer}>
-        <Profile closeProfile={() => closeProfile(navigation)} />
-      </View>
-    )
-  }
-  const DetailDrawerContent = ({ channel, navigation }) => {
-    return (
-      <SafeAreaView>
-        <Details channel={channel} closeDetails={() => {}} />
-      </SafeAreaView>
-    )
-  }
-  const ContactDrawerContent = ({ contact, navigation }) => {
-    const clearContact = () => {
-      navigation.closeDrawer();
-    }
-
-    return (
-      <View style={styles.drawer}>
-        <Contact contact={contact} closeContact={clearContact} />
-      </View>
-    )
-  }
-
-  const HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav, setConversation, setDetail }) => {
 
     const [channel, setChannel] = useState(null);
-    const setTopic = (cardId, channelId) => {
+    const setConversation = (cardId, channelId) => {
       setChannel({ cardId, channelId });
     };
-    const clearTopic = () => {
+    const clearConversation = () => {
       setChannel(null);
     };
+    const setProfile = () => {
+      profileNav.openDrawer();
+    };
+    const setChannelDetails = (channel) => {
+      setDetails(channel);
+      detailNav.openDrawer();
+    };
+
+    useEffect(() => {
+      if (resetConversation) {
+        detailNav.closeDrawer();
+        setChannel(null);
+        setDetails(null);
+        clearReset();
+      }
+    }, [resetConversation]);
 
     return (
       <View style={styles.home}>
@@ -213,12 +193,12 @@ export function Session() {
             </TouchableOpacity>
           </SafeAreaView>
           <View style={styles.channels}>
-            <Channels openConversation={setTopic} />
+            <Channels openConversation={setConversation} />
           </View>
         </SafeAreaView>
         <View style={styles.conversation}>
           { channel && (
-            <Conversation channel={channel} closeConversation={clearTopic} openDetails={() => setDetail(detailNav, channel)} />
+            <Conversation channel={channel} closeConversation={clearConversation} openDetails={setChannelDetails} />
           )}
           { !channel && (
             <Welcome />
@@ -228,47 +208,85 @@ export function Session() {
     )
   }
 
-  const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact, setDetail }) => {
+  const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact, setDetails, clearReset, resetConversation }) => {
 
     const openRegistry = () => {
       registryNav.openDrawer();
-    }
+    };
+    setCardContact = (contact) => {
+      setContact(contact);
+      contactNav.openDrawer();
+    };
+
+    const params = {
+      profileNav,
+      registryNav,
+      detailNav,
+      contactNav,
+      setDetails,
+      setContact,
+      clearReset,
+      resetConversation,
+    };
 
     return (
       <CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
-        drawerContent={(props) => <CardDrawerContent setContact={setContact} openRegistry={openRegistry} {...props} />}>
+        drawerContent={(props) => <Cards openContact={setCardContact} openRegistry={openRegistry} />}>
         <CardDrawer.Screen name="home">
-          {(props) => <HomeScreen cardNav={props.navigation} registryNav={registryNav} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} setDetail={setDetail} />}
+          {(props) => <HomeScreen cardNav={props.navigation} {...params} />}
         </CardDrawer.Screen>
       </CardDrawer.Navigator>
     );
   };
 
-  const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact, setDetail }) => {
+  const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact, setDetails, clearReset, resetConversation }) => {
+
+    const setRegistryContact = (contact) => {
+      setContact(contact);
+      contactNav.openDrawer();
+    };
+
+    const params = {
+      profileNav,
+      detailNav,
+      contactNav,
+      setDetails,
+      setContact,
+      clearReset,
+      resetConversation,
+    };
 
     return (
       <RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
-        drawerContent={(props) => <RegistryDrawerContent setContact={setContact} {...props} />}>
+        drawerContent={(props) => <Registry openContact={setRegistryContact} />}>
         <RegistryDrawer.Screen name="card">
-          {(props) => <CardDrawerScreen registryNav={props.navigation} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} setDetail={setDetail} />}
+          {(props) => <CardDrawerScreen registryNav={props.navigation} {...params} />}
         </RegistryDrawer.Screen>
       </RegistryDrawer.Navigator>
     );
   };
 
-  const ContactDrawerScreen = ({ detailNav, profileNav, setDetail }) => {
+  const ContactDrawerScreen = ({ detailNav, profileNav, setDetails, resetConversation, clearReset }) => {
 
     const [selected, setSelected] = useState(null);
-    const setContact = (navigation, contact) => {
+    const setContact = (contact) => {
       setSelected(contact);
-      navigation.openDrawer();
     }
 
+    const params = {
+      profileNav,
+      detailNav,
+      setDetails,
+      setContact,
+      clearReset,
+      resetConversation,
+    };
+
     return (
       <ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
-        drawerContent={(props) => <ContactDrawerContent contact={selected} {...props} />}>
+        drawerContent={(props) => <Contact contact={selected} />}>
         <ContactDrawer.Screen name="registry">
-          {(props) => <RegistryDrawerScreen detailNav={detailNav} profileNav={profileNav} contactNav={props.navigation} setContact={(contact) => setContact(props.navigation, contact)} setDetail={setDetail} />}
+          {(props) => <RegistryDrawerScreen {...params} contactNav={props.navigation} setContact={setContact} />}
         </ContactDrawer.Screen>
       </ContactDrawer.Navigator>
     );
@@ -277,16 +295,30 @@ export function Session() {
   const DetailDrawerScreen = ({ profileNav }) => {
 
     const [selected, setSelected] = useState(null);
-    const setDetail = (navigation, channel) => {
+    const [resetConversation, setResetConversation] = useState(false);
+    const setDetails = (channel) => {
       setSelected(channel);
-      navigation.openDrawer();
+    };
+    const clearConversation = () => {
+      setResetConversation(true);
+    }
+    const clearReset = () => {
+      setResetConversation(false);
+    }
+
+    const params = {
+      profileNav,
+      setDetails,
+      clearReset,
+      resetConversation,
     };
   
     return (
       <DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
-        drawerContent={(props) => <DetailDrawerContent channel={selected} {...props} />}>
+          drawerContent={(props) => <Details channel={selected} clearConversation={clearConversation} />}
+        >
         <DetailDrawer.Screen name="contact">
-          {(props) => <ContactDrawerScreen profileNav={profileNav} detailNav={props.navigation} setDetail={setDetail} />}
+          {(props) => <ContactDrawerScreen {...params} detailNav={props.navigation} />}
         </DetailDrawer.Screen>
       </DetailDrawer.Navigator>
     );
@@ -296,7 +328,7 @@ export function Session() {
     <View style={styles.container}>
       { state.tabbed === false && (
         <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
-          drawerContent={(props) => <ProfileDrawerContent {...props} />}>
+          drawerContent={(props) => <Profile />}>
           <ProfileDrawer.Screen name="detail">
             {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}
           </ProfileDrawer.Screen>

app/mobile/src/session/cards/Cards.jsx

@@ -83,7 +83,7 @@ export function Cards({ openRegistry, openContact }) {
         </>
       )}
       { !state.tabbed && (
-        <SafeAreaView edges={['right']} style={styles.searcharea}>
+        <SafeAreaView edges={['top', 'right']} style={styles.searcharea}>
           <View style={styles.searchbar}>
             { state.sorting && (
               <TouchableOpacity style={styles.sort} onPress={actions.unsort}>

app/mobile/src/session/cards/Cards.styled.js

@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    backgroundColor: Colors.formBackground,
   },
   title: {
     display: 'flex',

app/mobile/src/session/contact/Contact.jsx

@@ -235,7 +235,7 @@ export function Contact({ contact, closeContact }) {
   }
 
   return (
-    <ScrollView>
+    <ScrollView style={styles.wrapper}>
       { state.tabbed && (
         <Body />
       )}

app/mobile/src/session/contact/Contact.styled.js

@@ -10,6 +10,10 @@ export const styles = StyleSheet.create({
     paddingBottom: 32,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: Colors.formBackground,
+  },
+  wrapper: {
+    backgroundColor: Colors.formBackground,
   },
   title: {
     fontSize: 18,

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

@@ -1,9 +1,36 @@
 import { View, TouchableOpacity, Text } from 'react-native';
+import { useConversation } from './useConversation.hook';
+import { styles } from './Conversation.styled';
+import { useNavigation } from '@react-navigation/native';
+
+export function ConversationHeader({ channel, closeConversation, openDetails }) {
+  const navigation = useNavigation();
+  const { state, actions } = useConversation();
+
+  const setDetails = () => {
+    openDetails(navigation);
+  };
+  const clearConversation = () => {
+    closeConversation(navigation);
+  };
 
-export function Conversation({ channel, closeConversation, openDetails }) {
-  
   return (
-    <View>
+    <View style={styles.title}>
+      <TouchableOpacity onPress={clearConversation}>
+        <Text>CLOSE</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={setDetails}>
+        <Text>DETAILS</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+  
+export function ConversationBody({ channel }) {
+  const { state, actions } = useConversation();
+
+  return (
+    <View> 
       <Text>CHANNEL</Text>
       { channel && (
         <>
@@ -11,13 +38,20 @@ export function Conversation({ channel, closeConversation, openDetails }) {
           <Text>{ channel.channelId }</Text>
         </>
       )}
-      <TouchableOpacity onPress={openDetails}>
-        <Text>DETAILS</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={closeConversation}>
-        <Text>CLOSE</Text>
-      </TouchableOpacity>
     </View>
   );
 }
 
+export function Conversation({ channel, closeConversation, openDetails }) {
+  
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <ConversationHeader channel={channel} closeConversation={closeConversation} openDetails={openDetails} />
+      </View>
+      <View style={styles.body}>
+        <ConversationBody channel={channel} />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  header: {
+    width: '100%',
+  },
+  body: {
+    width: '100%',
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+})
+

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

@@ -0,0 +1,17 @@
+import { useState, useEffect, useContext } from 'react';
+
+export function useConversation() {
+
+  const [state, setState] = useState({
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

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

@@ -1,6 +1,6 @@
 import { View, Text, TouchableOpacity } from 'react-native';
 
-export function Details({ channel, closeDetails }) {
+export function Details({ channel, clearConversation }) {
   return (
     <View>
       <Text>DETAILS</Text>
@@ -10,8 +10,8 @@ export function Details({ channel, closeDetails }) {
           <Text>{ channel.channelId }</Text>
         </>
       )}
-      <TouchableOpacity onPress={closeDetails}>
+      <TouchableOpacity onPress={clearConversation}>
-        <Text>CLOSE</Text>
+        <Text>CLEAR</Text>
       </TouchableOpacity>
     </View>
   )

app/mobile/src/session/registry/Registry.jsx

@@ -26,7 +26,7 @@ export function RegistryTitle({ state, actions }) {
     <View style={styles.title}>
       <View style={styles.inputwrapper}>
         <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
-            autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
+            autoCorrect={false} autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
         <View style={styles.space} />
       </View>
       { state.busy && (

app/mobile/src/session/registry/Registry.styled.js

@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    backgroundColor: Colors.formBackground,
   },
   title: {
     display: 'flex',