building out blocked modals

2025-02-12 03:29:16 +00:00 · 2023-09-05 15:49:35 -07:00 · 2023-09-05 15:49:35 -07:00 · 73adea60a3
commit 73adea60a3
parent fe916814ba
8 changed files with 120 additions and 52 deletions
--- a/app/mobile/src/constants/Colors.js
+++ b/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',
--- a/app/mobile/src/constants/Strings.js
+++ b/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',
  }
 ];

--- a/app/mobile/src/context/useDisplayContext.hook.js
+++ b/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,
-    modalTitle: null,
-    modalCancel: null,
-    modalOk: null,
+    prompt: null,
+    alert: null,
  });

  const updateState = (value) => {
@ -13,11 +11,17 @@ export function useDisplayContext() {
  }

  const actions = {
-    showModal: (modalTitle, modalCancel, modalOk) => {
-      updateState({ modal: true, modalTitle, modalCancel, modalOk });
+    showPrompt: (prompt) => {
+      updateState({ prompt });
    },
-    hideModal: () => {
-      updateState({ modal: false });
+    hidePrompt: () => {
+      updateState({ prompt: null });
+    },
+    showAlert: (alert) => {
+      updateState({ alert });
+    },
+    hideAlert: () => {
+      updateState({ alert: null });
    },
  };

--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/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}>
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/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,
--- a/app/mobile/src/session/settings/useSettings.hook.js
+++ b/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(
-        state.strings.loggingOut,
-        { label: state.strings.cancel },
-        { label: state.strings.confirmLogout, action: app.actions.logout }
-      );
+      display.actions.showPrompt({
+        title: state.strings.loggingOut,
+        ok: { label: state.strings.confirmLogout, action: app.actions.logout, failed: () => {
+          Alert.alert(
+            state.strings.error,
+            state.strings.tryAgain,
+          );
+        }},
+        cancel: { label: state.strings.cancel },
+      });
    },
    showEditSeal: () => {
      updateState({ editSeal: true, sealPassword: '', hidePassword: true, hideConfirm: true,
--- a/app/mobile/src/utils/Prompt.jsx
+++ b/app/mobile/src/utils/Prompt.jsx
@ -1,5 +1,5 @@
-import { useContext } from 'react';
-import { Modal, View, Text, TouchableOpacity } from 'react-native';
+import { useContext, useState } from 'react';
+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 = () => {
-    if (display.state.modalOk.action) {
-      display.state.modalOk.action();
+  const okPrompt = async () => {
+    if (!busy) {
+      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}
-      supportedOrientations={['portrait', 'landscape']}
-      onRequestClose={display.actions.hideModal}
-    >
-      <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
-        <View style={styles.modalContainer}>
-          <Text style={styles.modalHeader}>{ display.state.modalTitle }</Text>
-          <View style={styles.modalButtons}>
-            { display.state.modalCancel && (
-              <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hideModal}>
-                <Text style={styles.cancelButtonText}>{ display.state.modalCancel.label }</Text>
-              </TouchableOpacity>
-            )}
-            { display.state.modalOk && (
-              <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okModal}>
-                <Text style={styles.okButtonText}>{ display.state.modalOk.label }</Text>
-              </TouchableOpacity>
-            )}
+    <>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={display.state.prompt != null}
+        supportedOrientations={['portrait', 'landscape']}
+        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.prompt?.title }</Text>
+            <View style={styles.modalButtons}>
+              { display.state.prompt?.cancel && (
+                <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
+                  <Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
+                </TouchableOpacity>
+              )}
+              { display.state.prompt?.ok && (
+                <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
+                  { !busy && (
+                    <Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
+                  )}
+                  { busy && (
+                    <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
+                  )}
+                </TouchableOpacity>
+              )}
+            </View>
          </View>
-        </View>
-      </BlurView>
-    </Modal>
+        </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>
+    </>
  );
 }

--- a/app/mobile/src/utils/Prompt.styled.js
+++ b/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,
-    paddingRight: 32,
+    display: 'flex',
+    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,
-    paddingRight: 32,
+    display: 'flex',
+    alignItems: 'center',
    borderRadius: 4,
+    width: 128,
+    height: 32,
    backgroundColor: Colors.primaryButton,
  },
  okButtonText: {