diff --git a/app/mobile/src/context/cardUtil.js b/app/mobile/src/context/cardUtil.js index 04c0479e..9880b017 100644 --- a/app/mobile/src/context/cardUtil.js +++ b/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; } }); diff --git a/app/mobile/src/context/useCardContext.hook.js b/app/mobile/src/context/useCardContext.hook.js index ecf3190e..9c162109 100644 --- a/app/mobile/src/context/useCardContext.hook.js +++ b/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); - updateState({ cards: cards.current }); + cards.current.set(cardId, entry); + updateState({ cards: cards.current }); + } } catch(err) { console.log(err); diff --git a/app/mobile/src/session/cards/useCards.hook.js b/app/mobile/src/session/cards/useCards.hook.js index 6fb03c62..934a913f 100644 --- a/app/mobile/src/session/cards/useCards.hook.js +++ b/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, - blocked: item.blocked, - offsync: item.offsync, + offsync: offsync, + blocked: blocked, updated: detail.statusUpdated, logo: imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar', } diff --git a/app/mobile/src/session/cardsIcon/CardsIcon.jsx b/app/mobile/src/session/cardsIcon/CardsIcon.jsx index 1ae64312..89eacdd8 100644 --- a/app/mobile/src/session/cardsIcon/CardsIcon.jsx +++ b/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 ( + { state.requested && ( + + )} + { state.offsync && ( + + )} ); } diff --git a/app/mobile/src/session/cardsIcon/CardsIcon.styled.js b/app/mobile/src/session/cardsIcon/CardsIcon.styled.js index 7d9030d6..30b4febf 100644 --- a/app/mobile/src/session/cardsIcon/CardsIcon.styled.js +++ b/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, }, diff --git a/app/mobile/src/session/cardsIcon/useCardIcon.hook.js b/app/mobile/src/session/cardsIcon/useCardIcon.hook.js new file mode 100644 index 00000000..a54085d1 --- /dev/null +++ b/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 }; +} diff --git a/app/mobile/src/session/channels/useChannels.hook.js b/app/mobile/src/session/channels/useChannels.hook.js index d84ed9f7..f900022c 100644 --- a/app/mobile/src/session/channels/useChannels.hook.js +++ b/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 }); }); diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx index 6670342a..da0cb5d5 100644 --- a/app/mobile/src/session/contact/Contact.jsx +++ b/app/mobile/src/session/contact/Contact.jsx @@ -286,6 +286,11 @@ export function ContactBody({ contact }) { )} + { state.offsync && ( + + Resync Contact + + )} ); diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js index 1a5575cb..01765511 100644 --- a/app/mobile/src/session/contact/Contact.styled.js +++ b/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, + }, }) diff --git a/app/mobile/src/session/contact/useContact.hook.js b/app/mobile/src/session/contact/useContact.hook.js index 92af0fe7..ccd89d8a 100644 --- a/app/mobile/src/session/contact/useContact.hook.js +++ b/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); }, };