From e95474d304b2616fd057a323e57745f7846a53aa Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Thu, 18 Aug 2022 12:57:54 -0700
Subject: [PATCH] adding contact status label

---
 net/web/src/session/bottomNav/BottomNav.jsx    |  2 +-
 net/web/src/session/contact/Contact.jsx        | 11 +++++++++--
 net/web/src/session/contact/Contact.styled.js  |  8 ++++++++
 net/web/src/session/contact/useContact.hook.js |  4 ++--
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/net/web/src/session/bottomNav/BottomNav.jsx b/net/web/src/session/bottomNav/BottomNav.jsx
index daafef0b..856a78ac 100644
--- a/net/web/src/session/bottomNav/BottomNav.jsx
+++ b/net/web/src/session/bottomNav/BottomNav.jsx
@@ -4,7 +4,7 @@ import { CommentOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
 export function BottomNav({ state, actions }) {
 
   const tab = () => {
-    if (state.profile) {
+    if (state.profile || state.account) {
       return 'profile';
     }
     if (state.cards || state.contact) {
diff --git a/net/web/src/session/contact/Contact.jsx b/net/web/src/session/contact/Contact.jsx
index 483d63db..8e56ec0a 100644
--- a/net/web/src/session/contact/Contact.jsx
+++ b/net/web/src/session/contact/Contact.jsx
@@ -76,14 +76,14 @@ export function Contact({ close, guid, listing }) {
         </div>
       )}
 
-      { state.status === 'confirmed' && (
+      { state.status === 'saved' && (
         <div class="controls">
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Request Connection</div>
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Delete Contact</div>
         </div>
       )}
 
-      { state.status === 'disconnected' && (
+      { state.status === 'unsaved' && (
         <div class="controls">
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveContact)}>Save Contact</div>
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Save and Request</div>
@@ -108,6 +108,10 @@ export function Contact({ close, guid, listing }) {
             { Image }
             { Details }
           </div>
+
+          <div class="footer">
+            <div class="status">Status: { state.status }</div>
+          </div>
         </>
       )}
       { state.init && state.display !== 'xlarge' && (
@@ -125,6 +129,9 @@ export function Contact({ close, guid, listing }) {
           </div>
           { Image }
           { Details }
+          <div class="footer">
+            <div class="status">Status: { state.status }</div>
+          </div>
         </div>
       )}
     </ContactWrapper>
diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js
index a98df5c2..101ec262 100644
--- a/net/web/src/session/contact/Contact.styled.js
+++ b/net/web/src/session/contact/Contact.styled.js
@@ -203,5 +203,13 @@ export const ContactWrapper = styled.div`
       opacity: 0.5;
     }
   }
+
+  .footer {
+    flex-grow: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 16px;
+  }
 `
 
diff --git a/net/web/src/session/contact/useContact.hook.js b/net/web/src/session/contact/useContact.hook.js
index ceea27de..2bf9b21c 100644
--- a/net/web/src/session/contact/useContact.hook.js
+++ b/net/web/src/session/contact/useContact.hook.js
@@ -43,7 +43,7 @@ export function useContact(guid, listing, close) {
       name = cardProfile.name;
       location = cardProfile.location;
       description = cardProfile.description;
-      status = cardDetail.status;
+      status = cardDetail.status === 'confirmed' ? 'saved' : cardDetail.status;
     }
     else if (listing) {
       handle = listing.handle;
@@ -53,7 +53,7 @@ export function useContact(guid, listing, close) {
       name = listing.name;
       location = listing.location;
       description = listing.description;
-      status = 'disconnected';
+      status = 'unsaved';
     }
     else {
       updateState({ removed: true });