From 1f6cd323f49cdb0ce262d9c6abe68329dbda14c8 Mon Sep 17 00:00:00 2001 From: Ashish Bhate Date: Mon, 26 Oct 2020 08:02:14 +0000 Subject: [PATCH] [MM-25349] centre failed network action component and improve responsiveness to device orientation (#4834) --- app/components/failed_network_action/cloud.js | 5 +- .../failed_network_action.js | 115 ++++++++++++++++++ .../failed_network_action.test.js | 35 ++++++ app/components/failed_network_action/index.js | 102 ++-------------- .../error_teams_list.test.js.snap | 3 +- .../__snapshots__/flagged_posts.test.js.snap | 3 +- .../__snapshots__/pinned_posts.test.js.snap | 3 +- .../recent_mentions.test.js.snap | 3 +- .../__snapshots__/select_team.test.js.snap | 3 +- .../terms_of_service.test.js.snap | 3 +- 10 files changed, 167 insertions(+), 108 deletions(-) create mode 100644 app/components/failed_network_action/failed_network_action.js create mode 100644 app/components/failed_network_action/failed_network_action.test.js diff --git a/app/components/failed_network_action/cloud.js b/app/components/failed_network_action/cloud.js index 3c8039a18..49cbbcad5 100644 --- a/app/components/failed_network_action/cloud.js +++ b/app/components/failed_network_action/cloud.js @@ -16,7 +16,10 @@ export default class CloudSvg extends PureComponent { render() { const {color, height, width} = this.props; return ( - + + { !this.props.isLandscape && + + } + + {errorTitle} + + + {errorMessage} + + + + ); + } +} + +const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { + return { + container: { + alignItems: 'center', + flex: 1, + justifyContent: 'center', + paddingHorizontal: 15, + paddingVertical: INDICATOR_BAR_HEIGHT, + paddingBottom: 15, + }, + title: { + color: changeOpacity(theme.centerChannelColor, 0.8), + fontSize: 20, + fontWeight: '600', + marginBottom: 15, + marginTop: 10, + }, + description: { + color: changeOpacity(theme.centerChannelColor, 0.4), + fontSize: 17, + lineHeight: 25, + textAlign: 'center', + }, + link: { + color: theme.buttonColor, + fontSize: 15, + }, + buttonContainer: { + backgroundColor: theme.buttonBg, + borderRadius: 5, + height: 42, + justifyContent: 'center', + marginTop: 20, + paddingHorizontal: 12, + }, + }; +}); diff --git a/app/components/failed_network_action/failed_network_action.test.js b/app/components/failed_network_action/failed_network_action.test.js new file mode 100644 index 000000000..b476b5b33 --- /dev/null +++ b/app/components/failed_network_action/failed_network_action.test.js @@ -0,0 +1,35 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React from 'react'; + +import FailedNetworkAction from './failed_network_action'; +import {renderWithReduxIntl} from 'test/testing_library'; +import Preferences from '@mm-redux/constants/preferences'; +import {waitFor} from '@testing-library/react-native'; + +describe('FailedNetworkAction', () => { + const baseProps = { + onRetry: jest.fn(), + theme: Preferences.THEMES.default, + isLandscape: false, + errorMessage: 'Error Message', + errorTitle: 'Error Title', + }; + + test('Cloud in portrait', async () => { + const {getByTestId} = renderWithReduxIntl( + , + ); + + await waitFor(() => expect(getByTestId('failed_network_action.cloud_icon')).toBeTruthy()); + }); + + test('Cloud NOT in landscape', async () => { + const props = {...baseProps, isLandscape: true}; + const {queryByTestId} = renderWithReduxIntl( + , + ); + + await waitFor(() => expect(queryByTestId('failed_network_action.cloud_icon')).toBeNull()); + }); +}); diff --git a/app/components/failed_network_action/index.js b/app/components/failed_network_action/index.js index d601237ae..7f249edf1 100644 --- a/app/components/failed_network_action/index.js +++ b/app/components/failed_network_action/index.js @@ -1,104 +1,16 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {PureComponent} from 'react'; -import PropTypes from 'prop-types'; -import {Text, View} from 'react-native'; -import {intlShape} from 'react-intl'; -import Button from 'react-native-button'; +import {connect} from 'react-redux'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {isLandscape} from 'app/selectors/device'; -import Cloud from './cloud'; +import FailedNetworkAction from './failed_network_action'; -export default class FailedNetworkAction extends PureComponent { - static propTypes = { - onRetry: PropTypes.func.isRequired, - actionText: PropTypes.string, - errorMessage: PropTypes.string, - errorTitle: PropTypes.string, - theme: PropTypes.object.isRequired, +function mapStateToProps(state) { + return { + isLandscape: isLandscape(state), }; - - static contextTypes = { - intl: intlShape.isRequired, - }; - - static defaultProps = { - showAction: true, - }; - - render() { - const {formatMessage} = this.context.intl; - const {onRetry, theme} = this.props; - const style = getStyleFromTheme(theme); - - const actionText = this.props.actionText || formatMessage({ - id: 'mobile.failed_network_action.retry', - defaultMessage: 'Try again', - }); - const errorTitle = this.props.errorTitle || formatMessage({ - id: 'mobile.failed_network_action.title', - defaultMessage: 'No internet connection', - }); - const errorMessage = this.props.errorMessage || formatMessage({ - id: 'mobile.failed_network_action.shortDescription', - defaultMessage: 'Messages will load when you have an internet connection.', - }); - - return ( - - - {errorTitle} - {errorMessage} - - - ); - } } -const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { - return { - container: { - alignItems: 'center', - flex: 1, - justifyContent: 'center', - paddingHorizontal: 15, - paddingBottom: 100, - }, - title: { - color: changeOpacity(theme.centerChannelColor, 0.8), - fontSize: 20, - fontWeight: '600', - marginBottom: 15, - marginTop: 10, - }, - description: { - color: changeOpacity(theme.centerChannelColor, 0.4), - fontSize: 17, - lineHeight: 25, - textAlign: 'center', - }, - link: { - color: theme.buttonColor, - fontSize: 15, - }, - buttonContainer: { - backgroundColor: theme.buttonBg, - borderRadius: 5, - height: 42, - justifyContent: 'center', - marginTop: 20, - paddingHorizontal: 12, - }, - }; -}); +export default connect(mapStateToProps)(FailedNetworkAction); diff --git a/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap b/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap index 68992cb24..3ec6c7228 100644 --- a/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap +++ b/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap @@ -9,11 +9,10 @@ exports[`ErrorTeamsList should match snapshot 1`] = ` } > - - - - -