From f6087e7f1e7db4dc00b62faf897eafab68db1de9 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Mon, 27 Jun 2022 13:29:37 -0700
Subject: [PATCH] display full node if different

---
 .../src/User/SideBar/Contacts/Cards/Cards.jsx    | 16 ++++++++++++----
 .../User/SideBar/Contacts/Cards/Cards.styled.js  |  2 +-
 .../User/SideBar/Contacts/Cards/useCards.hook.js |  7 +++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
index 25b76e6c..fa80ea01 100644
--- a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
+++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
@@ -9,9 +9,6 @@ export function Cards({ showRegistry }) {
 
   const { state, actions } = useCards();
 
-  useEffect(() => {
-  }, [showRegistry]);
-
   const onSelect = (item) => {
     actions.select(item);
   }
@@ -30,6 +27,17 @@ export function Cards({ showRegistry }) {
     return null
   }
 
+  const cardHandle = (item) => {
+    const profile = item.data?.cardProfile
+    if (profile) {
+      if (profile.node == state.node) {
+        return profile.handle;
+      }
+      return profile.handle + '@' + profile.node;
+    }
+    return null; 
+  }
+
   return (
     <CardsWrapper>
       <Drawer
@@ -56,7 +64,7 @@ export function Cards({ showRegistry }) {
                   imageSet={cardProfile(item).imageSet} />
               </div>
               <div class="username">
-                <span class="handle">{ cardProfile(item).handle }</span>
+                <span class="handle">{ cardHandle(item) }</span>
                 <span class="name">{ cardProfile(item).name }</span>
               </div>
             </div>
diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js b/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js
index 25d8f7c1..242bfca6 100644
--- a/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js
+++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js
@@ -46,7 +46,7 @@ export const CardItem = styled(List.Item)`
   }
 
   .handle {
-    font-size: 0.9em;
+    font-size: 0.7em;
     font-weight: bold;
   }
 `;
diff --git a/net/web/src/User/SideBar/Contacts/Cards/useCards.hook.js b/net/web/src/User/SideBar/Contacts/Cards/useCards.hook.js
index 065ed933..9fa00b30 100644
--- a/net/web/src/User/SideBar/Contacts/Cards/useCards.hook.js
+++ b/net/web/src/User/SideBar/Contacts/Cards/useCards.hook.js
@@ -1,15 +1,18 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
+import { ProfileContext } from 'context/ProfileContext';
 import { useNavigate } from 'react-router-dom';
 
 export function useCards() {
   
   const [state, setState] = useState({
     cards: [],
+    node: null,
   });
 
   const navigate = useNavigate();
   const card = useContext(CardContext);
+  const profile = useContext(ProfileContext);
 
   const actions = {
     getImageUrl: card.actions.getImageUrl,
@@ -45,5 +48,9 @@ export function useCards() {
     })});
   }, [card])
 
+  useEffect(() => {
+    updateState({ node: profile.state?.profile?.node });
+  }, [profile])
+
   return { state, actions };
 }