From 73adea60a32c5dc6b9d4aef3c3ba1a53b1a21e7f Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Tue, 5 Sep 2023 15:49:35 -0700 Subject: [PATCH] building out blocked modals --- app/mobile/src/constants/Colors.js | 2 +- app/mobile/src/constants/Strings.js | 8 ++ .../src/context/useDisplayContext.hook.js | 20 ++-- app/mobile/src/session/settings/Settings.jsx | 5 +- .../src/session/settings/Settings.styled.js | 6 +- .../src/session/settings/useSettings.hook.js | 16 ++- app/mobile/src/utils/Prompt.jsx | 101 ++++++++++++------ app/mobile/src/utils/Prompt.styled.js | 14 ++- 8 files changed, 120 insertions(+), 52 deletions(-) diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index 44a8aa5b..bac1fc12 100644 --- 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', diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index 85fbfc4d..b60b06b0 100644 --- 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', } ]; diff --git a/app/mobile/src/context/useDisplayContext.hook.js b/app/mobile/src/context/useDisplayContext.hook.js index 722c958e..9a8e9c00 100644 --- 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 }); }, }; diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx index 4836fc78..dbdddce5 100644 --- a/app/mobile/src/session/settings/Settings.jsx +++ b/app/mobile/src/session/settings/Settings.jsx @@ -111,6 +111,7 @@ export function Settings() { { item.name } { item.handle } + { state.strings.restore } ) } @@ -643,7 +644,7 @@ export function Settings() { - { state.strings.blockedContacts } + { state.strings.blockedTopics } @@ -669,7 +670,7 @@ export function Settings() { - { state.strings.blockedContacts } + { state.strings.blockedMessages } diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js index fbe8ad27..c8895963 100644 --- 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, diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js index 83f9fe03..f0075220 100644 --- 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, diff --git a/app/mobile/src/utils/Prompt.jsx b/app/mobile/src/utils/Prompt.jsx index 7d00a7ae..32bcc417 100644 --- 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 ( - - - - { display.state.modalTitle } - - { display.state.modalCancel && ( - - { display.state.modalCancel.label } - - )} - { display.state.modalOk && ( - - { display.state.modalOk.label } - - )} + <> + + + + { display.state.prompt?.title } + + { display.state.prompt?.cancel && ( + + { display.state.prompt?.cancel?.label } + + )} + { display.state.prompt?.ok && ( + + { !busy && ( + { display.state.prompt?.ok?.label } + )} + { busy && ( + + )} + + )} + - - - + + + + + + + { display.state.alert?.title } + { display.state.alert?.message } + + { display.state.alert?.ok } + + + + + ); } diff --git a/app/mobile/src/utils/Prompt.styled.js b/app/mobile/src/utils/Prompt.styled.js index beeac4f5..08540076 100644 --- 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: {