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 [cardId, setCardId] = useState(null);
const setCardStack = (navigation, id) => {
setCardId(id);
navigation.navigate('card')
const [selected, setSelected] = useState(null);
const setCardStack = (navigation, contact) => {
setSelected(contact);
navigation.navigate('contact')
}
const clearCardStack = (navigation) => {
navigation.goBack();
@ -94,13 +94,13 @@ export function Session() {
return (
<ContactStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
<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 name="card">
{(props) => <Contact cardId={cardId} closeContact={() => clearCardStack(props.navigation)} />}
<ContactStack.Screen name="contact">
{(props) => <Contact contact={selected} closeContact={() => clearCardStack(props.navigation)} />}
</ContactStack.Screen>
<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.Navigator>
);
@ -180,20 +180,15 @@ export function Session() {
const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact }) => {
const setCardDrawer = (cardId) => {
setContact(cardId);
contactNav.openDrawer();
}
const openRegistry = () => {
registryNav.openDrawer();
}
return (
<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">
{(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.Navigator>
);
@ -201,16 +196,11 @@ export function Session() {
const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact }) => {
const setRegistryDrawer = (cardId) => {
setContact(cardId);
contactNav.openDrawer();
}
return (
<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">
{(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.Navigator>
);
@ -218,16 +208,17 @@ export function Session() {
const ContactDrawerScreen = ({ detailNav, profileNav }) => {
const [cardId, setCardId] = useState(null);
const setContact = (id) => {
setCardId(id);
const [selected, setSelected] = useState(null);
const setContact = (navigation, contact) => {
setSelected(contact);
navigation.openDrawer();
}
return (
<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">
{(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.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 Colors from 'constants/Colors';
export function Cards({ openRegistry }) {
export function Cards({ openRegistry, openContact }) {
const { state, actions } = useCards();
return (
<View style={styles.container}>
@ -37,7 +37,7 @@ export function Cards({ openRegistry }) {
</View>
<FlatList style={styles.cards}
data={state.cards}
renderItem={({ item }) => <CardItem item={item} />}
renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
keyExtractor={item => item.cardId}
/>
</>
@ -66,7 +66,7 @@ export function Cards({ openRegistry }) {
</View>
<FlatList style={styles.cards}
data={state.cards}
renderItem={({ item }) => <CardItem item={item} />}
renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
keyExtractor={item => item.cardId}
/>
</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 { useCardItem } from './useCardItem.hook';
export function CardItem({ item }) {
export function CardItem({ item, openContact }) {
const { state, actions } = useCardItem(item);
const select = () => {
openContact({ card: item });
};
return (
<View>
{ 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} />
<View style={styles.detail}>
<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 { 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 { useRegistry } from './useRegistry.hook';
import { SafeAreaView } from 'react-native-safe-area-context';
@ -8,6 +8,20 @@ import { RegistryItem } from './registryItem/RegistryItem';
import Colors from 'constants/Colors';
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();
return (
<View style={styles.container}>
@ -20,7 +34,7 @@ export function Registry({ closeRegistry, openContact }) {
</View>
)}
{ !state.busy && (
<TouchableOpacity style={styles.search} onPress={actions.search}>
<TouchableOpacity style={styles.search} onPress={search}>
<Ionicons name={'search1'} size={16} color={Colors.white} />
</TouchableOpacity>
)}
@ -35,7 +49,7 @@ export function Registry({ closeRegistry, openContact }) {
</View>
<FlatList style={styles.accounts}
data={state.accounts}
renderItem={({ item }) => <RegistryItem item={item} />}
renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
keyExtractor={item => item.guid}
/>
</>
@ -50,7 +64,7 @@ export function Registry({ closeRegistry, openContact }) {
</View>
)}
{ !state.busy && (
<TouchableOpacity style={styles.search} onPress={actions.search}>
<TouchableOpacity style={styles.search} onPress={search}>
<Ionicons name={'search1'} size={16} color={Colors.white} />
</TouchableOpacity>
)}
@ -62,7 +76,7 @@ export function Registry({ closeRegistry, openContact }) {
</View>
<FlatList style={styles.accounts}
data={state.accounts}
renderItem={({ item }) => <RegistryItem item={item} />}
renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
keyExtractor={item => item.guid}
/>
</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 { useRegistryItem } from './useRegistryItem.hook';
export function RegistryItem({ item }) {
export function RegistryItem({ item, openContact }) {
const { state, actions } = useRegistryItem(item);
const select = () => {
openContact({ account: item });
}
return (
<View>
{ 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} />
<View style={styles.detail}>
<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 = {
setServer: (filter) => {
updateState({ filter });
setServer: (server) => {
updateState({ server, accounts: [] });
},
search: async () => {
await getAccounts(state.server, false);
}
};
return { state, actions };