From dc114c545bb74a16d92eff0ab4fdd55ad505f20c Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 24 Sep 2022 17:44:08 -0700
Subject: [PATCH] connecting contact screen/drawer

---
 app/mobile/src/session/Session.jsx            | 45 ++++++++-----------
 app/mobile/src/session/cards/Cards.jsx        |  6 +--
 .../src/session/cards/cardItem/CardItem.jsx   |  8 +++-
 app/mobile/src/session/registry/Registry.jsx  | 24 +++++++---
 .../registry/registryItem/RegistryItem.jsx    |  8 +++-
 .../src/session/registry/useRegistry.hook.js  |  7 ++-
 6 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 9c8c34ec..84d7c39f 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@@ -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>
     );
diff --git a/app/mobile/src/session/cards/Cards.jsx b/app/mobile/src/session/cards/Cards.jsx
index f31f2aa8..3c78c7ac 100644
--- a/app/mobile/src/session/cards/Cards.jsx
+++ b/app/mobile/src/session/cards/Cards.jsx
@@ -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>
diff --git a/app/mobile/src/session/cards/cardItem/CardItem.jsx b/app/mobile/src/session/cards/cardItem/CardItem.jsx
index 30037df2..a2f34607 100644
--- a/app/mobile/src/session/cards/cardItem/CardItem.jsx
+++ b/app/mobile/src/session/cards/cardItem/CardItem.jsx
@@ -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>
diff --git a/app/mobile/src/session/registry/Registry.jsx b/app/mobile/src/session/registry/Registry.jsx
index 5e92e34c..e9c46f3a 100644
--- a/app/mobile/src/session/registry/Registry.jsx
+++ b/app/mobile/src/session/registry/Registry.jsx
@@ -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>
diff --git a/app/mobile/src/session/registry/registryItem/RegistryItem.jsx b/app/mobile/src/session/registry/registryItem/RegistryItem.jsx
index 01b5748a..e8285c34 100644
--- a/app/mobile/src/session/registry/registryItem/RegistryItem.jsx
+++ b/app/mobile/src/session/registry/registryItem/RegistryItem.jsx
@@ -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>
diff --git a/app/mobile/src/session/registry/useRegistry.hook.js b/app/mobile/src/session/registry/useRegistry.hook.js
index 6a11208d..f4bf430e 100644
--- a/app/mobile/src/session/registry/useRegistry.hook.js
+++ b/app/mobile/src/session/registry/useRegistry.hook.js
@@ -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 };