refactor: LHN dataflow rework #30242
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,20 @@ | ||
| import lodashGet from 'lodash/get'; | ||
| import PropTypes from 'prop-types'; | ||
| import React, {useCallback} from 'react'; | ||
| import {FlatList, View} from 'react-native'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import _ from 'underscore'; | ||
| import participantPropTypes from '@components/participantPropTypes'; | ||
| import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID'; | ||
| import compose from '@libs/compose'; | ||
| import * as OptionsListUtils from '@libs/OptionsListUtils'; | ||
| import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; | ||
| import reportPropTypes from '@pages/reportPropTypes'; | ||
| import styles from '@styles/styles'; | ||
| import variables from '@styles/variables'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import OptionRowLHNData from './OptionRowLHNData'; | ||
|
|
||
| const propTypes = { | ||
| /** Wrapper style for the section list */ | ||
|
|
@@ -27,14 +36,72 @@ const propTypes = { | |
|
|
||
| /** Whether to allow option focus or not */ | ||
| shouldDisableFocusOptions: PropTypes.bool, | ||
|
|
||
| /** The policy which the user has access to and which the report could be tied to */ | ||
| policy: PropTypes.shape({ | ||
| /** The ID of the policy */ | ||
| id: PropTypes.string, | ||
| /** Name of the policy */ | ||
| name: PropTypes.string, | ||
| /** Avatar of the policy */ | ||
| avatar: PropTypes.string, | ||
| }), | ||
|
|
||
| /** All reports shared with the user */ | ||
| reports: PropTypes.objectOf(reportPropTypes), | ||
|
|
||
| /** Array of report actions for this report */ | ||
| reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), | ||
|
|
||
| /** Indicates which locale the user currently has selected */ | ||
| preferredLocale: PropTypes.string, | ||
|
|
||
| /** List of users' personal details */ | ||
| personalDetails: PropTypes.objectOf(participantPropTypes), | ||
|
|
||
| /** The transaction from the parent report action */ | ||
| transactions: PropTypes.objectOf( | ||
| PropTypes.shape({ | ||
| /** The ID of the transaction */ | ||
| transactionID: PropTypes.string, | ||
| }), | ||
| ), | ||
| /** List of draft comments */ | ||
| draftComments: PropTypes.objectOf(PropTypes.string), | ||
| ...withCurrentReportIDPropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| style: styles.flex1, | ||
| shouldDisableFocusOptions: false, | ||
| reportActions: {}, | ||
| reports: {}, | ||
| policy: {}, | ||
| preferredLocale: CONST.LOCALES.DEFAULT, | ||
| personalDetails: {}, | ||
| transactions: {}, | ||
| draftComments: {}, | ||
| ...withCurrentReportIDDefaultProps, | ||
| }; | ||
|
|
||
| const keyExtractor = (item) => item; | ||
|
|
||
| function LHNOptionsList({ | ||
| style, | ||
| contentContainerStyles, | ||
| data, | ||
| onSelectRow, | ||
| optionMode, | ||
| shouldDisableFocusOptions, | ||
| reports, | ||
| reportActions, | ||
| policy, | ||
| preferredLocale, | ||
| personalDetails, | ||
| transactions, | ||
| draftComments, | ||
| currentReportID, | ||
| }) { | ||
| /** | ||
| * This function is used to compute the layout of any given item in our list. Since we know that each item will have the exact same height, this is a performance optimization | ||
| * so that the heights can be determined before the options are rendered. Otherwise, the heights are determined when each option is rendering and it causes a lot of overhead on large | ||
|
|
@@ -45,14 +112,17 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio | |
| * | ||
| * @returns {Object} | ||
| */ | ||
| const getItemLayout = useCallback( | ||
| (itemData, index) => { | ||
| const optionHeight = optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight; | ||
| return { | ||
| length: optionHeight, | ||
| offset: index * optionHeight, | ||
| index, | ||
| }; | ||
| }, | ||
| [optionMode], | ||
| ); | ||
|
|
||
| /** | ||
| * Function which renders a row in the list | ||
|
|
@@ -62,13 +132,38 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio | |
| * | ||
| * @return {Component} | ||
| */ | ||
| const renderItem = useCallback( | ||
| ({item: reportID}) => { | ||
| const itemFullReport = reports[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] || {}; | ||
| const itemReportActions = reportActions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`]; | ||
| const itemParentReportActions = reportActions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport.parentReportID}`]; | ||
| const itemPolicy = policy[`${ONYXKEYS.COLLECTION.POLICY}${itemFullReport.policyID}`]; | ||
| const itemTransaction = `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet( | ||
| itemParentReportActions, | ||
| [itemFullReport.parentReportActionID, 'originalMessage', 'IOUTransactionID'], | ||
| '', | ||
| )}`; | ||
| const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || ''; | ||
| const participantPersonalDetailList = _.values(OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails)); | ||
|
There was a problem hiding this comment. This misses an edge case where a user sent a last message in a room and then they leave the room. Then the report participant accountIDs do not include this user accountID and the user's email instead of their username is displayed in LHN. Issue #35477 |
||
| return ( | ||
adhorodyski marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <OptionRowLHNData | ||
| reportID={reportID} | ||
| fullReport={itemFullReport} | ||
| reportActions={itemReportActions} | ||
| parentReportActions={itemParentReportActions} | ||
| policy={itemPolicy} | ||
| personalDetails={participantPersonalDetailList} | ||
| transaction={itemTransaction} | ||
| receiptTransactions={transactions} | ||
| viewMode={optionMode} | ||
| isFocused={!shouldDisableFocusOptions && reportID === currentReportID} | ||
| onSelectRow={onSelectRow} | ||
| preferredLocale={preferredLocale} | ||
|
There was a problem hiding this comment. After adding There was a problem hiding this comment. Probably a false positive, the above is true for |
||
| comment={itemComment} | ||
| /> | ||
| ); | ||
| }, | ||
| [currentReportID, draftComments, onSelectRow, optionMode, personalDetails, policy, preferredLocale, reportActions, reports, shouldDisableFocusOptions, transactions], | ||
| ); | ||
|
|
||
| return ( | ||
|
|
@@ -80,7 +175,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio | |
| showsVerticalScrollIndicator={false} | ||
| data={data} | ||
| testID="lhn-options-list" | ||
| keyExtractor={keyExtractor} | ||
| stickySectionHeadersEnabled={false} | ||
| renderItem={renderItem} | ||
| getItemLayout={getItemLayout} | ||
|
|
@@ -96,4 +191,29 @@ LHNOptionsList.propTypes = propTypes; | |
| LHNOptionsList.defaultProps = defaultProps; | ||
| LHNOptionsList.displayName = 'LHNOptionsList'; | ||
|
|
||
| export default compose( | ||
| withCurrentReportID, | ||
| withOnyx({ | ||
| reports: { | ||
| key: ONYXKEYS.COLLECTION.REPORT, | ||
| }, | ||
| reportActions: { | ||
| key: ONYXKEYS.COLLECTION.REPORT_ACTIONS, | ||
| }, | ||
| policy: { | ||
| key: ONYXKEYS.COLLECTION.POLICY, | ||
| }, | ||
| preferredLocale: { | ||
| key: ONYXKEYS.NVP_PREFERRED_LOCALE, | ||
| }, | ||
| personalDetails: { | ||
| key: ONYXKEYS.PERSONAL_DETAILS_LIST, | ||
| }, | ||
| transactions: { | ||
| key: ONYXKEYS.COLLECTION.TRANSACTION, | ||
| }, | ||
| draftComments: { | ||
| key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT, | ||
| }, | ||
| }), | ||
| )(LHNOptionsList); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 know already, there was crash after this refactor.
itemParentReportActionswas expected to be object but there's case of null.