From 3fc130b5c8ed3be3e62b0e7aff58daf1c9c989ee Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Mon, 15 Aug 2022 10:13:56 -0700
Subject: [PATCH] rendering contact error status

---
 net/web/src/constants/Colors.js                     |  1 +
 net/web/src/context/useCardContext.hook.js          |  5 ++---
 net/web/src/session/cards/cardItem/CardItem.jsx     | 13 ++++++++++++-
 .../src/session/cards/cardItem/CardItem.styled.js   | 10 ++++++++++
 .../src/session/cards/cardItem/useCardItem.hook.js  |  8 ++++++++
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 0e62ed6c..cc594bdd 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -18,6 +18,7 @@ const Colors = {
   requested: '#4488ff',
   pending: '#22aaaa',
   confirmed: '#aaaaaa',
+  error: '#ff4444',
 };
 
 export default Colors;
diff --git a/net/web/src/context/useCardContext.hook.js b/net/web/src/context/useCardContext.hook.js
index c5bcb3f3..9c055728 100644
--- a/net/web/src/context/useCardContext.hook.js
+++ b/net/web/src/context/useCardContext.hook.js
@@ -206,7 +206,6 @@ export function useCardContext() {
         }
         catch (err) {
           console.log(err);
-          window.alert("failed to connect to contact");
         }
       } 
      
@@ -360,9 +359,9 @@ export function useCardContext() {
       let token = card.data.cardProfile.guid + "." + card.data.cardDetail.token;
       return getContactChannelTopicAssetUrl(node, token, channelId, topicId, assetId);
     },
-    resync: (cardId) => {
+    resync: async (cardId) => {
       resync.current.push(cardId);
-      setCards(null);
+      await setCards(null);
     }
   }
 
diff --git a/net/web/src/session/cards/cardItem/CardItem.jsx b/net/web/src/session/cards/cardItem/CardItem.jsx
index 5318a10a..f610f3b4 100644
--- a/net/web/src/session/cards/cardItem/CardItem.jsx
+++ b/net/web/src/session/cards/cardItem/CardItem.jsx
@@ -1,7 +1,11 @@
-import { CardItemWrapper, StatusConnected, StatusConnecting, StatusRequested, StatusPending, StatusConfirmed} from './CardItem.styled';
+import { CardItemWrapper, StatusError,
+        StatusConnected, StatusConnecting, 
+        StatusRequested, StatusPending, 
+        StatusConfirmed} from './CardItem.styled';
 import { useCardItem } from './useCardItem.hook';
 import { Logo } from 'logo/Logo';
 import { Tooltip } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 export function CardItem({ item }) {
 
@@ -24,6 +28,13 @@ export function CardItem({ item }) {
         <div class="handle">{ handle() }</div>
       </div>
       <div class="markup">
+        { !state.resync && item.error && (
+          <Tooltip placement="left" title="sync error">
+            <StatusError onClick={actions.resync}>
+              <ExclamationCircleOutlined />
+            </StatusError>
+          </Tooltip>
+        )}
         { detail?.status === 'connected' && (
           <Tooltip placement="left" title="connected contact">
             <StatusConnected />
diff --git a/net/web/src/session/cards/cardItem/CardItem.styled.js b/net/web/src/session/cards/cardItem/CardItem.styled.js
index c321b65f..8551fae9 100644
--- a/net/web/src/session/cards/cardItem/CardItem.styled.js
+++ b/net/web/src/session/cards/cardItem/CardItem.styled.js
@@ -42,9 +42,19 @@ export const CardItemWrapper = styled.div`
     position: absolute;
     right: 0;
     margin-right: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
   }
 `;
 
+export const StatusError = styled.div`
+  color: ${Colors.error};
+  font-size: 14px;
+  padding-right: 8px;
+`
+
 export const StatusConnected = styled.div`
   background-color: ${Colors.connected};
   border-radius: 8px;
diff --git a/net/web/src/session/cards/cardItem/useCardItem.hook.js b/net/web/src/session/cards/cardItem/useCardItem.hook.js
index 22dddc74..72e96158 100644
--- a/net/web/src/session/cards/cardItem/useCardItem.hook.js
+++ b/net/web/src/session/cards/cardItem/useCardItem.hook.js
@@ -5,6 +5,7 @@ export function useCardItem(item) {
 
   const [state, setState] = useState({
     logo: null,
+    resync: false,
   });
 
   const card = useContext(CardContext);
@@ -18,6 +19,13 @@ export function useCardItem(item) {
   }, [card]); 
 
   const actions = {
+    resync: async () => {
+      if (!state.resync) {
+        updateState({ resync: true });
+        await card.actions.resync(item.id);
+        updateState({ resync: false });
+      }
+    },
   };
 
   return { state, actions };