Skip to content

Commit

Permalink
Revert "Merge pull request Expensify#44724 from bernhardoj/fix/43486-…
Browse files Browse the repository at this point in the history
…new-message-shows-every-time-add-new-message"

This reverts commit 8d9b20b, reversing
changes made to f83abb0.
  • Loading branch information
mountiny committed Jul 18, 2024
1 parent 6ec0f15 commit 0a3604a
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 27 deletions.
8 changes: 4 additions & 4 deletions src/components/PopoverMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function PopoverMenu({

const [currentMenuItems, setCurrentMenuItems] = useState(menuItems);
const currentMenuItemsFocusedIndex = currentMenuItems?.findIndex((option) => option.isSelected);
const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState<readonly number[]>(CONST.EMPTY_ARRAY);
const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState<number[]>([]);

const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible});

Expand Down Expand Up @@ -158,7 +158,7 @@ function PopoverMenu({
onPress={() => {
setCurrentMenuItems(previousMenuItems);
setFocusedIndex(-1);
setEnteredSubMenuIndexes((prevState) => prevState.slice(0, -1));
enteredSubMenuIndexes.splice(-1);
}}
/>
);
Expand Down Expand Up @@ -195,7 +195,7 @@ function PopoverMenu({
if (menuItems.length === 0) {
return;
}
setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
setEnteredSubMenuIndexes([]);
setCurrentMenuItems(menuItems);
}, [menuItems]);

Expand All @@ -206,7 +206,7 @@ function PopoverMenu({
anchorAlignment={anchorAlignment}
onClose={() => {
setCurrentMenuItems(menuItems);
setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
setEnteredSubMenuIndexes([]);
onClose();
}}
isVisible={isVisible}
Expand Down
110 changes: 90 additions & 20 deletions src/pages/home/ReportScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import lodashIsEqual from 'lodash/isEqual';
import React, {memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import type {FlatList, ViewStyle} from 'react-native';
import {InteractionManager, View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import {useOnyx, withOnyx} from 'react-native-onyx';
import Banner from '@components/Banner';
import BlockingView from '@components/BlockingViews/BlockingView';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
Expand Down Expand Up @@ -59,9 +59,28 @@ import ReportFooter from './report/ReportFooter';
import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext';
import {ActionListContext, ReactionListContext} from './ReportScreenContext';

type ReportScreenOnyxProps = {
/** Tells us if the sidebar has rendered */
isSidebarLoaded: OnyxEntry<boolean>;

/** Beta features list */
betas: OnyxEntry<OnyxTypes.Beta[]>;

/** The policies which the user has access to */
policies: OnyxCollection<OnyxTypes.Policy>;

/** The report metadata loading states */
reportMetadata: OnyxEntry<OnyxTypes.ReportMetadata>;
};

type OnyxHOCProps = {
/** Onyx function that marks the component ready for hydration */
markReadyForHydration?: () => void;
};

type ReportScreenNavigationProps = StackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT>;

type ReportScreenProps = CurrentReportIDContextValue & ReportScreenNavigationProps;
type ReportScreenProps = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxProps & ReportScreenNavigationProps;

/** Get the currently viewed report ID as number */
function getReportID(route: ReportScreenNavigationProps['route']): string {
Expand Down Expand Up @@ -91,7 +110,22 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
return parentReportActions[parentReportActionID ?? '0'];
}

function ReportScreen({route, currentReportID = '', navigation}: ReportScreenProps) {
function ReportScreen({
betas = [],
route,
reportMetadata = {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
hasLoadingOlderReportActionsError: false,
isLoadingNewerReportActions: false,
hasLoadingNewerReportActionsError: false,
},
markReadyForHydration,
policies = {},
isSidebarLoaded = false,
currentReportID = '',
navigation,
}: ReportScreenProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const reportIDFromRoute = getReportID(route);
Expand All @@ -109,22 +143,10 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
const shouldUseNarrowLayout = isSmallScreenWidth || isReportOpenInRHP;

const [modal] = useOnyx(ONYXKEYS.MODAL);
const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportIDFromRoute}`, {initialValue: false});
const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, {initialValue: false});
const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, {initialValue: ''});
const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportIDFromRoute}`, {initialValue: false});
const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`, {allowStaleData: true});
const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, {
initialValue: {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
hasLoadingOlderReportActionsError: false,
isLoadingNewerReportActions: false,
hasLoadingNewerReportActionsError: false,
},
});
const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED, {initialValue: false});
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true, initialValue: {}});
const [betas] = useOnyx(ONYXKEYS.BETAS);
const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${getReportID(route)}`, {initialValue: false});
const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, {allowStaleData: true});
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportOnyx?.parentReportID || 0}`, {
canEvict: false,
Expand Down Expand Up @@ -614,6 +636,15 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
};
}, [report, didSubscribeToReportLeavingEvents, reportIDFromRoute]);

const onListLayout = useCallback(() => {
if (!markReadyForHydration) {
return;
}

markReadyForHydration();
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, []);

const actionListValue = useMemo((): ActionListContextType => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]);

// This helps in tracking from the moment 'route' triggers useMemo until isLoadingInitialReportActions becomes true. It prevents blinking when loading reportActions from cache.
Expand Down Expand Up @@ -725,6 +756,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
<DragAndDropProvider isDisabled={!isCurrentReportLoadedFromOnyx || !ReportUtils.canUserPerformWriteAction(report)}>
<View
style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
onLayout={onListLayout}
testID="report-actions-view-wrapper"
>
{shouldShowReportActionList && (
Expand Down Expand Up @@ -771,4 +803,42 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
}

ReportScreen.displayName = 'ReportScreen';
export default withCurrentReportID(memo(ReportScreen, (prevProps, nextProps) => prevProps.currentReportID === nextProps.currentReportID && lodashIsEqual(prevProps.route, nextProps.route)));

export default withCurrentReportID(
withOnyx<ReportScreenProps, ReportScreenOnyxProps>(
{
isSidebarLoaded: {
key: ONYXKEYS.IS_SIDEBAR_LOADED,
},
reportMetadata: {
key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`,
initialValue: {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
hasLoadingOlderReportActionsError: false,
isLoadingNewerReportActions: false,
hasLoadingNewerReportActionsError: false,
},
},
betas: {
key: ONYXKEYS.BETAS,
},
policies: {
key: ONYXKEYS.COLLECTION.POLICY,
allowStaleData: true,
},
},
true,
)(
memo(
ReportScreen,
(prevProps, nextProps) =>
prevProps.isSidebarLoaded === nextProps.isSidebarLoaded &&
lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) &&
lodashIsEqual(prevProps.betas, nextProps.betas) &&
lodashIsEqual(prevProps.policies, nextProps.policies) &&
prevProps.currentReportID === nextProps.currentReportID &&
lodashIsEqual(prevProps.route, nextProps.route),
),
),
);
4 changes: 1 addition & 3 deletions src/pages/home/report/ReportActionsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -271,9 +271,7 @@ function ReportActionsList({
const isFromNotification = route?.params?.referrer === CONST.REFERRER.NOTIFICATION;
if ((Visibility.isVisible() || isFromNotification) && scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD) {
Report.readNewestAction(report.reportID);
if (isFromNotification) {
Navigation.setParams({referrer: undefined});
}
Navigation.setParams({referrer: undefined});
} else {
readActionSkipped.current = true;
}
Expand Down

0 comments on commit 0a3604a

Please sign in to comment.