Remove class component from ReportActionsList
#16613
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,6 +1,6 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React, {useCallback, useEffect, useState} from 'react'; | ||
| import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated'; | ||
| import _ from 'underscore'; | ||
| import InvertedFlatList from '../../../components/InvertedFlatList'; | ||
| import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState'; | ||
|
|
@@ -17,11 +17,16 @@ import participantPropTypes from '../../../components/participantPropTypes'; | |
| import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; | ||
| import reportActionPropTypes from './reportActionPropTypes'; | ||
| import CONST from '../../../CONST'; | ||
| import reportPropTypes from '../../reportPropTypes'; | ||
| import networkPropTypes from '../../../components/networkPropTypes'; | ||
| import withLocalize from '../../../components/withLocalize'; | ||
|
|
||
| // This is a workaround to a reanimated issue -> https://github.com/software-mansion/react-native-reanimated/issues/3355 | ||
| if (process.browser) { | ||
| // eslint-disable-next-line no-underscore-dangle | ||
| window._frameTimestamp = null; | ||
| } | ||
|
|
||
| const propTypes = { | ||
| /** Position of the "New" line marker */ | ||
| newMarkerReportActionID: PropTypes.string, | ||
|
|
@@ -64,54 +69,46 @@ const defaultProps = { | |
| isLoadingMoreReportActions: false, | ||
| }; | ||
|
|
||
| /** | ||
| * Create a unique key for each action in the FlatList. | ||
| * We use the reportActionID that is a string representation of a random 64-bit int, which should be | ||
| * random enough to avoid collisions | ||
| * @param {Object} item | ||
| * @param {Object} item.action | ||
| * @return {String} | ||
| */ | ||
| function keyExtractor(item) { | ||
| return item.reportActionID; | ||
| } | ||
|
Comment on lines
+74
to
+76
There was a problem hiding this comment. Why this function is defined outside There was a problem hiding this comment. We had some conversation here about it: https://expensify.slack.com/archives/C01GTK53T8Q/p1680096510744619 I don't have a strong preference though and just going with what we decided there. Can you think of some different or better arguments on why to do what you suggest? There was a problem hiding this comment. Just thought that since I think having the function defined outside is slightly better e.g. If we render 100 instances of that component all will use the same function, where if we defined it inside each will use it's own function (100 functions that are all the same). |
||
|
|
||
| const ReportActionsList = (props) => { | ||
| const opacity = useSharedValue(0); | ||
| const animatedStyles = useAnimatedStyle(() => ({ | ||
| opacity: withTiming(opacity.value, {duration: 100}), | ||
| })); | ||
| useEffect(() => { | ||
| opacity.value = 1; | ||
| }, []); | ||
| const [skeletonViewHeight, setSkeletonViewHeight] = useState(0); | ||
|
|
||
| /** | ||
| * Calculates the ideal number of report actions to render in the first render, based on the screen height and on | ||
| * the height of the smallest report action possible. | ||
| * @return {Number} | ||
| */ | ||
| const calculateInitialNumToRender = useCallback(() => { | ||
| const minimumReportActionHeight = styles.chatItem.paddingTop + styles.chatItem.paddingBottom | ||
| + variables.fontSizeNormalHeight; | ||
| const availableHeight = props.windowHeight | ||
| - (CONST.CHAT_FOOTER_MIN_HEIGHT + variables.contentHeaderHeight); | ||
| return Math.ceil(availableHeight / minimumReportActionHeight); | ||
| }, [props.windowHeight]); | ||
|
|
||
| const report = props.report; | ||
| const hasOutstandingIOU = props.report.hasOutstandingIOU; | ||
| const newMarkerReportActionID = props.newMarkerReportActionID; | ||
| const sortedReportActions = props.sortedReportActions; | ||
| const mostRecentIOUReportActionID = props.mostRecentIOUReportActionID; | ||
|
|
||
| /** | ||
| * Do not move this or make it an anonymous function it is a method | ||
|
|
@@ -124,87 +121,84 @@ class ReportActionsList extends React.Component { | |
| * | ||
| * @returns {React.Component} | ||
| */ | ||
| const renderItem = useCallback(({ | ||
| item: reportAction, | ||
| index, | ||
| }) => { | ||
| // When the new indicator should not be displayed we explicitly set it to null | ||
| const shouldDisplayNewMarker = reportAction.reportActionID === newMarkerReportActionID; | ||
| return ( | ||
| <ReportActionItem | ||
| report={report} | ||
| action={reportAction} | ||
| displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(sortedReportActions, index)} | ||
| shouldDisplayNewMarker={shouldDisplayNewMarker} | ||
| isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID} | ||
| hasOutstandingIOU={hasOutstandingIOU} | ||
| index={index} | ||
| /> | ||
| ); | ||
| }, [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID]); | ||
|
|
||
| // Native mobile does not render updates flatlist the changes even though component did update called. | ||
| // To notify there something changes we can use extraData prop to flatlist | ||
| const extraData = (!props.isDrawerOpen && props.isSmallScreenWidth) ? props.newMarkerReportActionID : undefined; | ||
| const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(props.personalDetails, props.report); | ||
| return ( | ||
| <Animated.View style={[animatedStyles, styles.flex1]}> | ||
| <InvertedFlatList | ||
| accessibilityLabel={props.translate('sidebarScreen.listOfChatMessages')} | ||
| ref={ReportScrollManager.flatListRef} | ||
| data={props.sortedReportActions} | ||
| renderItem={renderItem} | ||
| contentContainerStyle={[ | ||
| styles.chatContentScrollView, | ||
| shouldShowReportRecipientLocalTime && styles.pt0, | ||
| ]} | ||
| keyExtractor={keyExtractor} | ||
| initialRowHeight={32} | ||
| initialNumToRender={calculateInitialNumToRender()} | ||
| onEndReached={props.loadMoreChats} | ||
| onEndReachedThreshold={0.75} | ||
| ListFooterComponent={() => { | ||
| if (props.report.isLoadingMoreReportActions) { | ||
| return ( | ||
| <ReportActionsSkeletonView | ||
| containerHeight={CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT * 3} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| // Make sure the oldest report action loaded is not the first. This is so we do not show the | ||
| // skeleton view above the created action in a newly generated optimistic chat or one with not | ||
| // that many comments. | ||
| const lastReportAction = _.last(props.sortedReportActions) || {}; | ||
| if (props.report.isLoadingReportActions && lastReportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) { | ||
| return ( | ||
| <ReportActionsSkeletonView | ||
| containerHeight={skeletonViewHeight} | ||
| animate={!props.network.isOffline} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| }} | ||
| keyboardShouldPersistTaps="handled" | ||
| onLayout={(event) => { | ||
| setSkeletonViewHeight(event.nativeEvent.layout.height); | ||
| props.onLayout(event); | ||
| }} | ||
| onScroll={props.onScroll} | ||
| extraData={extraData} | ||
| /> | ||
| </Animated.View> | ||
| ); | ||
| }; | ||
|
|
||
| ReportActionsList.propTypes = propTypes; | ||
| ReportActionsList.defaultProps = defaultProps; | ||
| ReportActionsList.displayName = 'ReportActionsList'; | ||
|
|
||
| export default compose( | ||
| withDrawerState, | ||
|
|
||
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.
It looks like software-mansion/react-native-reanimated#3355 was fixed in software-mansion/react-native-reanimated@2fd0da8 which was released in 3.0.0, however you're still using 3.0.0-rc.10. It's okay to keep this workaround as for now but once you upgrade to 3.0.0+ (currently the latest version is 3.0.2) you should be safe to get rid of it.
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.
Hey there :-)
Using reanimated@3.0.2 I still seem to have this problem with next.js unfortunately.
next.js version is 12.1.5
The workaround from above still seems to work.