Skip to content

Commit

Permalink
fix scrolling to the bottom on action deletion from the same account …
Browse files Browse the repository at this point in the history
…on a different device
  • Loading branch information
perunt committed Jan 25, 2024
1 parent c3d93ea commit 1d4aef1
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 15 deletions.
1 change: 1 addition & 0 deletions src/components/InvertedFlatList/BaseInvertedFlatList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,4 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
BaseInvertedFlatList.displayName = 'BaseInvertedFlatList';

export default forwardRef(BaseInvertedFlatList);
export {AUTOSCROLL_TO_TOP_THRESHOLD};
21 changes: 8 additions & 13 deletions src/pages/home/report/ReportActionsList.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {DeviceEventEmitter, InteractionManager} from 'react-native';
import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
import _ from 'underscore';
import InvertedFlatList from '@components/InvertedFlatList';
import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
import {withPersonalDetails} from '@components/OnyxProvider';
import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
Expand Down Expand Up @@ -177,12 +178,7 @@ function ReportActionsList({
const previousLastIndex = useRef(lastActionIndex);

const linkedReportActionID = lodashGet(route, 'params.reportActionID', '');
const lastPendingAction = lodashGet(sortedReportActions, [0, 'pendingAction'])
const isLastPendingActionIsAdd = lastPendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
const isLastPendingActionIsDelete = lastPendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

// This is utilized for automatically scrolling to the bottom when sending a new message, in cases where comment linking is used and the user is already at the end of the list.
const isNewestActionAvailableAndPendingAdd = linkedReportActionID && isLastPendingActionIsAdd;
const isLastPendingActionIsDelete = lodashGet(sortedReportActions, [0, 'pendingAction']) === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

// This state is used to force a re-render when the user manually marks a message as unread
// by using a timestamp you can force re-renders without having to worry about if another message was marked as unread before
Expand All @@ -198,17 +194,16 @@ function ReportActionsList({

useEffect(() => {
if (
(previousLastIndex.current !== lastActionIndex && reportActionSize.current > sortedVisibleReportActions.length && hasNewestReportAction) ||
isNewestActionAvailableAndPendingAdd
scrollingVerticalOffset.current < AUTOSCROLL_TO_TOP_THRESHOLD &&
previousLastIndex.current !== lastActionIndex &&
reportActionSize.current > sortedVisibleReportActions.length &&
hasNewestReportAction
) {
// runAfterInteractions is used for isNewestActionAvailableAndPendingAdd
InteractionManager.runAfterInteractions(() => {
reportScrollManager.scrollToBottom();
});
reportScrollManager.scrollToBottom();
}
previousLastIndex.current = lastActionIndex;
reportActionSize.current = sortedVisibleReportActions.length;
}, [lastActionIndex, sortedVisibleReportActions, reportScrollManager, hasNewestReportAction, isLastPendingActionIsAdd, linkedReportActionID, isNewestActionAvailableAndPendingAdd]);
}, [lastActionIndex, sortedVisibleReportActions, reportScrollManager, hasNewestReportAction, linkedReportActionID]);

useEffect(() => {
// If the reportID changes, we reset the userActiveSince to null, we need to do it because
Expand Down
4 changes: 2 additions & 2 deletions src/pages/home/report/ReportActionsView.js
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,7 @@ function ReportActionsView({reportActions: allReportActions, ...props}) {
]);

// Check if the first report action in the list is the one we're currently linked to
const isTheFirstReportActionIsLinked = firstReportActionID !== reportActionID;
const isTheFirstReportActionIsLinked = firstReportActionID === reportActionID;

useEffect(() => {
if (isTheFirstReportActionIsLinked) {
Expand All @@ -444,7 +444,7 @@ function ReportActionsView({reportActions: allReportActions, ...props}) {
return null;
}
// AutoScroll is disabled when we do linking to a specific reportAction
const shouldEnableAutoScroll = hasNewestReportAction && (!reportActionID || isInitialLinkedView);
const shouldEnableAutoScroll = hasNewestReportAction && (!reportActionID || !isInitialLinkedView);

return (
<>
Expand Down

0 comments on commit 1d4aef1

Please sign in to comment.