From 3c08040f7b7145485de10990a6c4b3f81b818758 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 1 Jan 2025 21:41:48 -0800
Subject: [PATCH] adding save and connect button for new contacts

---
 app/client/mobile/src/profile/Profile.tsx        | 16 ++++++++++++++++
 app/client/mobile/src/profile/useProfile.hook.ts |  5 +++++
 app/client/web/src/StagingFiles.ts               |  2 +-
 app/client/web/src/profile/Profile.tsx           | 14 ++++++++++++++
 app/client/web/src/profile/useProfile.hook.ts    |  5 +++++
 app/sdk/src/contact.ts                           |  3 ++-
 6 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/app/client/mobile/src/profile/Profile.tsx b/app/client/mobile/src/profile/Profile.tsx
index c9ddf8a8..61e09d78 100644
--- a/app/client/mobile/src/profile/Profile.tsx
+++ b/app/client/mobile/src/profile/Profile.tsx
@@ -33,6 +33,7 @@ export function Profile({close, params}: {close: () => void; params: ContactPara
   const [disconnecting, setDisconnecting] = useState(false);
   const [canceling, setCanceling] = useState(false);
   const [accepting, setAccepting] = useState(false);
+  const [connecting, setConnecting] = useState(false);
 
   const confirmAction = (title: string, prompt: string, label: string, loading: (boolean) => void, action: () => Promise<void>) => {
     setConfirmParams({
@@ -82,6 +83,7 @@ export function Profile({close, params}: {close: () => void; params: ContactPara
           action: () => setConfirmShow(false),
         },
       });
+      setConfirmShow(true);
     }
   };
 
@@ -135,6 +137,20 @@ export function Profile({close, params}: {close: () => void; params: ContactPara
 
             {state.statusLabel === 'unknownStatus' && (
               <View style={styles.actions}>
+                <View style={styles.action}>
+                  <IconButton
+                    style={styles.actionIcon}
+                    loading={connecting}
+                    compact="true"
+                    mode="contained"
+                    icon="electric-switch-closed"
+                    size={32}
+                    onPress={() => {
+                      applyAction(setConnecting, actions.saveAndConnect);
+                    }}
+                  />
+                  <Text style={styles.actionLabel}>{state.strings.connect}</Text>
+                </View>
                 <View style={styles.action}>
                   <IconButton
                     style={styles.actionIcon}
diff --git a/app/client/mobile/src/profile/useProfile.hook.ts b/app/client/mobile/src/profile/useProfile.hook.ts
index de93be6c..247aef44 100644
--- a/app/client/mobile/src/profile/useProfile.hook.ts
+++ b/app/client/mobile/src/profile/useProfile.hook.ts
@@ -117,6 +117,11 @@ export function useProfile(params: ContactParams) {
       const contact = app.state.session?.getContact();
       await contact.addCard(state.node, state.guid);
     },
+    saveAndConnect: async () => {
+      const contact = app.state.session?.getContact();
+      const added = await contact.addCard(state.node, state.guid);
+      await contact.connectCard(added);
+    },
     remove: async () => {
       const contact = app.state.session?.getContact();
       await contact.removeCard(state.cardId);
diff --git a/app/client/web/src/StagingFiles.ts b/app/client/web/src/StagingFiles.ts
index 6ad0785e..a846cfe8 100644
--- a/app/client/web/src/StagingFiles.ts
+++ b/app/client/web/src/StagingFiles.ts
@@ -2,7 +2,7 @@ import { Staging } from 'databag-client-sdk'
 
 export class StagingFiles implements Staging {
 
-  public clear(): Promise<void> {}
+  public async clear(): Promise<void> {}
 
   private base64ToUint8Array(base64: string): Uint8Array {
     var binaryString = atob(base64);
diff --git a/app/client/web/src/profile/Profile.tsx b/app/client/web/src/profile/Profile.tsx
index 919ea552..dae66a5a 100644
--- a/app/client/web/src/profile/Profile.tsx
+++ b/app/client/web/src/profile/Profile.tsx
@@ -185,6 +185,14 @@ export function Profile({ params, showClose, close }: { params: ProfileParams; s
     }
   }
 
+  const applySaveAndConnect = async () => {
+    if (!connecting) {
+      setConnecting(true)
+      await setAction(actions.saveAndConnect)
+      setConnecting(false)
+    }
+  }
+
   const applyConfirm = async () => {
     if (!confirming) {
       setConfirming(true)
@@ -270,6 +278,12 @@ export function Profile({ params, showClose, close }: { params: ProfileParams; s
         </div>
         {state.statusLabel === 'unknownStatus' && (
           <div className={classes.actions}>
+            <div className={classes.action} onClick={applySaveAndConnect}>
+              <ActionIcon variant="subtle" loading={connecting} size={32}>
+                <IconRoute2 size={32} />
+              </ActionIcon>
+              <Text className={classes.actionLabel}>{state.strings.connect}</Text>
+            </div>
             <div className={classes.action} onClick={applySave}>
               <ActionIcon variant="subtle" loading={saving} size={32}>
                 <IconDeviceFloppy size={32} />
diff --git a/app/client/web/src/profile/useProfile.hook.ts b/app/client/web/src/profile/useProfile.hook.ts
index 59799f7a..ead5b75a 100644
--- a/app/client/web/src/profile/useProfile.hook.ts
+++ b/app/client/web/src/profile/useProfile.hook.ts
@@ -95,6 +95,11 @@ export function useProfile(params: ProfileParams) {
       const contact = app.state.session?.getContact()
       await contact.addCard(state.node, state.guid)
     },
+    saveAndConnect: async () => {
+      const contact = app.state.session?.getContact();
+      const added = await contact.addCard(state.node, state.guid);
+      await contact.connectCard(added);
+    },
     remove: async () => {
       const contact = app.state.session?.getContact()
       await contact.removeCard(state.cardId)
diff --git a/app/sdk/src/contact.ts b/app/sdk/src/contact.ts
index e796c13c..5cfb0300 100644
--- a/app/sdk/src/contact.ts
+++ b/app/sdk/src/contact.ts
@@ -752,7 +752,8 @@ export class ContactModule implements Contact {
     const { node, secure, token } = this;
     const insecure = server ? /^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|:\d+$|$)){4}$/.test(server) : false;
     const message = server ? await getContactListing(server, !insecure, guid) : await getContactListing(node, secure, guid);
-    return await addCard(node, secure, token, message);
+    const added = await addCard(node, secure, token, message);
+    return added.id;
   }
 
   public async removeCard(cardId: string): Promise<void> {