building out blocked modals

app/mobile/src/constants/Colors.js

@@ -92,7 +92,7 @@ const DarkColors = {
   errorIndicator: '#ffaaaa',
   horizontalDivider: '#888888',
   verticalDivider: '#aaaaaa',
-  itemDivider: '#eeeeee',
+  itemDivider: '#555555',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',
   disabledIndicator: '#eeeeee',

app/mobile/src/constants/Strings.js

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

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

@@ -2,10 +2,8 @@ import { useEffect, useContext, useState, useRef } from 'react';
 
 export function useDisplayContext() {
   const [state, setState] = useState({
-    modal: false,
+    prompt: null,
-    modalTitle: null,
+    alert: null,
-    modalCancel: null,
-    modalOk: null,
   });
 
   const updateState = (value) => {
@@ -13,11 +11,17 @@ export function useDisplayContext() {
   }
 
   const actions = {
-    showModal: (modalTitle, modalCancel, modalOk) => {
+    showPrompt: (prompt) => {
-      updateState({ modal: true, modalTitle, modalCancel, modalOk });
+      updateState({ prompt });
     },
-    hideModal: () => {
+    hidePrompt: () => {
-      updateState({ modal: false });
+      updateState({ prompt: null });
+    },
+    showAlert: (alert) => {
+      updateState({ alert });
+    },
+    hideAlert: () => {
+      updateState({ alert: null });
     },
   };
 

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

@@ -111,6 +111,7 @@ export function Settings() {
           <Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>
           <Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ item.handle }</Text>
         </View>
+        <Text style={styles.restore}>{ state.strings.restore }</Text>
       </TouchableOpacity>
     )
   }
@@ -643,7 +644,7 @@ export function Settings() {
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
-              <Text style={styles.modalHeader}>{ state.strings.blockedContacts }</Text>
+              <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.rightButton}>
@@ -669,7 +670,7 @@ export function Settings() {
                   <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
-              <Text style={styles.modalHeader}>{ state.strings.blockedContacts }</Text>
+              <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.rightButton}>

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

@@ -330,9 +330,10 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     height: 48,
     paddingLeft: 16,
+    paddingRight: 16,
     alignItems: 'center',
-    borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
+    borderBottomWidth: 1,
   },
   detail: {
     paddingLeft: 12,
@@ -342,6 +343,9 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
+  restore: {
+    color: Colors.linkText,
+  },
   name: {
     color: Colors.text,
     fontSize: 14,

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

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef, useContext } from 'react';
+import { Alert } from 'react-native';
 import { getLanguageStrings } from 'constants/Strings';
 import { ProfileContext } from 'context/ProfileContext';
 import { AccountContext } from 'context/AccountContext';
@@ -201,11 +202,16 @@ export function useSettings() {
       updateState({ delete: false });
     },
     promptLogout: () => {
-      display.actions.showModal(
+      display.actions.showPrompt({
-        state.strings.loggingOut,
+        title: state.strings.loggingOut,
-        { label: state.strings.cancel },
+        ok: { label: state.strings.confirmLogout, action: app.actions.logout, failed: () => {
-        { label: state.strings.confirmLogout, action: app.actions.logout }
+          Alert.alert(
+            state.strings.error,
+            state.strings.tryAgain,
           );
+        }},
+        cancel: { label: state.strings.cancel },
+      });
     },
     showEditSeal: () => {
       updateState({ editSeal: true, sealPassword: '', hidePassword: true, hideConfirm: true,

app/mobile/src/utils/Prompt.jsx

@@ -1,5 +1,5 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
-import { Modal, View, Text, TouchableOpacity } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { DisplayContext } from 'context/DisplayContext';
 import { BlurView } from "@react-native-community/blur";
 import { styles } from './Prompt.styled';
@@ -7,40 +7,81 @@ import { Colors } from 'constants/Colors';
 
 export function Prompt() {
   const display = useContext(DisplayContext);
+  const [busy, setBusy] = useState(false);
 
-  const okModal = () => {
+  const okPrompt = async () => {
-    if (display.state.modalOk.action) {
+    if (!busy) {
-      display.state.modalOk.action();
+      const { action, failed } = display.state.prompt?.ok || {};
+      if (action) {
+        setBusy(true);
+        try {
+          await action();
+          display.actions.hidePrompt();
+        }
+        catch (err) {
+          if (failed) {
+            failed();
+          }
+        }
+        setBusy(false);
+      }
+      else {
+        display.actions.hidePrompt();
+      }
     }
-    display.actions.hideModal();
   }
 
   return (
+    <>
       <Modal
         animationType="fade"
         transparent={true}
-      visible={display.state.modal}
+        visible={display.state.prompt != null}
         supportedOrientations={['portrait', 'landscape']}
-      onRequestClose={display.actions.hideModal}
+        onRequestClose={display.actions.hidePrompt}
       >
         <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
           <View style={styles.modalContainer}>
-          <Text style={styles.modalHeader}>{ display.state.modalTitle }</Text>
+            <Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
             <View style={styles.modalButtons}>
-            { display.state.modalCancel && (
+              { display.state.prompt?.cancel && (
-              <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hideModal}>
+                <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
-                <Text style={styles.cancelButtonText}>{ display.state.modalCancel.label }</Text>
+                  <Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
                 </TouchableOpacity>
               )}
-            { display.state.modalOk && (
+              { display.state.prompt?.ok && (
-              <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okModal}>
+                <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
-                <Text style={styles.okButtonText}>{ display.state.modalOk.label }</Text>
+                  { !busy && (
+                    <Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
+                  )}
+                  { busy && (
+                    <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
+                  )}
                 </TouchableOpacity>
               )}
             </View>
           </View>
         </BlurView>
       </Modal>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={display.state.alert != null}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={display.actions.hideAlert}
+      >
+        <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalHeader}>{ display.state.alert?.title }</Text>
+            <Text style={styles.modalMessage}>{ display.state.alert?.message }</Text>
+            <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={display.actions.hideAlert}>
+              <Text style={styles.okButtonText}>{ display.state.alert?.ok }</Text>
+            </TouchableOpacity>
+          </View>
+        </BlurView>
+      </Modal>
+    </>
   );
 }
 

app/mobile/src/utils/Prompt.styled.js

@@ -23,7 +23,7 @@ export const styles = StyleSheet.create({
     color: Colors.labelText,
     fontFamily: 'Roboto',
   },
-  modalDescription: {
+  modalMessage: {
     textAlign: 'center',
     fontSize: 14,
     color: Colors.descriptionText,
@@ -54,9 +54,11 @@ export const styles = StyleSheet.create({
     marginRight: 16,
     paddingTop: 8,
     paddingBottom: 8,
-    paddingLeft: 32,
+    display: 'flex',
-    paddingRight: 32,
+    alignItems: 'center',
     borderRadius: 4,
+    width: 128,
+    height: 32,
     backgroundColor: Colors.cancelButton,
   },
   cancelButtonText: {
@@ -68,9 +70,11 @@ export const styles = StyleSheet.create({
     marginBottom: 16,
     paddingTop: 8,
     paddingBottom: 8,
-    paddingLeft: 32,
+    display: 'flex',
-    paddingRight: 32,
+    alignItems: 'center',
     borderRadius: 4,
+    width: 128,
+    height: 32,
     backgroundColor: Colors.primaryButton,
   },
   okButtonText: {