adding resync support to mobile app

app/mobile/src/context/cardUtil.js

@@ -1,7 +1,7 @@
 export function getCardByGuid(cards, guid) {
   let card = null;
   cards.forEach((value, key, map) => {
-    if(value?.card.profile?.guid === guid) {
+    if(value?.card?.profile?.guid === guid) {
       card = value;
     }
   });

app/mobile/src/context/useCardContext.hook.js

@@ -110,12 +110,12 @@ export function useCardContext() {
           const { notifiedView, notifiedProfile, notifiedArticle, notifiedChannel } = card.data || {};
           const cardRevision = { view: notifiedView, profile: notifiedProfile, artcile: notifiedArticle, channel: notifiedChannel };
           await syncCard(server, token, guid, entry, cardRevision);
-          await store.action.clearCardItemOffsync(guid, cardId);
+          await store.actions.clearCardItemOffsync(guid, cardId);
           entry.card.offsync = false;
-        }
         
-        cards.current.set(cardId, card);
+          cards.current.set(cardId, entry);
-        updateState({ cards: cards.current });
+          updateState({ cards: cards.current });
+        }
       }
       catch(err) {
         console.log(err);

app/mobile/src/session/cards/useCards.hook.js

@@ -24,7 +24,7 @@ export function useCards(filter, sort) {
   }, [account.state]);
 
   const setCardItem = (item) => {
-    const { profile, detail, cardId } = item.card || { profile: {}, detail: {} }
+    const { profile, detail, cardId, blocked, offsync } = item.card || { profile: {}, detail: {} }
     const { name, handle, node, guid, location, description, imageSet } = profile;
 
     return {
@@ -37,9 +37,8 @@ export function useCards(filter, sort) {
       description: description,
       status: detail.status,
       token: detail.token,
-      offsync: item.offsync,
+      offsync: offsync,
-      blocked: item.blocked,
+      blocked: blocked,
-      offsync: item.offsync,
       updated: detail.statusUpdated,
       logo: imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar',
     }

app/mobile/src/session/cardsIcon/CardsIcon.jsx

@@ -2,12 +2,21 @@ import { View } from 'react-native';
 import { useCardsIcon } from './useCardsIcon.hook';
 import { styles } from './CardsIcon.styled';
 import Ionicons from 'react-native-vector-icons/AntDesign';
+import { useCardIcon } from './useCardIcon.hook.js';
 
 export function CardsIcon({ size, color, active }) {
 
+  const { state, actions } = useCardIcon();
+
   return (
     <View>
       <Ionicons name={'contacts'} size={size} color={color} />
+      { state.requested && (
+        <View style={styles.requested} />
+      )}
+      { state.offsync && (
+        <View style={styles.offsync} />
+      )}
     </View>
   );
 }

app/mobile/src/session/cardsIcon/CardsIcon.styled.js

@@ -8,6 +8,15 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: Colors.pending,
     position: 'absolute',
+    left: 0,
+    bottom: 0,
+  },
+  offsync: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.alert,
+    position: 'absolute',
     right: 0,
     bottom: 0,
   },

app/mobile/src/session/cardsIcon/useCardIcon.hook.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useContext } from 'react';
+import { CardContext } from 'context/CardContext';
+
+export function useCardIcon() {
+
+  const [state, setState] = useState({
+    requested: false,
+    offsync: false,
+  });
+
+  const card = useContext(CardContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    let requested = false;
+    let offsync = false;
+    card.state.cards.forEach(item => {
+      const status = item.card?.detail?.status;
+      if (status === 'pending' || status === 'requested') {
+        requested = true;
+      }
+      if (item.card?.offsync) {
+        offsync = true;
+      }
+    });
+    updateState({ requested, offsync }); 
+  }, [card.state]);
+
+  const actions = {};
+
+  return { state, actions };
+}

app/mobile/src/session/channels/useChannels.hook.js

@@ -130,6 +130,9 @@ export function useChannels() {
       contacts.push(entry.card);
     });
     const filtered = contacts.filter(contact => {
+      if (contact == null) {
+        return false;
+      }
       if (contact.detail.status !== 'connected') {
         return false;
       }
@@ -171,6 +174,7 @@ export function useChannels() {
         items.push({ loginTimestamp, channelId, channelItem: item });
       });
       card.state.cards.forEach((cardItem, cardId) => {
+
         cardItem.channels.forEach((channelItem, channelId) => {
           items.push({ loginTimestamp, cardId, channelId, channelItem });
         });

app/mobile/src/session/contact/Contact.jsx

@@ -286,6 +286,11 @@ export function ContactBody({ contact }) {
             </TouchableOpacity>
           </>
         )}
+        { state.offsync && (
+          <TouchableOpacity style={styles.alert} onPress={actions.resync}>
+            <Text style={styles.alertText}>Resync Contact</Text>
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );

app/mobile/src/session/contact/Contact.styled.js

@@ -118,4 +118,17 @@ export const styles = StyleSheet.create({
   buttonText: {
     color: Colors.white,
   },
+  alert: {
+    width: 192,
+    padding: 6,
+    backgroundColor: Colors.alert,
+    borderRadius: 4,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 16,
+  },
+  alertText: {
+    color: Colors.white,
+  },
 })

app/mobile/src/session/contact/useContact.hook.js

@@ -149,7 +149,7 @@ export function useContact(contact) {
       await addFlag(state.node, state.guid);
     },
     resync: () => {
-      card.actions.resync(contact.card);
+      card.actions.resyncCard(state.cardId);
     },
   };