From 9280e1539d9a6c16273117bfc07ba8fd4f98b8d1 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Tue, 23 Aug 2022 15:30:50 +0530 Subject: [PATCH 1/7] fix: spacing on report typing indicator --- src/pages/home/report/ReportTypingIndicator.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 552e126b9c5c..204f7430c5e4 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -74,16 +74,13 @@ class ReportTypingIndicator extends React.Component { default: return ( - - {this.props.translate('reportTypingIndicator.multipleUsers')} - {` ${this.props.translate('reportTypingIndicator.areTyping')}`} - + ); } } From ec80b70182b0ab74c5554cc3e515fa01de5e7ef2 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Fri, 2 Sep 2022 17:32:09 +0530 Subject: [PATCH 2/7] style: fix eslint error --- src/pages/home/report/ReportTypingIndicator.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 204f7430c5e4..6bcac9965747 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -9,7 +9,6 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import * as PersonalDetails from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import Text from '../../../components/Text'; import TextWithEllipsis from '../../../components/TextWithEllipsis'; const propTypes = { From 2cbb90a8ba47e6c62aa56a35144c1e866212d9f6 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Mon, 26 Sep 2022 17:27:59 +0530 Subject: [PATCH 3/7] refactor: report typing indicator component --- .../home/report/ReportTypingIndicator.js | 36 +++++++++++-------- src/styles/styles.js | 1 - 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 6bcac9965747..f1b2a0dd0a54 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -9,7 +9,7 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import * as PersonalDetails from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import TextWithEllipsis from '../../../components/TextWithEllipsis'; +import Text from '../../../components/Text'; const propTypes = { /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */ @@ -62,24 +62,30 @@ class ReportTypingIndicator extends React.Component { case 1: return ( - + + {PersonalDetails.getDisplayName(this.state.usersTyping[0])} + {` ${this.props.translate('reportTypingIndicator.isTyping')}`} + ); default: return ( - + + {this.props.translate('reportTypingIndicator.multipleUsers')} + {` ${this.props.translate('reportTypingIndicator.areTyping')}`} + ); } } diff --git a/src/styles/styles.js b/src/styles/styles.js index c409888bc368..513625c56fcb 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1371,7 +1371,6 @@ const styles = { }, chatFooter: { - marginBottom: 5, paddingLeft: 20, paddingRight: 20, display: 'flex', From 068546a66d0d630081ee8aa32c7fb1b18aa36638 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Tue, 4 Oct 2022 14:02:24 +0530 Subject: [PATCH 4/7] fix: use same component for typing indicator --- .../home/report/ReportTypingIndicator.js | 36 ++++++++----------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index f1b2a0dd0a54..6bcac9965747 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -9,7 +9,7 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import * as PersonalDetails from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import Text from '../../../components/Text'; +import TextWithEllipsis from '../../../components/TextWithEllipsis'; const propTypes = { /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */ @@ -62,30 +62,24 @@ class ReportTypingIndicator extends React.Component { case 1: return ( - - {PersonalDetails.getDisplayName(this.state.usersTyping[0])} - {` ${this.props.translate('reportTypingIndicator.isTyping')}`} - + ); default: return ( - - {this.props.translate('reportTypingIndicator.multipleUsers')} - {` ${this.props.translate('reportTypingIndicator.areTyping')}`} - + ); } } From dee73e749fff0cbc9684ccf54a6c12fb36fc8906 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Tue, 18 Oct 2022 11:16:39 +0530 Subject: [PATCH 5/7] refactor: report typing indicator component --- .../home/report/ReportTypingIndicator.js | 48 +++++++++---------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 6bcac9965747..bd67ba41c5fd 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -51,37 +51,33 @@ class ReportTypingIndicator extends React.Component { const numUsersTyping = _.size(this.state.usersTyping); // If we are offline, the user typing statuses are not up-to-date so do not show them - if (this.props.network.isOffline) { + // Or if there is no user typing, we do not show the indicator + if (this.props.network.isOffline || numUsersTyping === 0) { return null; } // Decide on the Text element that will hold the display based on the number of users that are typing. - switch (numUsersTyping) { - case 0: - return null; - - case 1: - return ( - - ); - - default: - return ( - - ); + + let leadingText = ''; + let trailingText = ''; + + if (numUsersTyping === 1) { + leadingText = PersonalDetails.getDisplayName(this.state.usersTyping[0]); + trailingText = ` ${this.props.translate('reportTypingIndicator.isTyping')}`; + } else { + leadingText = this.props.translate('reportTypingIndicator.multipleUsers'); + trailingText = ` ${this.props.translate('reportTypingIndicator.areTyping')}`; } + + return ( + + ); } } From 8315f26184a995a33cfa5c8a8656c73891d7ff53 Mon Sep 17 00:00:00 2001 From: mdneyazahmad <77761491+mdneyazahmad@users.noreply.github.com> Date: Tue, 18 Oct 2022 21:02:41 +0530 Subject: [PATCH 6/7] docs: update comments Co-authored-by: Rajat Parashar --- src/pages/home/report/ReportTypingIndicator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index bd67ba41c5fd..8a79daea322d 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -51,7 +51,7 @@ class ReportTypingIndicator extends React.Component { const numUsersTyping = _.size(this.state.usersTyping); // If we are offline, the user typing statuses are not up-to-date so do not show them - // Or if there is no user typing, we do not show the indicator + // If there is no user typing or the device is offline, do not show the indicator. if (this.props.network.isOffline || numUsersTyping === 0) { return null; } From 018538d1ce66d8b75aa4eafc64a7d84b3869c999 Mon Sep 17 00:00:00 2001 From: Md Neyaz Ahmad Date: Wed, 19 Oct 2022 17:16:26 +0530 Subject: [PATCH 7/7] refactor: undo changes --- .../home/report/ReportTypingIndicator.js | 52 +++++++++++-------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 8a79daea322d..552e126b9c5c 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -9,6 +9,7 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import * as PersonalDetails from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import Text from '../../../components/Text'; import TextWithEllipsis from '../../../components/TextWithEllipsis'; const propTypes = { @@ -51,33 +52,40 @@ class ReportTypingIndicator extends React.Component { const numUsersTyping = _.size(this.state.usersTyping); // If we are offline, the user typing statuses are not up-to-date so do not show them - // If there is no user typing or the device is offline, do not show the indicator. - if (this.props.network.isOffline || numUsersTyping === 0) { + if (this.props.network.isOffline) { return null; } // Decide on the Text element that will hold the display based on the number of users that are typing. - - let leadingText = ''; - let trailingText = ''; - - if (numUsersTyping === 1) { - leadingText = PersonalDetails.getDisplayName(this.state.usersTyping[0]); - trailingText = ` ${this.props.translate('reportTypingIndicator.isTyping')}`; - } else { - leadingText = this.props.translate('reportTypingIndicator.multipleUsers'); - trailingText = ` ${this.props.translate('reportTypingIndicator.areTyping')}`; + switch (numUsersTyping) { + case 0: + return null; + + case 1: + return ( + + ); + + default: + return ( + + {this.props.translate('reportTypingIndicator.multipleUsers')} + {` ${this.props.translate('reportTypingIndicator.areTyping')}`} + + ); } - - return ( - - ); } }