re-supporting blocked contacts

app/mobile/src/constants/Strings.js

@@ -137,7 +137,7 @@ const Strings = [
     restoreMessage: 'Restaurer le Message?',
     close: 'Fermer',
     ok: 'OK',
-    noBlockedContacts: 'Aucun Contacts Bloqués',
+    noBlockedContacts: 'Aucun Contact Bloqués',
     noBlockedTopics: 'Aucun Sujet Bloqué',
     noBlockedMessages: 'Aucun Message Bloqué',
     restore: 'Restaurer',
@@ -206,7 +206,7 @@ const Strings = [
     restoreMessage: 'Restaurar Mensaje?',
     close: 'Cerrar',
     ok: 'OK',
-    noBlockedContacts: 'No Hay ContactosBbloqueados',
+    noBlockedContacts: 'No Hay Contactos Bloqueados',
     noBlockedTopics: 'No Hay Temas Bloqueados ',
     noBlockedMessages: 'No Hay Mensajes Bloqueados',
     restore: 'Restaurar',

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

@@ -63,13 +63,13 @@ export function useCardContext() {
   }
 
   const setCardField = (cardId, field, value) => {
-    const card = cards.current.get(cardId);
-    if (card) {
-      card[field] = value;
-      cards.current.set(cardId, { ...card });
+    const item = cards.current.get(cardId);
+    if (item?.card) {
+      item.card[field] = value;
+      cards.current.set(cardId, { ...item });
       updateState({ cards: cards.current });
     }
-  };
+  }
 
   const setCardChannelItem = (cardChannel) => {
     return {

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

@@ -47,7 +47,21 @@ export function Settings() {
     }
   }
 
-  const unblockContact = (cardId) => {
+  const unblock = async (action, id) => {
+    if (!busy) {
+      try {
+        setBusy(true);
+        await action(id);
+      }
+      catch (err) {
+        console.log(err);
+        Alert.alert(
+          state.strings.error,
+          state.strings.tryAgain,
+        );
+      }
+      setBusy(false);
+    }
   };
 
   const logout = async () => {
@@ -105,16 +119,24 @@ export function Settings() {
 
   const BlockedContact = ({ item }) => {
     return (
-      <TouchableOpacity style={styles.item} onPress={() => unblockContact(item.cardId)}>
+      <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.name }</Text>
           <Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ item.handle }</Text>
         </View>
+        <TouchableOpacity onPress={() => unblock(actions.unblockContact, item.cardId)}>
           <Text style={styles.restore}>{ state.strings.restore }</Text>
         </TouchableOpacity>
+      </View>
     )
-  }
+  };
+
+  const BlockedTopic = ({ item }) => {
+  };
+
+  const BlockedMessage = ({ item }) => {
+  };
 
   return (
     <ScrollView style={styles.content}>
@@ -611,7 +633,9 @@ export function Settings() {
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
               <View style={styles.modalList}>
                 { state.contacts.length === 0 && (
-                  <Text style={styles.emptyLabel}>{ state.strings.noBlockContacts }</Text>
+                  <View style={styles.emptyLabel}>
+                    <Text style={styles.emptyLabelText}>{ state.strings.noBlockedContacts }</Text>
+                  </View>
                 )}
                 { state.contacts.length !== 0 && (
                   <FlatList
@@ -646,7 +670,20 @@ export function Settings() {
               </View>
               <Text style={styles.modalHeader}>{ state.strings.blockedTopics }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
-              <View style={styles.modalList}></View>
+              <View style={styles.modalList}>
+                { state.topics.length === 0 && (
+                  <View style={styles.emptyLabel}>
+                    <Text style={styles.emptyLabelText}>{ state.strings.noBlockedTopics }</Text>
+                  </View>
+                )}
+                { state.contacts.length !== 0 && (
+                  <FlatList
+                    data={state.contacts}
+                    renderItem={BlockedTopic}
+                    keyExtractor={item => item.topicId}
+                  />
+                )}
+              </View>
               <View style={styles.rightButton}>
                 <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedTopics}>
                   <Text style={styles.closeButtonText}>{ state.strings.close }</Text>
@@ -672,7 +709,20 @@ export function Settings() {
               </View>
               <Text style={styles.modalHeader}>{ state.strings.blockedMessages }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
-              <View style={styles.modalList}></View>
+              <View style={styles.modalList}>
+                { state.messages.length === 0 && (
+                  <View style={styles.emptyLabel}>
+                    <Text style={styles.emptyLabelText}>{ state.strings.noBlockedMessages }</Text>
+                  </View>
+                )}
+                { state.contacts.length !== 0 && (
+                  <FlatList
+                    data={state.contacts}
+                    renderItem={BlockedMessage}
+                    keyExtractor={item => item.messageId}
+                  />
+                )}
+              </View>
               <View style={styles.rightButton}>
                 <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedMessages}>
                   <Text style={styles.closeButtonText}>{ state.strings.close }</Text>

app/mobile/src/session/settings/Settings.styled.js

@@ -350,6 +350,17 @@ export const styles = StyleSheet.create({
     color: Colors.text,
     fontSize: 14,
   },
+  emptyLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 128,
+  },
+  emptyLabelText: {
+    fontFamily: 'roboto',
+    fontSize: 16,
+    color: Colors.inputPlaceholder,
+  },
   handle: {
     color: Colors.text,
     fontSize: 12,

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

@@ -4,6 +4,7 @@ import { getLanguageStrings } from 'constants/Strings';
 import { ProfileContext } from 'context/ProfileContext';
 import { AccountContext } from 'context/AccountContext';
 import { CardContext } from 'context/CardContext';
+import { ChannelContext } from 'context/ChannelContext';
 import { AppContext } from 'context/AppContext';
 import { generateSeal, updateSeal, unlockSeal } from 'context/sealUtil';
 import { DisplayContext } from 'context/DisplayContext';
@@ -14,6 +15,7 @@ export function useSettings() {
   const account = useContext(AccountContext);
   const app = useContext(AppContext);
   const card = useContext(CardContext);
+  const channel = useContext(ChannelContext);
   const display = useContext(DisplayContext);
 
   const debounce = useRef(null);
@@ -98,8 +100,22 @@ export function useSettings() {
       return 1;
     });
     updateState({ contacts: filtered });
+
+    cards.forEach(contact => {
+      const channels = Array.from(contact.channels);
+      channels.forEach(item => {
+        console.log(item.blocked);
+      });
+    });
   }, [card.state]);
 
+  useEffect(() => {
+    const channels = Array.from(channel.state.channels);
+    channels.forEach(item => {
+      console.log(item.blocked);
+    });
+  }, [channel.state]);
+
   const unlockKey = async () => {
     const sealKey = unlockSeal(state.seal, state.sealPassword);
     await account.actions.unlockAccountSeal(sealKey);
@@ -268,6 +284,9 @@ export function useSettings() {
     removeKey: async () => {
       await removeKey();
     },
+    unblockContact: async (cardId) => {
+      await card.actions.clearCardFlag(cardId);
+    },
   };
 
   return { state, actions };