rendering blocked topics

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

@@ -251,7 +251,7 @@ export function useStoreContext() {
         topicRevision: channel.topic_revision,
         topicMarker: channel.topic_marker,
         syncRevision: channel.sync_revision,
-        blocked: channel.blocked,
+        blocked: channel.blocked === 1,
         detail: decodeObject(channel.detail),
         unsealedDetail: decodeObject(channel.unsealed_detail),
         summary: decodeObject(channel.summary),
@@ -265,7 +265,7 @@ export function useStoreContext() {
       return values.map(topic => ({
         topicId: topic.topic_id,
         revision: topic.revision,
-        blocked: topic.blocked,
+        blocked: topic.blocked === 1,
         detailRevision: topic.detail_revision,
         detail: decodeObject(topic.detail),
         unsealedDetail: decodeObject(topic.unsealed_detail),
@@ -284,7 +284,7 @@ export function useStoreContext() {
       return values.map(topic => ({
         topicId: topic.topic_id,
         revision: topic.revision,
-        blocked: topic.blocked,
+        blocked: topic.blocked === 1,
         detailRevision: topic.detail_revision,
         detail: decodeObject(topic.detail),
         unsealedDetail: decodeObject(topic.unsealed_detail),
@@ -337,6 +337,12 @@ export function useStoreContext() {
     setCardChannelItemMarkerAndSync: async (guid, cardId, channelId, marker, revision) => {
       await db.current.executeSql(`UPDATE card_channel_${guid} set topic_marker=?, sync_revision=? where card_id=? and channel_id=?`, [marker, revision, cardId, channelId]);
     },
+    setCardChannelItemBlocked: async (guid, cardId, channelId) => {
+      await db.current.executeSql(`UPDATE card_channel_${guid} set blocked=? where card_id=? and channel_id=?`, [1, cardId, channelId]);
+    },
+    clearCardChannelItemBlocked: async (guid, cardId, channelId) => {
+      await db.current.executeSql(`UPDATE card_channel_${guid} set blocked=? where card_id=? and channel_id=?`, [0, cardId, channelId]);
+    },
     setCardChannelItemDetail: async (guid, cardId, channelId, revision, detail) => {
       await db.current.executeSql(`UPDATE card_channel_${guid} set detail_revision=?, detail=?, unsealed_detail=null where card_id=? and channel_id=?`, [revision, encodeObject(detail), cardId, channelId]);
     },
@@ -363,7 +369,7 @@ export function useStoreContext() {
         unsealedDetail: decodeObject(channel.unsealed_detail),
         summary: decodeObject(channel.summary),
         unsealedSummary: decodeObject(channel.unsealed_summary),
-        blocked: channel.blocked,
+        blocked: channel.blocked === 1,
       }));
     },
     clearCardChannelItems: async (guid, cardId) => {
@@ -375,7 +381,7 @@ export function useStoreContext() {
       return values.map(topic => ({
         topicId: topic.topic_id,
         revision: topic.revision,
-        blocked: topic.blocked,
+        blocked: topic.blocked === 1,
         detailRevision: topic.detail_revision,
         detail: decodeObject(topic.detail),
         unsealedDetail: decodeObject(topic.unsealed_detail),
@@ -394,7 +400,7 @@ export function useStoreContext() {
       return values.map(topic => ({
         topicId: topic.topic_id,
         revision: topic.revision,
-        blocked: topic.blocked,
+        blocked: topic.blocked === 1,
         detailRevision: topic.detail_revision,
         detail: decodeObject(topic.detail),
         unsealedDetail: decodeObject(topic.unsealed_detail),

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

@@ -133,6 +133,17 @@ export function Settings() {
   };
 
   const BlockedTopic = ({ 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.subject }</Text>
+        </View>
+        <TouchableOpacity onPress={() => unblock(actions.unblockTopic, item.cardId, item.channelId)}>
+          <Text style={styles.restore}>{ state.strings.restore }</Text>
+        </TouchableOpacity>
+      </View>
+    )
   };
 
   const BlockedMessage = ({ item }) => {
@@ -676,9 +687,9 @@ export function Settings() {
                     <Text style={styles.emptyLabelText}>{ state.strings.noBlockedTopics }</Text>
                   </View>
                 )}
-                { state.contacts.length !== 0 && (
+                { state.topics.length !== 0 && (
                   <FlatList
-                    data={state.contacts}
+                    data={state.topics}
                     renderItem={BlockedTopic}
                     keyExtractor={item => item.topicId}
                   />

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

@@ -8,6 +8,7 @@ import { ChannelContext } from 'context/ChannelContext';
 import { AppContext } from 'context/AppContext';
 import { generateSeal, updateSeal, unlockSeal } from 'context/sealUtil';
 import { DisplayContext } from 'context/DisplayContext';
+import { getChannelSubjectLogo } from 'context/channelUtil';
 
 export function useSettings() {
 
@@ -20,6 +21,8 @@ export function useSettings() {
 
   const debounce = useRef(null);
   const checking = useRef(null);
+  const channels = useRef([]);
+  const cardChannels = useRef([]);
 
   const [state, setState] = useState({
     strings: getLanguageStrings(),
@@ -79,18 +82,26 @@ export function useSettings() {
       cardId: cardId,
       name: profile?.name,
       handle: `${profile?.handle} / ${profile?.node}`,
-      blocked: item.card.blocked,
       logo: profile?.imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar',
     }
   };
 
+  const setChannelItem = (item) => {
+    const profileGuid = profile.state?.identity?.guid;
+    const { logo, subject } = getChannelSubjectLogo(null, profileGuid, item, card.state.cards, card.actions.getCardImageUrl);
+    return {
+      cardId: null,
+      channelId: item.channelId,
+      created: item.detail.created,
+      logo: logo,
+      subject: subject,
+    }
+  };
+
   useEffect(() => {
-    const cards = Array.from(card.state.cards.values());
-    const items = cards.map(setCardItem);
-    const filtered = items.filter(item => {
-      return item.blocked;
-    });
-    filtered.sort((a, b) => {
+    const contacts = Array.from(card.state.cards.values());
+    const filtered = contacts.filter(contact => contact.card.blocked);
+    const sorted = filtered.map(setCardItem).sort((a, b) => {
       if (a.name === b.name) {
         return 0;
       }
@@ -99,21 +110,41 @@ export function useSettings() {
       }
       return 1;
     });
-    updateState({ contacts: filtered });
+    updateState({ contacts: sorted });
 
-    cards.forEach(contact => {
-      const channels = Array.from(contact.channels);
-      channels.forEach(item => {
-        console.log(item.blocked);
-      });
+    contacts.current = [];
+    contacts.forEach(contact => {
+      const filtered = Array.from(contact.channels.values()).filter(topic => topic.blocked);
+      const mapped = filtered.map(setChannelItem).map(item => ({ ...item, cardId: contact.card.cardId }));
+      cardChannels.current = cardChannels.current.concat(mapped);
     });
+    const merged = cardChannels.current.concat(channels.current);
+    const sortedMerge = merged.sort((a, b) => {
+      if (a.created === b.created) {
+        return 0;
+      }
+      if (a.created < b.created) {
+        return -1;
+      }
+      return 1;
+    });
+    updateState({ topics: sortedMerge });
   }, [card.state]);
 
   useEffect(() => {
-    const channels = Array.from(channel.state.channels);
-    channels.forEach(item => {
-      console.log(item.blocked);
+    const filtered = Array.from(channel.state.channels.values()).filter(topic => topic.blocked);
+    channels.current = filtered.map(setChannelItem);
+    const merged = cardChannels.current.concat(channels.current);
+    const sortedMerge = merged.sort((a, b) => {
+      if (a.created === b.created) {
+        return 0;
+      }
+      if (a.created < b.created) {
+        return -1;
+      }
+      return 1;
     });
+    updateState({ topics: sortedMerge });
   }, [channel.state]);
 
   const unlockKey = async () => {