adding blocked modals

app/mobile/src/constants/Colors.js

@@ -42,6 +42,7 @@ const LightColors = {
   errorIndicator: '#ffaaaa',
   horizontalDivider: '#bbbbbb',
   verticalDivider: '#aaaaaa',
+  itemDivider: '#eeeeee',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',
   disabledIndicator: '#eeeeee',
@@ -91,6 +92,7 @@ const DarkColors = {
   errorIndicator: '#ffaaaa',
   horizontalDivider: '#888888',
   verticalDivider: '#aaaaaa',
+  itemDivider: '#eeeeee',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',
   disabledIndicator: '#eeeeee',
@@ -144,6 +146,7 @@ export const Colors = {
   errorIndicator: getColor('errorIndicator'),
   horizontalDivider: getColor('horizontalDivider'),
   verticalDivider: getColor('verticalDivider'),
+  itemDivider: getColor('itemDivider'),
   unreadIndicator: getColor('unreadIndicator'),
   enabledIndicator: getColor('enabledIndicator'),
   disabledIndicator: getColor('disabledIndicator'),
@@ -165,14 +168,12 @@ export const Colors = {
   enabled: '#444444',
   lightgrey: '#bbbbbb',
   disabled: '#aaaaaa',
-  text: '#444444',
   link: '#0077CC',
   lightText: '#686868',
 
   active: '#222222',
   idle: '#707070',
 
-  itemDivider: '#eeeeee',
   
   connected: '#4488FF',
   connecting: '#dd88ff',

app/mobile/src/constants/Strings.js

@@ -67,6 +67,9 @@ const Strings = [
     blockedMessages: 'Blocked Messages',
     restoreMessage: 'Restore Message?',
     close: 'Close',
+    noBlockedContacts: 'No Blocked Contacts',
+    noBlockedTopics: 'No Blocked Topics',
+    noBlockedMessages: 'No Blocked Messages',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -131,6 +134,9 @@ const Strings = [
     blockedMessages: 'Messages Bloqués',
     restoreMessage: 'Restaurer le Message?',
     close: 'Fermer',
+    noBlockedContacts: 'Aucun Contacts Bloqués',
+    noBlockedTopics: 'Aucun Sujet Bloqué',
+    noBlockedMessages: 'Aucun Message Bloqué',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -195,6 +201,9 @@ const Strings = [
     blockedMessages: 'Mensajes Bloqueados',
     restoreMessage: 'Restaurar Mensaje?',
     close: 'Cerrar',
+    noBlockedContacts: 'No Hay ContactosBbloqueados',
+    noBlockedTopics: 'No Hay Temas Bloqueados ',
+    noBlockedMessages: 'No Hay Mensajes Bloqueados',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -259,6 +268,9 @@ const Strings = [
     blockedMessages: 'Blockierte Nachrichten',
     restoreMessage: 'Nachricht Wiederherstellen?',
     close: 'Schließen',
+    noBlockedContacts: 'Keine Blockierten Kontakte',
+    noBlockedTopics: 'Keine Blockierten Themen',
+    noBlockedMessages: 'Keine Blockierten Nachrichten',
   }
 ];
 

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

@@ -424,7 +424,7 @@ export function useCardContext() {
       return await getContactChannelTopic(node, cardToken, channelId, topicId);
     },
     setContactRevision: async (cardId, revision) => {
-      const { guid } = acccess.current || {};
+      const { guid } = access.current || {};
       await store.actions.setCardRequestStatus(guid, { revision });
       updateState({ viewRevision: revision });
     },
@@ -449,12 +449,12 @@ export function useCardContext() {
       setCardChannelField(cardId, channelId, 'topicMarker', marker, 'syncRevision', revision);
     },
     setCardFlag: async (cardId) => {
-      const { guid } = acccess.current || {};
+      const { guid } = access.current || {};
       await store.actions.setCardItemBlocked(guid, cardId);
       setCardField(cardId, 'blocked', true);
     },
     clearCardFlag: async (cardId) => {
-      const { guid } = acccess.current || {};
+      const { guid } = access.current || {};
       await store.actions.clearCardItemBlocked(guid, cardId);
       setCardField(cardId, 'blocked', false);
     },

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

@@ -147,7 +147,7 @@ export function useContact(contact) {
     },
     blockContact: async () => {
       await applyAction(async () => {
-        await card.actions.setCardBlocked(state.cardId);
+        await card.actions.setCardFlag(state.cardId);
       });
     },
     reportContact: async () => {

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Linking, ActivityIndicator, KeyboardAvoidingView, Modal, ScrollView, View, Switch, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { Linking, ActivityIndicator, FlatList, KeyboardAvoidingView, Modal, ScrollView, View, Switch, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigate } from 'react-router-dom';
 import { styles } from './Settings.styled';
@@ -8,6 +8,7 @@ import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
 import { BlurView } from "@react-native-community/blur";
 import { FloatingLabelInput } from 'react-native-floating-label-input';
+import { Logo } from 'utils/Logo';
 
 export function Settings() {
 
@@ -46,6 +47,9 @@ export function Settings() {
     }
   }
 
+  const unblockContact = (cardId) => {
+  };
+
   const logout = async () => {
     if (!busy) {
       try {
@@ -99,6 +103,18 @@ export function Settings() {
     }
   }
 
+  const BlockedContact = ({ item }) => {
+    return (
+      <TouchableOpacity style={styles.item} onPress={() => unblockContact(item.cardId)}>
+        <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>
+    )
+  }
+
   return (
     <ScrollView style={styles.content}>
       <SafeAreaView edges={['top']}>
@@ -614,7 +630,18 @@ export function Settings() {
               </View>
               <Text style={styles.modalHeader}>{ state.strings.blockedContacts }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
-              <View style={styles.modalList}></View>
+              <View style={styles.modalList}>
+                { state.contacts.length === 0 && (
+                  <Text style={styles.emptyLabel}>{ state.strings.noBlockContacts }</Text>
+                )}
+                { state.contacts.length !== 0 && (
+                  <FlatList
+                    data={state.contacts}
+                    renderItem={BlockedContact}
+                    keyExtractor={item => item.cardId}
+                  />
+                )}
+              </View>
               <View style={styles.rightButton}>
                 <TouchableOpacity style={styles.closeButton} activeOpacity={1} onPress={actions.hideBlockedContacts}>
                   <Text style={styles.closeButtonText}>{ state.strings.close }</Text>

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

@@ -324,5 +324,32 @@ export const styles = StyleSheet.create({
     borderColor: Colors.horizontalDivider,
     display: 'flex'
   },
+  item: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    height: 48,
+    paddingLeft: 16,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+  },
+  detail: {
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  name: {
+    color: Colors.text,
+    fontSize: 14,
+  },
+  handle: {
+    color: Colors.text,
+    fontSize: 12,
+  },
+
 });
 

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useContext } from 'react';
 import { getLanguageStrings } from 'constants/Strings';
 import { ProfileContext } from 'context/ProfileContext';
 import { AccountContext } from 'context/AccountContext';
+import { CardContext } from 'context/CardContext';
 import { AppContext } from 'context/AppContext';
 import { generateSeal, updateSeal, unlockSeal } from 'context/sealUtil';
 
@@ -10,6 +11,7 @@ export function useSettings() {
   const profile = useContext(ProfileContext);
   const account = useContext(AccountContext);
   const app = useContext(AppContext);
+  const card = useContext(CardContext);
 
   const debounce = useRef(null);
   const checking = useRef(null);
@@ -43,6 +45,10 @@ export function useSettings() {
     blockedContacts: false,
     blockedTopics: false,
     blockedMessages: false,
+
+    contacts: [],
+    topics: [],
+    messages: [],
   });
 
   const updateState = (value) => {
@@ -63,6 +69,35 @@ export function useSettings() {
     updateState({ sealable, seal, sealKey, sealEnabled, sealUnlocked, pushEnabled });
   }, [account.state]);
 
+  const setCardItem = (item) => {
+    const { profile, cardId } = item?.card || {};
+    return {
+      cardId: cardId,
+      name: profile?.name,
+      handle: `${profile?.handle} / ${profile?.node}`,
+      blocked: item.card.blocked,
+      logo: profile?.imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar',
+    }
+  };
+
+  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) => {
+      if (a.name === b.name) {
+        return 0;
+      }
+      if (!a.name || (a.name < b.name)) {
+        return -1;
+      }
+      return 1;
+    });
+    updateState({ contacts: filtered });
+  }, [card.state]);
+
   const unlockKey = async () => {
     const sealKey = unlockSeal(state.seal, state.sealPassword);
     await account.actions.unlockAccountSeal(sealKey);