Skip to content
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.

Sign up for GitHub

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

Jump to bottom

#2 - Fix new message shows every time add new message #45711

Merged
merged 5 commits into from
Jul 31, 2024
Merged

#2 - Fix new message shows every time add new message #45711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4b0d0de
Revert "Revert "Merge pull request #44724 from bernhardoj/fix/43486-n…
bernhardoj Jul 18, 2024
ef3331c
set default value for report metadata
bernhardoj Jul 18, 2024
728b9af
remove log
bernhardoj Jul 18, 2024
618acba
Merge branch 'main' into fix/43486-new-message-shows-every-time-add-n…
bernhardoj Jul 19, 2024
d9013e9
Merge branch 'main' into fix/43486-new-message-shows-every-time-add-n…
bernhardoj Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/PopoverMenu.tsx
View file
Open in desktop
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<number[]>([]);
const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState<readonly number[]>(CONST.EMPTY_ARRAY);

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

Expand All @@ -206,7 +206,7 @@ function PopoverMenu({
anchorAlignment={anchorAlignment}
onClose={() => {
setCurrentMenuItems(menuItems);
setEnteredSubMenuIndexes([]);
setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
onClose();
}}
isVisible={isVisible}
Expand Down
108 changes: 19 additions & 89 deletions src/pages/home/ReportScreen.tsx
View file
Open in desktop
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 {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import {useOnyx, withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} 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,29 +59,18 @@ 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>;
type ReportScreenNavigationProps = StackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT>;

/** The report metadata loading states */
reportMetadata: OnyxEntry<OnyxTypes.ReportMetadata>;
};
type ReportScreenProps = CurrentReportIDContextValue & ReportScreenNavigationProps;

type OnyxHOCProps = {
/** Onyx function that marks the component ready for hydration */
markReadyForHydration?: () => void;
const defaultReportMetadata = {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
hasLoadingOlderReportActionsError: false,
isLoadingNewerReportActions: false,
hasLoadingNewerReportActionsError: false,
};

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

type ReportScreenProps = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxProps & ReportScreenNavigationProps;

/** Get the currently viewed report ID as number */
function getReportID(route: ReportScreenNavigationProps['route']): string {
// The report ID is used in an onyx key. If it's an empty string, onyx will return
Expand Down Expand Up @@ -110,22 +99,7 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
return parentReportActions[parentReportActionID ?? '0'];
}

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

const [modal] = useOnyx(ONYXKEYS.MODAL);
const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, {initialValue: false});
const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportIDFromRoute}`, {initialValue: false});
const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, {initialValue: ''});
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});
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 = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, {initialValue: defaultReportMetadata});
const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED, {initialValue: false});
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true, initialValue: {}});
const [betas] = useOnyx(ONYXKEYS.BETAS);
// 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 @@ -673,15 +651,6 @@ function ReportScreen({
};
}, [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 @@ -802,7 +771,6 @@ function ReportScreen({
<DragAndDropProvider isDisabled={!isCurrentReportLoadedFromOnyx || !ReportUtils.canUserPerformWriteAction(report)}>
<View
style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
onLayout={onListLayout}
testID="report-actions-view-wrapper"
>
{!shouldShowSkeleton && (
Expand Down Expand Up @@ -849,42 +817,4 @@ function ReportScreen({
}

ReportScreen.displayName = 'ReportScreen';

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),
),
),
);
export default withCurrentReportID(memo(ReportScreen, (prevProps, nextProps) => prevProps.currentReportID === nextProps.currentReportID && lodashIsEqual(prevProps.route, nextProps.route)));
Loading