martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

cleaning up session

Browse Source
This commit is contained in:
Roland Osborne 2022-09-28 10:51:01 -07:00
parent 2dd42e3f97
commit 1f70aee040
11 changed files with 202 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
app/mobile/src/session/Session.jsx
View File

@ -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">
{(props) => <ConversationTabScreen channel={selected} closeConversation={clearConversation} openDetails={setDetail} navigation={props.navigation} />}
<ConversationStack.Screen name="conversation" options={{
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() {
);
}
// 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 HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav, setDetails, resetConversation, clearReset }) => {
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>

2
app/mobile/src/session/cards/Cards.jsx
View File

@ -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}>

1
app/mobile/src/session/cards/Cards.styled.js
View File

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

2
app/mobile/src/session/contact/Contact.jsx
View File

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

4
app/mobile/src/session/contact/Contact.styled.js
View File

@ -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,

52
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -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>
);
}

22
app/mobile/src/session/conversation/Conversation.styled.js Normal file
View File

@ -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',
},
})

17
app/mobile/src/session/conversation/useConversation.hook.js Normal file
View File

@ -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 };
}

6
app/mobile/src/session/details/Details.jsx
View File

@ -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}>
<Text>CLOSE</Text>
<TouchableOpacity onPress={clearConversation}>
<Text>CLEAR</Text>
</TouchableOpacity>
</View>
)

2
app/mobile/src/session/registry/Registry.jsx
View File

@ -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 && (

1
app/mobile/src/session/registry/Registry.styled.js
View File

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