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

connecting contact screen/drawer

Browse Source
This commit is contained in:
balzack 2022-09-24 17:44:08 -07:00
parent 822d333401
commit dc114c545b
6 changed files with 57 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,10 +76,10 @@ export function Session() {
); );
} }
const ContactStackScreen = () => { const ContactStackScreen = () => {
const [cardId, setCardId] = useState(null); const [selected, setSelected] = useState(null);
const setCardStack = (navigation, id) => { const setCardStack = (navigation, contact) => {
setCardId(id); setSelected(contact);
navigation.navigate('card') navigation.navigate('contact')
} }
const clearCardStack = (navigation) => { const clearCardStack = (navigation) => {
navigation.goBack(); navigation.goBack();
@ -94,13 +94,13 @@ export function Session() {
return ( return (
<ContactStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}> <ContactStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
<ContactStack.Screen name="cards"> <ContactStack.Screen name="cards">
{(props) => <Cards openRegistry={() => setRegistryStack(props.navigation)} openContact={(cardId) => setCardStack(props.navigation, cardId)} />} {(props) => <Cards openRegistry={() => setRegistryStack(props.navigation)} openContact={(contact) => setCardStack(props.navigation, contact)} />}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen name="card"> <ContactStack.Screen name="contact">
{(props) => <Contact cardId={cardId} closeContact={() => clearCardStack(props.navigation)} />} {(props) => <Contact contact={selected} closeContact={() => clearCardStack(props.navigation)} />}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen name="registry"> <ContactStack.Screen name="registry">
{(props) => <Registry closeRegistry={() => clearRegistryStack(props.navigation)} />} {(props) => <Registry closeRegistry={() => clearRegistryStack(props.navigation)} openContact={(contact) => setCardStack(props.navigation, contact)} />}
</ContactStack.Screen> </ContactStack.Screen>
</ContactStack.Navigator> </ContactStack.Navigator>
); );
@ -180,20 +180,15 @@ export function Session() {
const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact }) => { const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact }) => {
const setCardDrawer = (cardId) => {
setContact(cardId);
contactNav.openDrawer();
}
const openRegistry = () => { const openRegistry = () => {
registryNav.openDrawer(); registryNav.openDrawer();
} }
return ( return (
<CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }} <CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
drawerContent={(props) => <CardDrawerContent setContact={setCardDrawer} openRegistry={openRegistry} {...props} />}> drawerContent={(props) => <CardDrawerContent setContact={setContact} openRegistry={openRegistry} {...props} />}>
<CardDrawer.Screen name="home"> <CardDrawer.Screen name="home">
{(props) => <HomeScreen cardNav={props.navigation} registryNav={registryNav} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} />} {(props) => <HomeScreen cardNav={props.navigation} registryNav={registryNav} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} />}
</CardDrawer.Screen> </CardDrawer.Screen>
</CardDrawer.Navigator> </CardDrawer.Navigator>
); );
@ -201,16 +196,11 @@ export function Session() {
const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact }) => { const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact }) => {
const setRegistryDrawer = (cardId) => {
setContact(cardId);
contactNav.openDrawer();
}
return ( return (
<RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }} <RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
drawerContent={(props) => <RegistryDrawerContent setContact={setRegistryDrawer} {...props} />}> drawerContent={(props) => <RegistryDrawerContent setContact={setContact} {...props} />}>
<RegistryDrawer.Screen name="card"> <RegistryDrawer.Screen name="card">
{(props) => <CardDrawerScreen registryNav={props.navigation} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} />} {(props) => <CardDrawerScreen registryNav={props.navigation} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} setContact={setContact} />}
</RegistryDrawer.Screen> </RegistryDrawer.Screen>
</RegistryDrawer.Navigator> </RegistryDrawer.Navigator>
); );
@ -218,16 +208,17 @@ export function Session() {
const ContactDrawerScreen = ({ detailNav, profileNav }) => { const ContactDrawerScreen = ({ detailNav, profileNav }) => {
const [cardId, setCardId] = useState(null); const [selected, setSelected] = useState(null);
const setContact = (id) => { const setContact = (navigation, contact) => {
setCardId(id); setSelected(contact);
navigation.openDrawer();
} }
return ( return (
<ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }} <ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
drawerContent={(props) => <ContactDrawerContent cardId={cardId} {...props} />}> drawerContent={(props) => <ContactDrawerContent contact={selected} {...props} />}>
<ContactDrawer.Screen name="registry"> <ContactDrawer.Screen name="registry">
{(props) => <RegistryDrawerScreen detailNav={detailNav} profileNav={profileNav} contactNav={props.navigation} setContact={setContact} />} {(props) => <RegistryDrawerScreen detailNav={detailNav} profileNav={profileNav} contactNav={props.navigation} setContact={(contact) => setContact(props.navigation, contact)} />}
</ContactDrawer.Screen> </ContactDrawer.Screen>
</ContactDrawer.Navigator> </ContactDrawer.Navigator>
); );

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

@ -7,7 +7,7 @@ import Ionicons from '@expo/vector-icons/AntDesign';
import { CardItem } from './cardItem/CardItem'; import { CardItem } from './cardItem/CardItem';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
export function Cards({ openRegistry }) { export function Cards({ openRegistry, openContact }) {
const { state, actions } = useCards(); const { state, actions } = useCards();
return ( return (
<View style={styles.container}> <View style={styles.container}>
@ -37,7 +37,7 @@ export function Cards({ openRegistry }) {
</View> </View>
<FlatList style={styles.cards} <FlatList style={styles.cards}
data={state.cards} data={state.cards}
renderItem={({ item }) => <CardItem item={item} />} renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
keyExtractor={item => item.cardId} keyExtractor={item => item.cardId}
/> />
</> </>
@ -66,7 +66,7 @@ export function Cards({ openRegistry }) {
</View> </View>
<FlatList style={styles.cards} <FlatList style={styles.cards}
data={state.cards} data={state.cards}
renderItem={({ item }) => <CardItem item={item} />} renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
keyExtractor={item => item.cardId} keyExtractor={item => item.cardId}
/> />
</SafeAreaView> </SafeAreaView>

8
app/mobile/src/session/cards/cardItem/CardItem.jsx
View File

@ -3,14 +3,18 @@ import { Logo } from 'utils/Logo';
import { styles } from './CardItem.styled'; import { styles } from './CardItem.styled';
import { useCardItem } from './useCardItem.hook'; import { useCardItem } from './useCardItem.hook';
export function CardItem({ item }) { export function CardItem({ item, openContact }) {
const { state, actions } = useCardItem(item); const { state, actions } = useCardItem(item);
const select = () => {
openContact({ card: item });
};
return ( return (
<View> <View>
{ item.cardId && ( { item.cardId && (
<TouchableOpacity style={styles.container} activeOpacity={1}> <TouchableOpacity style={styles.container} activeOpacity={1} onPress={select}>
<Logo src={item.logo} width={32} height={32} radius={6} /> <Logo src={item.logo} width={32} height={32} radius={6} />
<View style={styles.detail}> <View style={styles.detail}>
<Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text> <Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>

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

@ -1,5 +1,5 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { ActivityIndicator, FlatList, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native'; import { ActivityIndicator, Alert, FlatList, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { styles } from './Registry.styled'; import { styles } from './Registry.styled';
import { useRegistry } from './useRegistry.hook'; import { useRegistry } from './useRegistry.hook';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
@ -8,6 +8,20 @@ import { RegistryItem } from './registryItem/RegistryItem';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
export function Registry({ closeRegistry, openContact }) { export function Registry({ closeRegistry, openContact }) {
const search = async () => {
try {
await actions.search();
}
catch (err) {
console.log(err);
Alert.alert(
'Server Listing Failed',
'Please try again.'
);
}
}
const { state, actions } = useRegistry(); const { state, actions } = useRegistry();
return ( return (
<View style={styles.container}> <View style={styles.container}>
@ -20,7 +34,7 @@ export function Registry({ closeRegistry, openContact }) {
</View> </View>
)} )}
{ !state.busy && ( { !state.busy && (
<TouchableOpacity style={styles.search} onPress={actions.search}> <TouchableOpacity style={styles.search} onPress={search}>
<Ionicons name={'search1'} size={16} color={Colors.white} /> <Ionicons name={'search1'} size={16} color={Colors.white} />
</TouchableOpacity> </TouchableOpacity>
)} )}
@ -35,7 +49,7 @@ export function Registry({ closeRegistry, openContact }) {
</View> </View>
<FlatList style={styles.accounts} <FlatList style={styles.accounts}
data={state.accounts} data={state.accounts}
renderItem={({ item }) => <RegistryItem item={item} />} renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
keyExtractor={item => item.guid} keyExtractor={item => item.guid}
/> />
</> </>
@ -50,7 +64,7 @@ export function Registry({ closeRegistry, openContact }) {
</View> </View>
)} )}
{ !state.busy && ( { !state.busy && (
<TouchableOpacity style={styles.search} onPress={actions.search}> <TouchableOpacity style={styles.search} onPress={search}>
<Ionicons name={'search1'} size={16} color={Colors.white} /> <Ionicons name={'search1'} size={16} color={Colors.white} />
</TouchableOpacity> </TouchableOpacity>
)} )}
@ -62,7 +76,7 @@ export function Registry({ closeRegistry, openContact }) {
</View> </View>
<FlatList style={styles.accounts} <FlatList style={styles.accounts}
data={state.accounts} data={state.accounts}
renderItem={({ item }) => <RegistryItem item={item} />} renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
keyExtractor={item => item.guid} keyExtractor={item => item.guid}
/> />
</SafeAreaView> </SafeAreaView>

8
app/mobile/src/session/registry/registryItem/RegistryItem.jsx
View File

@ -3,14 +3,18 @@ import { Logo } from 'utils/Logo';
import { styles } from './RegistryItem.styled'; import { styles } from './RegistryItem.styled';
import { useRegistryItem } from './useRegistryItem.hook'; import { useRegistryItem } from './useRegistryItem.hook';
export function RegistryItem({ item }) { export function RegistryItem({ item, openContact }) {
const { state, actions } = useRegistryItem(item); const { state, actions } = useRegistryItem(item);
const select = () => {
openContact({ account: item });
}
return ( return (
<View> <View>
{ item.guid && ( { item.guid && (
<TouchableOpacity style={styles.container} activeOpacity={1}> <TouchableOpacity style={styles.container} activeOpacity={1} onPress={select}>
<Logo src={item.logo} width={32} height={32} radius={6} /> <Logo src={item.logo} width={32} height={32} radius={6} />
<View style={styles.detail}> <View style={styles.detail}>
<Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text> <Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>

7
app/mobile/src/session/registry/useRegistry.hook.js
View File

@ -72,9 +72,12 @@ export function useRegistry() {
}; };
const actions = { const actions = {
setServer: (filter) => { setServer: (server) => {
updateState({ filter }); updateState({ server, accounts: [] });
}, },
search: async () => {
await getAccounts(state.server, false);
}
}; };
return { state, actions }; return { state, actions };