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

merging back channels screen in mobile app

Browse Source
This commit is contained in:
balzack 2023-02-25 16:48:05 -08:00
parent d1d5431fbd
commit 3efa83f1c6
4 changed files with 147 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 /> }}>
{(props) => <ChannelsBody openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
<ConversationStack.Screen name="channels" options={stackParams}>
{(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} /> }}>

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

@ -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 }) {
return <Text>ChannelsTitle</Text>
}
export function ChannelsBody({ state, actions, openConversation }) {
return <Text>ChannelsBody</Text>
}
export function Channels({ openConversation }) {
return <Text>Channels</Text>;
export function Channels({ navigation, openConversation }) {
const { state, actions } = useChannels();
useEffect(() => {
if (navigation) {
navigation.setOptions({
headerTitle: () => (
<View style={styles.title}>
<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>
);
}

79
app/mobile/src/session/channels/Channels.styled.js Normal file
View File

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

13
app/mobile/src/session/channels/useChannels.hook.js
View File

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