From 775aa9137bb6e861b09082de844d8f497d147e0a Mon Sep 17 00:00:00 2001 From: GleidsonDaniel Date: Tue, 20 Feb 2024 17:24:19 -0300 Subject: [PATCH] wip --- app/actions/actionsTypes.ts | 2 +- app/actions/troubleshootingNotification.ts | 4 +- app/lib/methods/helpers/info.ts | 18 ++- app/sagas/troubleshootingNotification.ts | 20 ++- .../components/CommunityEditionPushQuota.tsx | 56 +++++++ .../components/DeviceNotificationSettings.tsx | 50 ++++++ .../components/ListPercentage.tsx | 64 -------- .../components/NotificationDelay.tsx | 25 +++ .../components/PushGatewayConnection.tsx | 65 ++++++++ app/views/PushTroubleshootView/index.tsx | 145 ++---------------- 10 files changed, 237 insertions(+), 212 deletions(-) create mode 100644 app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx create mode 100644 app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx delete mode 100644 app/views/PushTroubleshootView/components/ListPercentage.tsx create mode 100644 app/views/PushTroubleshootView/components/NotificationDelay.tsx create mode 100644 app/views/PushTroubleshootView/components/PushGatewayConnection.tsx diff --git a/app/actions/actionsTypes.ts b/app/actions/actionsTypes.ts index 1d5c09312..ae8485ba0 100644 --- a/app/actions/actionsTypes.ts +++ b/app/actions/actionsTypes.ts @@ -96,6 +96,6 @@ export const VIDEO_CONF = createRequestTypes('VIDEO_CONF', [ 'ACCEPT_CALL', 'SET_CALLING' ]); -export const TROUBLESHOOTING_NOTIFICATION = createRequestTypes('TROUBLESHOOTING_NOTIFICATION', ['REQUEST', 'SET']); +export const TROUBLESHOOTING_NOTIFICATION = createRequestTypes('TROUBLESHOOTING_NOTIFICATION', ['INIT', 'SET']); export const SUPPORTED_VERSIONS = createRequestTypes('SUPPORTED_VERSIONS', ['SET']); export const IN_APP_FEEDBACK = createRequestTypes('IN_APP_FEEDBACK', ['SET', 'REMOVE', 'CLEAR']); diff --git a/app/actions/troubleshootingNotification.ts b/app/actions/troubleshootingNotification.ts index 1f562517e..91ef578f9 100644 --- a/app/actions/troubleshootingNotification.ts +++ b/app/actions/troubleshootingNotification.ts @@ -7,9 +7,9 @@ type TSetTroubleshootingNotification = Action & { payload: Partial {}): void => Alert.alert(title || '', message, [{ text: 'OK', onPress }], { cancelable: true }); -export const showErrorAlertWithEMessage = (e: any): void => { - const messageError = - e.data && e.data.error.includes('[error-too-many-requests]') - ? I18n.t('error-too-many-requests', { seconds: e.data.error.replace(/\D/g, '') }) - : e.data.errorType; - showErrorAlert(messageError); +export const showErrorAlertWithEMessage = (e: any, title?: string): void => { + let errorMessage: string = e?.data?.error; + + if (errorMessage.includes('[error-too-many-requests]')) { + const seconds = errorMessage.replace(/\D/g, ''); + errorMessage = I18n.t('error-too-many-requests', { seconds }); + } else { + const errorKey = errorMessage; + errorMessage = I18n.isTranslated(errorKey) ? I18n.t(errorKey) : errorMessage; + } + + showErrorAlert(errorMessage, title); }; interface IShowConfirmationAlert { diff --git a/app/sagas/troubleshootingNotification.ts b/app/sagas/troubleshootingNotification.ts index 673119a29..7710cd517 100644 --- a/app/sagas/troubleshootingNotification.ts +++ b/app/sagas/troubleshootingNotification.ts @@ -13,7 +13,7 @@ interface IGenericAction extends Action { type: string; } -function* request() { +function* init() { const serverVersion = yield* appSelector(state => state.server.version); let deviceNotificationEnabled = false; let defaultPushGateway = false; @@ -21,14 +21,22 @@ function* request() { try { const { authorizationStatus } = yield* call(notifee.getNotificationSettings); deviceNotificationEnabled = authorizationStatus > AuthorizationStatus.DENIED; - const pushInfoResult = yield* call(pushInfo); - if (pushInfoResult.success) { - pushGatewayEnabled = pushInfoResult.pushGatewayEnabled; - defaultPushGateway = pushInfoResult.defaultPushGateway; + } catch (e) { + log(e); + } + + try { + if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.5.0')) { + const pushInfoResult = yield* call(pushInfo); + if (pushInfoResult.success) { + pushGatewayEnabled = pushInfoResult.pushGatewayEnabled; + defaultPushGateway = pushInfoResult.defaultPushGateway; + } } } catch (e) { log(e); } + const issuesWithNotifications = !deviceNotificationEnabled || (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.6.0') && !pushGatewayEnabled); yield put( @@ -42,5 +50,5 @@ function* request() { } export default function* root(): Generator { - yield takeLatest(TROUBLESHOOTING_NOTIFICATION.REQUEST, request); + yield takeLatest(TROUBLESHOOTING_NOTIFICATION.INIT, init); } diff --git a/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx b/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx new file mode 100644 index 000000000..cf8394626 --- /dev/null +++ b/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { Alert, StyleSheet, Text } from 'react-native'; + +import * as List from '../../../containers/List'; +import i18n from '../../../i18n'; +import { useAppSelector } from '../../../lib/hooks'; +import { useTheme } from '../../../theme'; +import sharedStyles from '../../Styles'; + +const WARNING_MINIMUM_VALUE = 70; +const WARNING_MAXIMUM_VALUE = 90; + +export default function CommunityEditionPushQuota(): React.ReactElement | null { + const { colors } = useTheme(); + const { consumptionPercentage, isCommunityEdition } = useAppSelector(state => ({ + isCommunityEdition: state.troubleshootingNotification.isCommunityEdition, + consumptionPercentage: state.troubleshootingNotification.consumptionPercentage + })); + + if (!isCommunityEdition) return null; + + const percentage = `${Math.floor(consumptionPercentage)}%`; + + let percentageColor = colors.statusFontOnSuccess; + if (consumptionPercentage > WARNING_MINIMUM_VALUE && consumptionPercentage < WARNING_MAXIMUM_VALUE) { + percentageColor = colors.statusFontOnWarning; + } + if (consumptionPercentage >= WARNING_MAXIMUM_VALUE) { + percentageColor = colors.statusFontOnDanger; + } + + const alertWorkspaceConsumption = () => { + Alert.alert(i18n.t('Push_consumption_alert_title'), i18n.t('Push_consumption_alert_description')); + }; + + return ( + + + {percentage}} + /> + + + + ); +} + +const styles = StyleSheet.create({ + pickerText: { + ...sharedStyles.textRegular, + fontSize: 16 + } +}); diff --git a/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx b/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx new file mode 100644 index 000000000..fdf6e0225 --- /dev/null +++ b/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx @@ -0,0 +1,50 @@ +import notifee from '@notifee/react-native'; +import React from 'react'; +import { Linking } from 'react-native'; + +import * as List from '../../../containers/List'; +import i18n from '../../../i18n'; +import { useAppSelector } from '../../../lib/hooks'; +import { isIOS, showErrorAlert } from '../../../lib/methods/helpers'; +import { useTheme } from '../../../theme'; +import CustomListSection from './CustomListSection'; + +export default function DeviceNotificationSettings(): React.ReactElement { + const { colors } = useTheme(); + const { deviceNotificationEnabled } = useAppSelector(state => ({ + deviceNotificationEnabled: state.troubleshootingNotification.deviceNotificationEnabled + })); + + const goToNotificationSettings = () => { + if (isIOS) { + Linking.openURL('app-settings:'); + } else { + notifee.openNotificationSettings(); + } + }; + + const alertDeviceNotificationSettings = () => { + if (deviceNotificationEnabled) return; + showErrorAlert( + i18n.t('Device_notifications_alert_description'), + i18n.t('Device_notifications_alert_title'), + goToNotificationSettings + ); + }; + + return ( + + + + + + ); +} diff --git a/app/views/PushTroubleshootView/components/ListPercentage.tsx b/app/views/PushTroubleshootView/components/ListPercentage.tsx deleted file mode 100644 index 913112b9d..000000000 --- a/app/views/PushTroubleshootView/components/ListPercentage.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { StyleSheet, Text } from 'react-native'; - -import * as List from '../../../containers/List'; -import { useTheme } from '../../../theme'; -import sharedStyles from '../../Styles'; - -const styles = StyleSheet.create({ - pickerText: { - ...sharedStyles.textRegular, - fontSize: 16 - } -}); - -type TPercentageState = 'success' | 'warning' | 'danger'; - -const DANGER_VALUE = 90; -const WARNING_MINIMUM_VALUE = 70; -const WARNING_MAXIMUM_VALUE = 90; - -const getPercentageState = (value: number): TPercentageState => { - if (value > WARNING_MINIMUM_VALUE && value < WARNING_MAXIMUM_VALUE) { - return 'warning'; - } - if (value >= DANGER_VALUE) { - return 'danger'; - } - return 'success'; -}; - -const ListPercentage = ({ - value = 0, - title, - testID, - onPress -}: { - title: string; - testID: string; - value: number; - onPress: () => void; -}) => { - const { colors } = useTheme(); - const percentage = `${Math.floor(value)}%`; - const percentageState = getPercentageState(value); - - let percentageTextColor = colors.statusFontOnSuccess; - if (percentageState === 'warning') { - percentageTextColor = colors.statusFontOnWarning; - } - if (percentageState === 'danger') { - percentageTextColor = colors.statusFontOnDanger; - } - - return ( - {percentage}} - /> - ); -}; - -export default ListPercentage; diff --git a/app/views/PushTroubleshootView/components/NotificationDelay.tsx b/app/views/PushTroubleshootView/components/NotificationDelay.tsx new file mode 100644 index 000000000..5b32a412d --- /dev/null +++ b/app/views/PushTroubleshootView/components/NotificationDelay.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Linking } from 'react-native'; + +import * as List from '../../../containers/List'; +import { useTheme } from '../../../theme'; + +export default function NotificationDelay(): React.ReactElement { + const { colors } = useTheme(); + + const openNotificationDocumentation = () => Linking.openURL('https://go.rocket.chat/i/push-notifications'); + + return ( + + + } + testID='push-troubleshoot-view-notification-delay' + /> + + + + ); +} diff --git a/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx b/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx new file mode 100644 index 000000000..a0f10396a --- /dev/null +++ b/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import { Alert } from 'react-native'; + +import * as List from '../../../containers/List'; +import i18n from '../../../i18n'; +import { useAppSelector, usePermissions } from '../../../lib/hooks'; +import { compareServerVersion, showErrorAlertWithEMessage } from '../../../lib/methods/helpers'; +import { Services } from '../../../lib/services'; +import { useTheme } from '../../../theme'; +import CustomListSection from './CustomListSection'; + +export default function PushGatewayConnection(): React.ReactElement | null { + const [loading, setLoading] = useState(false); + const { colors } = useTheme(); + const [testPushNotificationsPermission] = usePermissions(['test-push-notifications']); + const { defaultPushGateway, pushGatewayEnabled, serverVersion } = useAppSelector(state => ({ + pushGatewayEnabled: state.troubleshootingNotification.pushGatewayEnabled, + defaultPushGateway: state.troubleshootingNotification.defaultPushGateway, + foreground: state.app.foreground, + serverVersion: state.server.version + })); + + if (!compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.6.0')) return null; + + const handleTestPushNotification = async () => { + setLoading(true); + try { + const result = await Services.pushTest(); + if (result.success) { + Alert.alert(i18n.t('Test_push_notification'), i18n.t('Your_push_was_sent_to_s_devices', { s: result.tokensCount })); + } + } catch (error: any) { + showErrorAlertWithEMessage(error, i18n.t('Test_push_notification')); + } + setLoading(false); + }; + + let infoColor = 'Push_gateway_not_connected_description'; + let statusColor = colors.userPresenceBusy; + if (pushGatewayEnabled) { + statusColor = colors.userPresenceOnline; + infoColor = 'Push_gateway_connected_description'; + } + if (pushGatewayEnabled && !defaultPushGateway) { + statusColor = colors.badgeBackgroundLevel3; + infoColor = 'Custom_push_gateway_connected_description'; + } + + return ( + + + + + + + ); +} diff --git a/app/views/PushTroubleshootView/index.tsx b/app/views/PushTroubleshootView/index.tsx index b2a3c9c28..2280a10d1 100644 --- a/app/views/PushTroubleshootView/index.tsx +++ b/app/views/PushTroubleshootView/index.tsx @@ -1,51 +1,30 @@ import { StackNavigationProp } from '@react-navigation/stack'; import React, { useEffect } from 'react'; -import { Alert, Linking } from 'react-native'; -import notifee from '@notifee/react-native'; import { useDispatch } from 'react-redux'; +import { initTroubleshootingNotification } from '../../actions/troubleshootingNotification'; import * as List from '../../containers/List'; import SafeAreaView from '../../containers/SafeAreaView'; import StatusBar from '../../containers/StatusBar'; import I18n from '../../i18n'; +import { useAppSelector } from '../../lib/hooks'; import { SettingsStackParamList } from '../../stacks/types'; -import { useTheme } from '../../theme'; -import CustomListSection from './components/CustomListSection'; -import { compareServerVersion, isIOS, showErrorAlert } from '../../lib/methods/helpers'; -import { requestTroubleshootingNotification } from '../../actions/troubleshootingNotification'; -import { useAppSelector, usePermissions } from '../../lib/hooks'; -import { Services } from '../../lib/services'; -import ListPercentage from './components/ListPercentage'; +import CommunityEditionPushQuota from './components/CommunityEditionPushQuota'; +import DeviceNotificationSettings from './components/DeviceNotificationSettings'; +import NotificationDelay from './components/NotificationDelay'; +import PushGatewayConnection from './components/PushGatewayConnection'; interface IPushTroubleshootViewProps { navigation: StackNavigationProp; } const PushTroubleshootView = ({ navigation }: IPushTroubleshootViewProps): JSX.Element => { - const { colors } = useTheme(); const dispatch = useDispatch(); - const [testPushNotificationsPermission] = usePermissions(['test-push-notifications']); - const { - deviceNotificationEnabled, - defaultPushGateway, - pushGatewayEnabled, - consumptionPercentage, - isCommunityEdition, - foreground, - serverVersion - } = useAppSelector(state => ({ - deviceNotificationEnabled: state.troubleshootingNotification.deviceNotificationEnabled, - pushGatewayEnabled: state.troubleshootingNotification.pushGatewayEnabled, - defaultPushGateway: state.troubleshootingNotification.defaultPushGateway, - foreground: state.app.foreground, - serverVersion: state.server.version, - isCommunityEdition: state.troubleshootingNotification.isCommunityEdition, - consumptionPercentage: state.troubleshootingNotification.consumptionPercentage - })); + const foreground = useAppSelector(state => state.app.foreground); useEffect(() => { if (foreground) { - dispatch(requestTroubleshootingNotification()); + dispatch(initTroubleshootingNotification()); } }, [dispatch, foreground]); @@ -55,114 +34,14 @@ const PushTroubleshootView = ({ navigation }: IPushTroubleshootViewProps): JSX.E }); }, [navigation]); - const openNotificationDocumentation = async () => { - await Linking.openURL('https://go.rocket.chat/i/push-notifications'); - }; - - const alertDeviceNotificationSettings = () => { - showErrorAlert( - I18n.t('Device_notifications_alert_description'), - I18n.t('Device_notifications_alert_title'), - goToNotificationSettings - ); - }; - - const alertWorkspaceConsumption = () => { - Alert.alert(I18n.t('Push_consumption_alert_title'), I18n.t('Push_consumption_alert_description')); - }; - - const goToNotificationSettings = () => { - if (isIOS) { - Linking.openURL('app-settings:'); - } else { - notifee.openNotificationSettings(); - } - }; - - const handleTestPushNotification = async () => { - let message = ''; - try { - const result = await Services.pushTest(); - if (result.success) { - message = I18n.t('Your_push_was_sent_to_s_devices', { s: result.tokensCount }); - } - } catch (error: any) { - message = I18n.isTranslated(error?.data?.errorType) ? I18n.t(error?.data?.errorType) : error?.data?.error; - } finally { - Alert.alert(I18n.t('Test_push_notification'), message); - } - }; - - let pushGatewayInfoDescription = 'Push_gateway_not_connected_description'; - let pushGatewayStatusColor = colors.userPresenceBusy; - if (pushGatewayEnabled) { - pushGatewayStatusColor = colors.userPresenceOnline; - pushGatewayInfoDescription = 'Push_gateway_connected_description'; - } - if (pushGatewayEnabled && !defaultPushGateway) { - pushGatewayStatusColor = colors.badgeBackgroundLevel3; - pushGatewayInfoDescription = 'Custom_push_gateway_connected_description'; - } - return ( - - - - - - - {isCommunityEdition ? ( - - - - - - - ) : null} - - {compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.6.0') ? ( - - - - - - - ) : null} - - - - } - testID='push-troubleshoot-view-notification-delay' - /> - - - + + + + );