Merge pull request #30354 from kacper-mikolajczak/perf/report-screen-…

…tti-2

src/components/ReportActionItem/TaskPreview.js

@@ -7,6 +7,7 @@ import _ from 'underscore';
 import Checkbox from '@components/Checkbox';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import refPropTypes from '@components/refPropTypes';
 import RenderHTML from '@components/RenderHTML';
@@ -21,7 +22,6 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import * as Session from '@userActions/Session';
@@ -31,9 +31,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
- /** All personal details asssociated with user */
- personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
-
  /** The ID of the associated taskReport */
  taskReportID: PropTypes.string.isRequired,
 
@@ -73,12 +70,12 @@ const propTypes = {
 
 const defaultProps = {
  ...withCurrentUserPersonalDetailsDefaultProps,
- personalDetailsList: {},
  taskReport: {},
  isHovered: false,
 };
 
 function TaskPreview(props) {
+ const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
  // The reportAction might not contain details regarding the taskReport
  // Only the direct parent reportAction will contain details about the taskReport
  // Other linked reportActions will only contain the taskReportID and we will grab the details from there
@@ -87,8 +84,8 @@ function TaskPreview(props) {
  : props.action.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.action.childStatusNum === CONST.REPORT.STATUS.APPROVED;
  const taskTitle = props.taskReport.reportName || props.action.childReportName;
  const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(props.taskReport) || props.action.childManagerAccountID;
- const assigneeLogin = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], '');
- const assigneeDisplayName = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], '');
+ const assigneeLogin = lodashGet(personalDetails, [taskAssigneeAccountID, 'login'], '');
+ const assigneeDisplayName = lodashGet(personalDetails, [taskAssigneeAccountID, 'displayName'], '');
  const taskAssignee = assigneeDisplayName || LocalePhoneNumber.formatPhoneNumber(assigneeLogin);
  const htmlForTaskPreview =
  taskAssignee && taskAssigneeAccountID !== 0
@@ -149,9 +146,5 @@ export default compose(
  key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
  initialValue: {},
  },
- personalDetailsList: {
- key: ONYXKEYS.PERSONAL_DETAILS_LIST,
- initialValue: {},
- },
  }),
 )(TaskPreview);

src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js

@@ -2,23 +2,23 @@ import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import React, {useCallback} from 'react';
 import {Text, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './userDetailsTooltipPropTypes';
 
 function BaseUserDetailsTooltip(props) {
  const {translate} = useLocalize();
+ const personalDetails = usePersonalDetails();
 
- const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails);
+ const userDetails = lodashGet(personalDetails, props.accountID, props.fallbackUserDetails);
  let userDisplayName = ReportUtils.getDisplayNameForParticipant(props.accountID);
  let userLogin = (userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : '';
  let userAvatar = userDetails.avatar;
@@ -27,7 +27,7 @@ function BaseUserDetailsTooltip(props) {
  // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
  // the Copilot feature is implemented.
  if (props.delegateAccountID) {
- const delegateUserDetails = lodashGet(props.personalDetailsList, props.delegateAccountID, {});
+ const delegateUserDetails = lodashGet(personalDetails, props.delegateAccountID, {});
  const delegateUserDisplayName = ReportUtils.getDisplayNameForParticipant(props.delegateAccountID);
  userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`;
  userLogin = delegateUserDetails.login;
@@ -79,8 +79,4 @@ BaseUserDetailsTooltip.propTypes = propTypes;
 BaseUserDetailsTooltip.defaultProps = defaultProps;
 BaseUserDetailsTooltip.displayName = 'BaseUserDetailsTooltip';
 
-export default withOnyx({
- personalDetailsList: {
- key: ONYXKEYS.PERSONAL_DETAILS_LIST,
- },
-})(BaseUserDetailsTooltip);
+export default BaseUserDetailsTooltip;

src/components/withCurrentUserPersonalDetails.tsx

@@ -2,15 +2,14 @@ import React, {ComponentType, ForwardedRef, RefAttributes, useMemo} from 'react'
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, Session} from '@src/types/onyx';
+import {usePersonalDetails} from './OnyxProvider';
 
 type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
 
 type OnyxProps = {
- /** Personal details of all the users, including current user */
- personalDetails: OnyxEntry<Record<string, PersonalDetails>>;
-
  /** Session of the current user */
  session: OnyxEntry<Session>;
 };
@@ -34,8 +33,9 @@ export default function <TProps extends ComponentProps, TRef>(
  WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentType<Omit<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, keyof OnyxProps>> {
  function WithCurrentUserPersonalDetails(props: Omit<TProps, keyof HOCProps>, ref: ForwardedRef<TRef>) {
+ const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
  const accountID = props.session?.accountID ?? 0;
- const accountPersonalDetails = props.personalDetails?.[accountID];
+ const accountPersonalDetails = personalDetails?.[accountID];
  const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
  () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}),
  [accountPersonalDetails, accountID],
@@ -55,9 +55,6 @@ export default function <TProps extends ComponentProps, TRef>(
  const withCurrentUserPersonalDetails = React.forwardRef(WithCurrentUserPersonalDetails);
 
  return withOnyx<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, OnyxProps>({
- personalDetails: {
- key: ONYXKEYS.PERSONAL_DETAILS_LIST,
- },
  session: {
  key: ONYXKEYS.SESSION,
  },

tests/ui/UnreadIndicatorsTest.js

@@ -130,7 +130,8 @@ function signInAndGetAppWithUnreadChat() {
  // Render the App and sign in as a test user.
  render(<App />);
  return waitForBatchedUpdatesWithAct()
- .then(() => {
+ .then(async () => {
+ await waitForBatchedUpdatesWithAct();
  const hintText = Localize.translateLocal('loginForm.loginForm');
  const loginForm = screen.queryAllByLabelText(hintText);
  expect(loginForm).toHaveLength(1);