From 06f35112222dd50d01ef1e94081a7a510c5956f8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 29 Jul 2019 23:26:24 +0500 Subject: [PATCH] MM-13083 - Removing refresh button from some pages (#3010) * MM-13083 - Removing refresh button from some pages * Updating test * Removing unused component * Updating minor changes * Updating failed actions import * Updating post list error screen * Updating connection issue error message * Updating network connection messages * Updating terms of service page * Updating test * Updating animations and FailedNetwork component * Reverting some changes * Updating channel post list * Updating requestsed changes * Updating code changes * Removing error description --- .../__snapshots__/channel_loader.test.js.snap | 117 ++++++++++++------ .../channel_loader/channel_loader.js | 46 ++++++- app/components/failed_network_action/index.js | 71 ++++++----- app/screens/channel/channel_base.js | 19 ++- .../channel_post_list/channel_post_list.js | 7 +- .../error_teams_list.test.js.snap | 16 +-- .../error_teams_list/error_teams_list.js | 19 +-- .../__snapshots__/select_team.test.js.snap | 16 +-- app/screens/select_team/select_team.js | 59 ++++----- .../terms_of_service.test.js.snap | 16 +-- .../terms_of_service/terms_of_service.js | 16 --- assets/base/i18n/en.json | 9 +- 12 files changed, 214 insertions(+), 197 deletions(-) diff --git a/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap b/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap index a432dbf15..d440ab175 100644 --- a/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap +++ b/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap @@ -15,7 +15,7 @@ exports[`ChannelLoader should match snapshot 1`] = ` ] } > - - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - + `; diff --git a/app/components/channel_loader/channel_loader.js b/app/components/channel_loader/channel_loader.js index dea4f5c4f..f92042df7 100644 --- a/app/components/channel_loader/channel_loader.js +++ b/app/components/channel_loader/channel_loader.js @@ -4,6 +4,8 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import { + Animated, + Easing, View, Dimensions, } from 'react-native'; @@ -14,6 +16,8 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import CustomPropTypes from 'app/constants/custom_prop_types'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +const {View: AnimatedView} = Animated; + function calculateMaxRows(height) { return Math.round(height / 100); } @@ -38,6 +42,7 @@ export default class ChannelLoader extends PureComponent { const maxRows = calculateMaxRows(height); this.state = { + barsOpacity: new Animated.Value(0.6), switch: false, maxRows, }; @@ -65,7 +70,38 @@ export default class ChannelLoader extends PureComponent { EventEmitter.off('switch_channel', this.handleChannelSwitch); } - componentDidUpdate() { + startLoadingAnimation = () => { + Animated.loop( + Animated.sequence([ + Animated.timing(this.state.barsOpacity, { + toValue: 1, + duration: 750, + easing: Easing.quad, + useNativeDriver: true, + }), + Animated.timing(this.state.barsOpacity, { + toValue: 0.6, + duration: 750, + easing: Easing.quad, + useNativeDriver: true, + }), + ]), + ).start(); + }; + + stopLoadingAnimation = () => { + Animated.timing( + this.state.barsOpacity + ).stop(); + } + + componentDidUpdate(prevProps) { + if (prevProps.channelIsLoading === false && this.props.channelIsLoading === true) { + this.startLoadingAnimation(); + } else if (prevProps.channelIsLoading === true && this.props.channelIsLoading === false) { + this.stopLoadingAnimation(); + } + if (this.state.switch) { const { handleSelectChannel, @@ -83,9 +119,9 @@ export default class ChannelLoader extends PureComponent { buildSections({key, style, bg, color}) { return ( - - + ); } diff --git a/app/components/failed_network_action/index.js b/app/components/failed_network_action/index.js index adace5db1..385939c68 100644 --- a/app/components/failed_network_action/index.js +++ b/app/components/failed_network_action/index.js @@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {TouchableOpacity, View} from 'react-native'; +import {View} from 'react-native'; import FormattedText from 'app/components/formatted_text'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -13,27 +13,30 @@ import Cloud from './cloud'; export default class FailedNetworkAction extends PureComponent { static propTypes = { - onRetry: PropTypes.func, + action: PropTypes.func, + actionId: PropTypes.string, + actionDefaultMessage: PropTypes.string, + errorId: PropTypes.string, + errorDefaultMessage: PropTypes.string, theme: PropTypes.object.isRequired, - errorTitle: PropTypes.object, - errorDescription: PropTypes.object, }; static defaultProps = { - errorTitle: { - id: t('mobile.failed_network_action.title'), - defaultMessage: 'No internet connection', - }, - errorDescription: { - id: t('mobile.failed_network_action.description'), - defaultMessage: 'There seems to be a problem with your internet connection. Make sure you have an active connection and try again.', - }, + actionId: t('mobile.failed_network_action.retry'), + actionDefaultMessage: 'try again', + errorId: t('mobile.failed_network_action.shortDescription'), + errorDefaultMessage: 'Messages will load when you have an internet connection or {refresh}.', }; render() { - const {theme, onRetry} = this.props; + const {action, actionId, actionDefaultMessage, errorId, errorDefaultMessage, theme} = this.props; const style = getStyleFromTheme(theme); + const errorTitle = { + id: t('mobile.failed_network_action.title'), + defaultMessage: 'No internet connection', + }; + return ( + ), + }} /> - {onRetry && - - - - } ); } @@ -75,25 +76,23 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { 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', }, - retryContainer: { - marginTop: 30, - }, - retry: { - color: changeOpacity(theme.centerChannelColor, 0.7), - fontSize: 16, - fontWeight: '600', + link: { + color: theme.linkColor, }, }; }); diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js index 8476eb688..52b9cc7a1 100644 --- a/app/screens/channel/channel_base.js +++ b/app/screens/channel/channel_base.js @@ -257,12 +257,21 @@ export default class ChannelBase extends PureComponent { if (!currentChannelId) { if (channelsRequestFailed) { - const PostListRetry = require('app/components/post_list_retry').default; + const FailedNetworkAction = require('app/components/failed_network_action').default; + return ( - + + + + + + ); } diff --git a/app/screens/channel/channel_post_list/channel_post_list.js b/app/screens/channel/channel_post_list/channel_post_list.js index 7cf52e4a1..93379612a 100644 --- a/app/screens/channel/channel_post_list/channel_post_list.js +++ b/app/screens/channel/channel_post_list/channel_post_list.js @@ -15,7 +15,6 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import AnnouncementBanner from 'app/components/announcement_banner'; import PostList from 'app/components/post_list'; -import PostListRetry from 'app/components/post_list_retry'; import RetryBarIndicator from 'app/components/retry_bar_indicator'; import {ViewTypes} from 'app/constants'; import tracker from 'app/utils/time_tracker'; @@ -188,9 +187,11 @@ export default class ChannelPostList extends PureComponent { let component; if (visiblePostIds.length === 0 && channelRefreshingFailed) { + const FailedNetworkAction = require('app/components/failed_network_action').default; + component = ( - ); 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 8010d69c3..4f985c336 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 @@ -11,18 +11,10 @@ exports[`ErrorTeamsList should match snapshot 1`] = ` > ; } return ( - + ); } } -const getStyleSheet = makeStyleSheetFromTheme((theme) => { +const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { container: { backgroundColor: theme.centerChannelBg, diff --git a/app/screens/select_team/__snapshots__/select_team.test.js.snap b/app/screens/select_team/__snapshots__/select_team.test.js.snap index 240d56946..bae4affb8 100644 --- a/app/screens/select_team/__snapshots__/select_team.test.js.snap +++ b/app/screens/select_team/__snapshots__/select_team.test.js.snap @@ -2,18 +2,10 @@ exports[`SelectTeam should match snapshot for fail of teams 1`] = ` { const {currentUrl, theme} = this.props; - const styles = getStyleSheet(theme); + const style = getStyleFromTheme(theme); if (item.id === 'mobile.select_team.no_teams') { return ( - - + + @@ -189,29 +178,29 @@ export default class SelectTeam extends PureComponent { } return ( - + this.onSelectTeam(item))} > - + - + {item.display_name} {`${currentUrl}/${item.name}`} @@ -225,32 +214,32 @@ export default class SelectTeam extends PureComponent { render() { const {theme} = this.props; const {teams} = this.state; - const styles = getStyleSheet(theme); + const style = getStyleFromTheme(theme); if (this.state.joining) { return ; } if (this.props.teamsRequest.status === RequestStatus.FAILURE) { + const FailedNetworkAction = require('app/components/failed_network_action').default; + return ( ); } if (this.props.currentUserIsGuest) { return ( - + - + @@ -258,17 +247,17 @@ export default class SelectTeam extends PureComponent { } return ( - + - - + + - + { +const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { container: { backgroundColor: theme.centerChannelBg, diff --git a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap index 313792907..f4740932d 100644 --- a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap +++ b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap @@ -289,18 +289,10 @@ exports[`TermsOfService should match snapshot for fail of get terms 1`] = ` > ); @@ -292,9 +279,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { backgroundColor: theme.centerChannelBg, flex: 1, }, - linkText: { - color: theme.linkColor, - }, scrollView: { flex: 1, backgroundColor: theme.centerChannelBg, diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 4347d6a20..26c3fb32c 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -76,7 +76,6 @@ "create_post.write": "Write to {channelDisplayName}", "edit_post.editPost": "Edit the post...", "edit_post.save": "Save", - "error.team_not_found.title": "Team Not Found", "file_attachment.download": "Download", "file_upload.fileAbove": "File above {max}MB cannot be uploaded: {filename}", "get_post_link_modal.title": "Copy Permalink", @@ -247,9 +246,8 @@ "mobile.extension.max_file_size": "File attachments shared in Mattermost must be less than {size}.", "mobile.extension.permission": "Mattermost needs access to the device storage to share files.", "mobile.extension.title": "Share in Mattermost", - "mobile.failed_network_action.description": "There seems to be a problem with your internet connection. Make sure you have an active connection and try again.", - "mobile.failed_network_action.retry": "Try Again", - "mobile.failed_network_action.shortDescription": "Make sure you have an active connection and try again.", + "mobile.failed_network_action.retry": "try again", + "mobile.failed_network_action.shortDescription": "Messages will load when you have an internet connection or {refresh}.", "mobile.failed_network_action.title": "No internet connection", "mobile.file_upload.browse": "Browse Files", "mobile.file_upload.camera_photo": "Take Photo", @@ -441,8 +439,7 @@ "mobile.terms_of_service.alert_cancel": "Cancel", "mobile.terms_of_service.alert_ok": "OK", "mobile.terms_of_service.alert_retry": "Try Again", - "mobile.terms_of_service.get_terms_error_description": "Make sure you have an active internet connection and try again. If this issue persists, contact your System Administrator.", - "mobile.terms_of_service.get_terms_error_title": "Unable to load terms of service.", + "mobile.terms_of_service.get_terms_error_description": "Make sure you have an internet connection or {refresh}. If this issue persists, contact your System Administrator.", "mobile.terms_of_service.terms_rejected": "You must agree to the terms of service before accessing {siteName}. Please contact your System Administrator for more details.", "mobile.timezone_settings.automatically": "Set automatically", "mobile.timezone_settings.manual": "Change timezone",