martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-22 09:35:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

connecting conversation screen

Browse Source
This commit is contained in:
balzack 2022-09-26 23:12:42 -07:00
parent a765bf5c98
commit ec3f6ac303
7 changed files with 117 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,24 +49,46 @@ export function Session() {
// tabbed containers
const ConversationStackScreen = () => {
const [selected, setSelected] = useState(null);
const setConversation = (navigation, cardId, channelId) => {
setSelected({ cardId, channelId });
navigation.navigate('conversation');
}
const clearConversation = (navigation) => {
navigation.goBack();
}
const setDetail = (navigation) => {
navigation.navigate('details');
}
const clearDetail = (navigation) => {
navigation.goBack();
}
return (
<ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
<ConversationStack.Screen name="channels" component={ChannelsTabScreen} />
<ConversationStack.Screen name="conversation" component={ConversationTabScreen} />
<ConversationStack.Screen name="details" component={DetailsTabScreen} />
<ConversationStack.Screen name="channels">
{(props) => <ChannelsTabScreen openConversation={setConversation} navigation={props.navigation} />}
</ConversationStack.Screen>
<ConversationStack.Screen name="conversation">
{(props) => <ConversationTabScreen channel={selected} closeConversation={clearConversation} openDetails={setDetail} navigation={props.navigation} />}
</ConversationStack.Screen>
<ConversationStack.Screen name="details">
{(props) => <DetailsTabScreen channel={selected} closeDetails={clearDetail} navigation={props.navigation} />}
</ConversationStack.Screen>
</ConversationStack.Navigator>
);
}
const ChannelsTabScreen = ({ navigation }) => {
const ChannelsTabScreen = ({ navigation, openConversation }) => {
return (
<Channels openConversation={(cardId, channelId) => openConversation(navigation, cardId, channelId)} />
)
}
const ConversationTabScreen = ({ navigation }) => {
return <Conversation closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} />
const ConversationTabScreen = ({ navigation, channel, closeConversation, openDetails }) => {
return <Conversation channel={channel} closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} />
}
const DetailsTabScreen = ({ navigation }) => {
return <Details closeDetails={() => closeDetails(navigation)} />
const DetailsTabScreen = ({ navigation, channel, closeDetails }) => {
return <Details channel={channel} closeDetails={() => closeDetails(navigation)} />
}
const ProfileStackScreen = () => {
return (
@ -129,10 +151,10 @@ export function Session() {
</View>
)
}
const DetailDrawerContent = ({ navigation }) => {
const DetailDrawerContent = ({ channel, navigation }) => {
return (
<SafeAreaView>
<Details closeDetails={() => closeDetails(navigation)} />
<Details channel={channel} closeDetails={() => {}} />
</SafeAreaView>
)
}
@ -148,7 +170,16 @@ export function Session() {
)
}
const HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav }) => {
const HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav, setConversation, setDetail }) => {
const [channel, setChannel] = useState(null);
const setTopic = (cardId, channelId) => {
setChannel({ cardId, channelId });
};
const clearTopic = () => {
setChannel(null);
};
return (
<View style={styles.home}>
<SafeAreaView edges={['top', 'bottom']} style={styles.sidebar}>
@ -163,14 +194,14 @@ export function Session() {
</TouchableOpacity>
</SafeAreaView>
<View style={styles.channels}>
<Channels openConversation={(cardId, channelId) => openConversation(null, cardId, channelId)} />
<Channels openConversation={setTopic} />
</View>
</SafeAreaView>
<View style={styles.conversation}>
{ state.conversationId && (
<Conversation closeConversation={() => closeConversation(null)} openDetails={() => openDetails(detailNav)} />
{ channel && (
<Conversation channel={channel} closeConversation={clearTopic} openDetails={() => setDetail(detailNav, channel)} />
)}
{ !state.conversationId && (
{ !channel && (
<Welcome />
)}
</View>
@ -178,7 +209,7 @@ export function Session() {
)
}
const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact }) => {
const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact, setDetail }) => {
const openRegistry = () => {
registryNav.openDrawer();
@ -188,25 +219,25 @@ export function Session() {
<CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
drawerContent={(props) => <CardDrawerContent setContact={setContact} openRegistry={openRegistry} {...props} />}>
<CardDrawer.Screen name="home">
{(props) => <HomeScreen cardNav={props.navigation} registryNav={registryNav} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} />}
{(props) => <HomeScreen cardNav={props.navigation} registryNav={registryNav} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} setDetail={setDetail} />}
</CardDrawer.Screen>
</CardDrawer.Navigator>
);
};
const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact }) => {
const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact, setDetail }) => {
return (
<RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
drawerContent={(props) => <RegistryDrawerContent setContact={setContact} {...props} />}>
<RegistryDrawer.Screen name="card">
{(props) => <CardDrawerScreen registryNav={props.navigation} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} />}
{(props) => <CardDrawerScreen registryNav={props.navigation} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} setDetail={setDetail} />}
</RegistryDrawer.Screen>
</RegistryDrawer.Navigator>
);
};
const ContactDrawerScreen = ({ detailNav, profileNav }) => {
const ContactDrawerScreen = ({ detailNav, profileNav, setDetail }) => {
const [selected, setSelected] = useState(null);
const setContact = (navigation, contact) => {
@ -218,32 +249,39 @@ export function Session() {
<ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
drawerContent={(props) => <ContactDrawerContent contact={selected} {...props} />}>
<ContactDrawer.Screen name="registry">
{(props) => <RegistryDrawerScreen detailNav={detailNav} profileNav={profileNav} contactNav={props.navigation} setContact={(contact) => setContact(props.navigation, contact)} />}
{(props) => <RegistryDrawerScreen detailNav={detailNav} profileNav={profileNav} contactNav={props.navigation} setContact={(contact) => setContact(props.navigation, contact)} setDetail={setDetail} />}
</ContactDrawer.Screen>
</ContactDrawer.Navigator>
);
}
const ProfileDrawerScreen = ({ detailNav }) => {
const DetailDrawerScreen = ({ profileNav }) => {
const [selected, setSelected] = useState(null);
const setDetail = (navigation, channel) => {
setSelected(channel);
navigation.openDrawer();
};
return (
<ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
drawerContent={(props) => <ProfileDrawerContent {...props} />}>
<ProfileDrawer.Screen name="contact">
{(props) => <ContactDrawerScreen detailNav={detailNav} profileNav={props.navigation}/>}
</ProfileDrawer.Screen>
</ProfileDrawer.Navigator>
<DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
drawerContent={(props) => <DetailDrawerContent channel={selected} {...props} />}>
<DetailDrawer.Screen name="contact">
{(props) => <ContactDrawerScreen profileNav={profileNav} detailNav={props.navigation} setDetail={setDetail} />}
</DetailDrawer.Screen>
</DetailDrawer.Navigator>
);
}
return (
<View style={styles.container}>
{ state.tabbed === false && (
<DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
drawerContent={(props) => <DetailDrawerContent {...props} />}>
<DetailDrawer.Screen name="profile">
{(props) => <ProfileDrawerScreen detailNav={props.navigation} />}
</DetailDrawer.Screen>
</DetailDrawer.Navigator>
<ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
drawerContent={(props) => <ProfileDrawerContent {...props} />}>
<ProfileDrawer.Screen name="detail">
{(props) => <DetailDrawerScreen profileNav={props.navigation}/>}
</ProfileDrawer.Screen>
</ProfileDrawer.Navigator>
)}
{ state.tabbed === true && (
<Tab.Navigator

6
app/mobile/src/session/channels/Channels.jsx
View File

@ -7,7 +7,7 @@ import { ChannelItem } from './channelItem/ChannelItem';
import Colors from 'constants/Colors';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
export function Channels() {
export function Channels({ openConversation }) {
const { state, actions } = useChannels();
return (
<View style={styles.container}>
@ -27,7 +27,7 @@ export function Channels() {
</View>
<FlatList style={styles.channels}
data={state.channels}
renderItem={({ item }) => <ChannelItem item={item} />}
renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
/>
</>
@ -45,7 +45,7 @@ export function Channels() {
<SafeAreaView style={styles.channels} edges={['left']}>
<FlatList
data={state.channels}
renderItem={({ item }) => <ChannelItem item={item} />}
renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
/>
</SafeAreaView>

4
app/mobile/src/session/channels/channelItem/ChannelItem.jsx
View File

@ -3,12 +3,12 @@ import { Logo } from 'utils/Logo';
import { styles } from './ChannelItem.styled';
import { useChannelItem } from './useChannelItem.hook';
export function ChannelItem({ item }) {
export function ChannelItem({ item, openConversation }) {
const { state, actions } = useChannelItem(item);
return (
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={actions.setRead}>
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => openConversation(item.cardId, item.channelId)}>
<Logo src={item.logo} width={32} height={32} radius={6} />
<View style={styles.detail}>
<Text style={styles.subject} numberOfLines={1} ellipsizeMode={'tail'}>{ item.subject }</Text>

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

@ -1,4 +1,23 @@
export function Conversation() {
return <></>
import { View, TouchableOpacity, Text } from 'react-native';
export function Conversation({ channel, closeConversation, openDetails }) {
return (
<View>
<Text>CHANNEL</Text>
{ channel && (
<>
<Text>{ channel.cardId }</Text>
<Text>{ channel.channelId }</Text>
</>
)}
<TouchableOpacity onPress={openDetails}>
<Text>DETAILS</Text>
</TouchableOpacity>
<TouchableOpacity onPress={closeConversation}>
<Text>CLOSE</Text>
</TouchableOpacity>
</View>
);
}

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

@ -1,4 +1,19 @@
export function Details() {
return <></>
import { View, Text, TouchableOpacity } from 'react-native';
export function Details({ channel, closeDetails }) {
return (
<View>
<Text>DETAILS</Text>
{ channel && (
<>
<Text>{ channel.cardId }</Text>
<Text>{ channel.channelId }</Text>
</>
)}
<TouchableOpacity onPress={closeDetails}>
<Text>CLOSE</Text>
</TouchableOpacity>
</View>
)
}

2
app/mobile/src/session/profile/Profile.jsx
View File

@ -133,7 +133,7 @@ export function Profile() {
<Text style={styles.linkText}>Manage Blocked Contacts</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.link} onPress={actions.showBlockedChannels}>
<Text style={styles.linkText}>Manager Blocked Topics</Text>
<Text style={styles.linkText}>Manage Blocked Topics</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.logout} onPress={logout}>
<Ionicons name="logout" size={14} color={Colors.white} />

1
app/mobile/src/session/profile/Profile.styled.js
View File

@ -23,6 +23,7 @@ export const styles = StyleSheet.create({
fontSize: 16,
paddingRight: 4,
textDecorationLine: 'underline',
color: Colors.primary,
},
camera: {
position: 'absolute',