adding blocked message support to refactored settings

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

@@ -473,9 +473,13 @@ export function useCardContext() {
       await store.actions.setCardChannelTopicBlocked(guid, cardId, channelId, topicId, true);
     },
     clearTopicFlag: async (cardId, channelId, topicId) => {
-      const { guid } = access.current;
+      const { guid } = access.current || {};
       await store.actions.setCardChannelTopicBlocked(guid, cardId, channelId, topicId, false);
     },
+    getFlaggedTopics: async () => {
+      const { guid } = access.current || {};
+      return await store.actions.getCardChannelTopicBlocked(guid);
+    },
     addChannelAlert: async (cardId, channelId) => {
       const { detail, profile } = (cards.current.get(cardId) || {}).card;
       const node = profile?.node ? profile.node : access.current.server;

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

@@ -251,6 +251,10 @@ export function useChannelContext() {
       const { guid } = access.current || {};
       await store.actions.setChannelTopicBlocked(guid, channelId, topicId, 0);
     },
+    getFlaggedTopics: async () => {
+      const { guid } = access.current || {};
+      return await store.actions.getChannelTopicBlocked(guid);
+    },
     addChannelAlert: async (channelId) => {
       const { server, guid } = access.current || {};
       return await addFlag(server, guid, channelId);

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -193,11 +193,9 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
               <AntIcons name="edit" size={24} color={Colors.white} />
             </TouchableOpacity>
           )}
-          { !state.editable && (
           <TouchableOpacity style={styles.icon} onPress={hideMessage}>
             <MatIcons name="block-helper" size={18} color={Colors.white} />
           </TouchableOpacity>
-          )}
           { !state.editable && (
             <TouchableOpacity style={styles.icon} onPress={reportMessage}>
               <MatIcons name="flag-outline" size={22} color={Colors.white} />

app/mobile/src/session/settings/Settings.jsx

@@ -147,6 +147,17 @@ export function Settings() {
   };
 
   const BlockedMessage = ({ item }) => {
+    return (
+      <View style={styles.item}>
+        <Logo src={item.logo} width={32} height={32} radius={6} />
+        <View style={styles.detail}>
+          <Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.handle }</Text>
+        </View>
+        <TouchableOpacity onPress={() => unblock(actions.unblockMessage, { cardId: item.cardId, channelId: item.channelId, topicId: item.topicId })}>
+          <Text style={styles.restore}>{ state.strings.restore }</Text>
+        </TouchableOpacity>
+      </View>
+    )
   };
 
   return (
@@ -726,11 +737,11 @@ export function Settings() {
                     <Text style={styles.emptyLabelText}>{ state.strings.noBlockedMessages }</Text>
                   </View>
                 )}
-                { state.contacts.length !== 0 && (
+                { state.messages.length !== 0 && (
                   <FlatList
-                    data={state.contacts}
+                    data={state.messages}
                     renderItem={BlockedMessage}
-                    keyExtractor={item => item.messageId}
+                    keyExtractor={item => `${item.cardId}.${item.channelId}.${item.topicId}`}
                   />
                 )}
               </View>

app/mobile/src/session/settings/useSettings.hook.js

@@ -98,6 +98,32 @@ export function useSettings() {
     }
   };
 
+  const setTopicItem = (item) => {
+    const { cardId, channelId, topicId, detail } = item;
+    if (cardId) {
+      const contact = card.state.cards.get(cardId);
+      const { handle, node, imageSet } = contact?.card?.profile || {};
+      return {
+        cardId: cardId,
+        channelId: channelId,
+        topicId: topicId,
+        handle: `${handle} / ${node}`,
+        logo: imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar',
+        created: detail?.created,
+      }
+    }
+    else {
+      const { handle, node } = profile?.state.identity || {};
+      return {
+        channelId: channelId,
+        topicId: topicId,
+        handle: `${handle} / ${node}`,
+        logo: profile?.state?.imageUrl ? profile.state.imageUrl : 'avatar',
+        created: detail?.created,
+      }
+    }
+  };
+
   useEffect(() => {
     const contacts = Array.from(card.state.cards.values());
     const filtered = contacts.filter(contact => contact.card.blocked);
@@ -195,8 +221,20 @@ export function useSettings() {
     hideBlockedTopics: () => {
       updateState({ blockedTopics: false });
     },
-    showBlockedMessages: () => {
+    showBlockedMessages: async () => {
-      updateState({ blockedMessages: true });
+      const cardMessages = await card.actions.getFlaggedTopics();
+      const channelMessages = await channel.actions.getFlaggedTopics();
+      const merged = cardMessages.map(setTopicItem).concat(channelMessages.map(setTopicItem));
+      const sortedMerge = merged.sort((a, b) => {
+        if (a.created === b.created) {
+          return 0;
+        }
+        if (a.created < b.created) {
+          return -1;
+        }
+        return 1;
+      });
+      updateState({ blockedMessages: true, messages: sortedMerge });
     },
     hideBlockedMessages: () => {
       updateState({ blockedMessages: false });
@@ -326,6 +364,16 @@ export function useSettings() {
         await channel.actions.clearChannelFlag(channelId);
       }
     },
+    unblockMessage: async ({ cardId, channelId, topicId }) => {
+      if (cardId) {
+        await card.actions.clearTopicFlag(cardId, channelId, topicId);
+        updateState({ messages: state.messages.filter(item => item.cardId !== cardId || item.channelId !== channelId || item.topicId !== topicId) });
+      }
+      else {
+        await channel.actions.clearTopicFlag(channelId, topicId);
+        updateState({ messages: state.messages.filter(item => item.channelId !== channelId || item.topicId !== topicId) });
+      }
+    },
   };
 
   return { state, actions };