-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: remove getDisplayNameForTypingIndicator #31495
Changes from 5 commits
a57d229
9093ff3
6358b1e
1ff3017
b30cb29
921a070
2ffcec2
5fec558
fe1e320
e7d667c
8af4811
9d26c00
c0a9c6a
e6ed623
e186fd3
3ec5e40
88cf035
31df21e
8fb1f2f
69ba3a0
c1435f4
a4e422f
10f49fa
1bab5a9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -2,38 +2,43 @@ import PropTypes from 'prop-types'; | |||||
import React, {useMemo} from 'react'; | ||||||
import {withOnyx} from 'react-native-onyx'; | ||||||
import _ from 'underscore'; | ||||||
import networkPropTypes from '@components/networkPropTypes'; | ||||||
import {withNetwork} from '@components/OnyxProvider'; | ||||||
import Text from '@components/Text'; | ||||||
import TextWithEllipsis from '@components/TextWithEllipsis'; | ||||||
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; | ||||||
import compose from '@libs/compose'; | ||||||
import useLocalize from '@hooks/useLocalize'; | ||||||
import useNetwork from '@hooks/useNetwork'; | ||||||
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; | ||||||
import * as ReportUtils from '@libs/ReportUtils'; | ||||||
import useThemeStyles from '@styles/useThemeStyles'; | ||||||
import * as PersonalDetails from '@userActions/PersonalDetails'; | ||||||
import ONYXKEYS from '@src/ONYXKEYS'; | ||||||
|
||||||
const propTypes = { | ||||||
/** Key-value pairs of user accountIDs/logins and whether or not they are typing. Keys are accountIDs or logins. */ | ||||||
userTypingStatuses: PropTypes.objectOf(PropTypes.bool), | ||||||
|
||||||
/** Information about the network */ | ||||||
network: networkPropTypes.isRequired, | ||||||
|
||||||
...withLocalizePropTypes, | ||||||
}; | ||||||
|
||||||
const defaultProps = { | ||||||
userTypingStatuses: {}, | ||||||
}; | ||||||
|
||||||
function ReportTypingIndicator(props) { | ||||||
const {translate} = useLocalize(); | ||||||
const {isOffline} = useNetwork(); | ||||||
|
||||||
const styles = useThemeStyles(); | ||||||
const usersTyping = useMemo(() => _.filter(_.keys(props.userTypingStatuses), (loginOrAccountID) => props.userTypingStatuses[loginOrAccountID]), [props.userTypingStatuses]); | ||||||
const firstUserTyping = usersTyping[0]; | ||||||
const firstUserTypingID = useMemo( | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please move old comment to here
|
||||||
() => (firstUserTyping && Number.isNaN(Number(firstUserTyping)) ? PersonalDetailsUtils.getAccountIDsByLogins([firstUserTyping])[0] : firstUserTyping), | ||||||
[firstUserTyping], | ||||||
); | ||||||
|
||||||
// If we are offline, the user typing statuses are not up-to-date so do not show them | ||||||
if (props.network.isOffline) { | ||||||
if (isOffline) { | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
return null; | ||||||
} | ||||||
|
||||||
const firstUserTypingDisplayName = ReportUtils.getDisplayNameForParticipant(firstUserTypingID, false, false); | ||||||
|
||||||
const numUsersTyping = _.size(usersTyping); | ||||||
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
// Decide on the Text element that will hold the display based on the number of users that are typing. | ||||||
|
@@ -44,8 +49,8 @@ function ReportTypingIndicator(props) { | |||||
case 1: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. replace switch/case with ? :
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. as the components for this are not one-liners I'd rather do it with an if statement, it'll be more readable |
||||||
return ( | ||||||
<TextWithEllipsis | ||||||
leadingText={PersonalDetails.getDisplayNameForTypingIndicator(usersTyping[0], props.translate('common.someone'))} | ||||||
trailingText={` ${props.translate('reportTypingIndicator.isTyping')}`} | ||||||
leadingText={firstUserTypingDisplayName || translate('common.someone')} | ||||||
trailingText={` ${translate('reportTypingIndicator.isTyping')}`} | ||||||
textStyle={[styles.chatItemComposeSecondaryRowSubText]} | ||||||
wrapperStyle={[styles.chatItemComposeSecondaryRow, styles.flex1]} | ||||||
leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset} | ||||||
|
@@ -58,8 +63,8 @@ function ReportTypingIndicator(props) { | |||||
style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset]} | ||||||
numberOfLines={1} | ||||||
> | ||||||
{props.translate('reportTypingIndicator.multipleUsers')} | ||||||
{` ${props.translate('reportTypingIndicator.areTyping')}`} | ||||||
{translate('reportTypingIndicator.multipleUsers')} | ||||||
{` ${translate('reportTypingIndicator.areTyping')}`} | ||||||
</Text> | ||||||
); | ||||||
} | ||||||
|
@@ -69,13 +74,9 @@ ReportTypingIndicator.propTypes = propTypes; | |||||
ReportTypingIndicator.defaultProps = defaultProps; | ||||||
ReportTypingIndicator.displayName = 'ReportTypingIndicator'; | ||||||
|
||||||
export default compose( | ||||||
withLocalize, | ||||||
withNetwork(), | ||||||
withOnyx({ | ||||||
userTypingStatuses: { | ||||||
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, | ||||||
initialValue: {}, | ||||||
}, | ||||||
}), | ||||||
)(ReportTypingIndicator); | ||||||
export default withOnyx({ | ||||||
userTypingStatuses: { | ||||||
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, | ||||||
initialValue: {}, | ||||||
}, | ||||||
})(ReportTypingIndicator); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As we're touching this component, can we destructure props?