diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index c327d7fa609..5d8e3e7f9dc 100644 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -2,7 +2,7 @@ import {Str} from 'expensify-common'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {Animated, Keyboard, View} from 'react-native'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import {useSharedValue} from 'react-native-reanimated'; import type {ValueOf} from 'type-fest'; @@ -49,11 +49,6 @@ import SafeAreaConsumer from './SafeAreaConsumer'; * to display a full size image or PDF modally with optional confirmation button. */ -type AttachmentModalOnyxProps = { - /** The transaction associated with the receipt attachment, if any */ - transaction: OnyxEntry; -}; - type ImagePickerResponse = { height?: number; name: string; @@ -70,7 +65,7 @@ type ChildrenProps = { show: () => void; }; -type AttachmentModalProps = AttachmentModalOnyxProps & { +type AttachmentModalProps = { /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */ source?: AvatarSource; @@ -154,7 +149,6 @@ function AttachmentModal({ isReceiptAttachment = false, isWorkspaceAvatar = false, maybeIcon = false, - transaction, headerTitle, children, fallbackSource, @@ -167,6 +161,11 @@ function AttachmentModal({ }: AttachmentModalProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const transactionID = useMemo(() => { + const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '-1', report?.parentReportActionID ?? '-1'); + return ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? '-1' : '-1'; + }, [report?.parentReportID, report?.parentReportActionID]); + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); const [isModalOpen, setIsModalOpen] = useState(defaultOpen); const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false); const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); @@ -634,14 +633,6 @@ function AttachmentModal({ AttachmentModal.displayName = 'AttachmentModal'; -export default withOnyx({ - transaction: { - key: ({report}) => { - const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '-1', report?.parentReportActionID ?? '-1'); - const transactionID = ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? '-1' : '-1'; - return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; - }, - }, -})(memo(AttachmentModal)); +export default memo(AttachmentModal); export type {Attachment, FileObject, ImagePickerResponse}; diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 2bbf04ec3d2..4ceaa1269ea 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -4,7 +4,7 @@ import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 're import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFocusEventData, TextInputSelectionChangeEventData} from 'react-native'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import {runOnUI, useSharedValue} from 'react-native-reanimated'; import type {Emoji} from '@assets/emojis/types'; import type {FileObject} from '@components/AttachmentModal'; @@ -19,8 +19,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {usePersonalDetails} from '@components/OnyxProvider'; import Text from '@components/Text'; import EducationalTooltip from '@components/Tooltip/EducationalTooltip'; -import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; -import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; +import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useDebounce from '@hooks/useDebounce'; import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength'; import useLocalize from '@hooks/useLocalize'; @@ -63,41 +62,31 @@ type SuggestionsRef = { getIsSuggestionsMenuVisible: () => boolean; }; -type ReportActionComposeOnyxProps = { - /** The NVP describing a user's block status */ - blockedFromConcierge: OnyxEntry; +type ReportActionComposeProps = Pick & { + /** A method to call when the form is submitted */ + onSubmit: (newComment: string) => void; - /** Whether the composer input should be shown */ - shouldShowComposeInput: OnyxEntry; -}; - -type ReportActionComposeProps = ReportActionComposeOnyxProps & - WithCurrentUserPersonalDetailsProps & - Pick & { - /** A method to call when the form is submitted */ - onSubmit: (newComment: string) => void; + /** The report currently being looked at */ + report: OnyxEntry; - /** The report currently being looked at */ - report: OnyxEntry; + /** The type of action that's pending */ + pendingAction?: OnyxCommon.PendingAction; - /** The type of action that's pending */ - pendingAction?: OnyxCommon.PendingAction; + /** Whether the report is ready for display */ + isReportReadyForDisplay?: boolean; - /** Whether the report is ready for display */ - isReportReadyForDisplay?: boolean; + /** A method to call when the input is focus */ + onComposerFocus?: () => void; - /** A method to call when the input is focus */ - onComposerFocus?: () => void; + /** A method to call when the input is blur */ + onComposerBlur?: () => void; - /** A method to call when the input is blur */ - onComposerBlur?: () => void; + /** Should the input be disabled */ + disabled?: boolean; - /** Should the input be disabled */ - disabled?: boolean; - - /** Should show educational tooltip */ - shouldShowEducationalTooltip?: boolean; - }; + /** Should show educational tooltip */ + shouldShowEducationalTooltip?: boolean; +}; // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will // prevent auto focus on existing chat for mobile device @@ -109,15 +98,12 @@ const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); let onSubmitAction = noop; function ReportActionCompose({ - blockedFromConcierge, - currentUserPersonalDetails, disabled = false, isComposerFullSize = false, onSubmit, pendingAction, report, reportID, - shouldShowComposeInput = true, isReportReadyForDisplay = true, isEmptyChat, lastReportAction, @@ -131,6 +117,9 @@ function ReportActionCompose({ const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {isOffline} = useNetwork(); const actionButtonRef = useRef(null); + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); + const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE); + const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const navigation = useNavigation(); @@ -571,15 +560,6 @@ function ReportActionCompose({ ReportActionCompose.displayName = 'ReportActionCompose'; -export default withCurrentUserPersonalDetails( - withOnyx({ - blockedFromConcierge: { - key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE, - }, - shouldShowComposeInput: { - key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, - }, - })(memo(ReportActionCompose)), -); +export default memo(ReportActionCompose); export {onSubmitAction}; export type {SuggestionsRef, ComposerRef}; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 9b91c5aba8b..7c8f1c7e234 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -3,7 +3,7 @@ import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useSta import type {GestureResponderEvent, TextInput} from 'react-native'; import {InteractionManager, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {Emoji} from '@assets/emojis/types'; import {AttachmentContext} from '@components/AttachmentContext'; import Button from '@components/Button'; @@ -64,7 +64,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; -import type {Errors} from '@src/types/onyx/OnyxCommon'; import type {JoinWorkspaceResolution} from '@src/types/onyx/OriginalMessage'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import {RestrictedReadOnlyContextMenuActions} from './ContextMenu/ContextMenuActions'; @@ -82,19 +81,6 @@ import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; -type ReportActionItemOnyxProps = { - /** IOU report for this action, if any */ - iouReport: OnyxEntry; - - emojiReactions: OnyxEntry; - - /** The user's wallet account */ - userWallet: OnyxEntry; - - /** The transaction (linked with the report action) route error */ - linkedTransactionRouteError: NonNullable> | null; -}; - type ReportActionItemProps = { /** Report for this action */ report: OnyxTypes.Report; @@ -150,7 +136,7 @@ type ReportActionItemProps = { /** Whether context menu should be displayed */ shouldDisplayContextMenu?: boolean; -} & ReportActionItemOnyxProps; +}; function ReportActionItem({ action, @@ -158,23 +144,26 @@ function ReportActionItem({ transactionThreadReport, linkedReportActionID, displayAsGroup, - emojiReactions, index, - iouReport, isMostRecentIOUReportAction, parentReportAction, shouldDisplayNewMarker, - userWallet, shouldHideThreadDividerLine = false, shouldShowSubscriptAvatar = false, onPress = undefined, isFirstVisibleReportAction = false, shouldUseThreadDividerLine = false, - linkedTransactionRouteError, hideThreadReplies = false, shouldDisplayContextMenu = true, parentReportActionForTransactionThread, }: ReportActionItemProps) { + const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${ReportActionsUtils.getIOUReportIDFromReportActionPreview(action) ?? -1}`, {initialValue: {} as OnyxTypes.Report}); + const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`, {initialValue: {}}); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); + const [linkedTransactionRouteError] = useOnyx( + `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`, + {selector: (transaction) => transaction?.errorFields?.route ?? null}, + ); const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const blockedFromConcierge = useBlockedFromConcierge(); @@ -997,61 +986,36 @@ function ReportActionItem({ ); } -export default withOnyx({ - iouReport: { - key: ({action}) => { - const iouReportID = ReportActionsUtils.getIOUReportIDFromReportActionPreview(action); - return `${ONYXKEYS.COLLECTION.REPORT}${iouReportID ?? -1}`; - }, - initialValue: {} as OnyxTypes.Report, - }, - emojiReactions: { - key: ({action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`, - initialValue: {}, - }, - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, - linkedTransactionRouteError: { - key: ({action}) => - `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`, - selector: (transaction: OnyxEntry) => transaction?.errorFields?.route ?? null, - }, -})( - memo(ReportActionItem, (prevProps, nextProps) => { - const prevParentReportAction = prevProps.parentReportAction; - const nextParentReportAction = nextProps.parentReportAction; - return ( - prevProps.displayAsGroup === nextProps.displayAsGroup && - prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction && - prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker && - lodashIsEqual(prevProps.emojiReactions, nextProps.emojiReactions) && - lodashIsEqual(prevProps.action, nextProps.action) && - lodashIsEqual(prevProps.iouReport, nextProps.iouReport) && - lodashIsEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) && - lodashIsEqual(prevProps.report.isDeletedParentAction, nextProps.report.isDeletedParentAction) && - lodashIsEqual(prevProps.report.errorFields, nextProps.report.errorFields) && - prevProps.report?.statusNum === nextProps.report?.statusNum && - prevProps.report?.stateNum === nextProps.report?.stateNum && - prevProps.report?.parentReportID === nextProps.report?.parentReportID && - prevProps.report?.parentReportActionID === nextProps.report?.parentReportActionID && - // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport - ReportUtils.isTaskReport(prevProps.report) === ReportUtils.isTaskReport(nextProps.report) && - prevProps.action.actionName === nextProps.action.actionName && - prevProps.report.reportName === nextProps.report.reportName && - prevProps.report.description === nextProps.report.description && - ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) && - prevProps.report.managerID === nextProps.report.managerID && - prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && - prevProps.report?.total === nextProps.report?.total && - prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal && - prevProps.report?.policyAvatar === nextProps.report?.policyAvatar && - prevProps.linkedReportActionID === nextProps.linkedReportActionID && - lodashIsEqual(prevProps.report.fieldList, nextProps.report.fieldList) && - lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) && - lodashIsEqual(prevProps.reportActions, nextProps.reportActions) && - lodashIsEqual(prevProps.linkedTransactionRouteError, nextProps.linkedTransactionRouteError) && - lodashIsEqual(prevParentReportAction, nextParentReportAction) - ); - }), -); +export default memo(ReportActionItem, (prevProps, nextProps) => { + const prevParentReportAction = prevProps.parentReportAction; + const nextParentReportAction = nextProps.parentReportAction; + return ( + prevProps.displayAsGroup === nextProps.displayAsGroup && + prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction && + prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker && + lodashIsEqual(prevProps.action, nextProps.action) && + lodashIsEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) && + lodashIsEqual(prevProps.report.isDeletedParentAction, nextProps.report.isDeletedParentAction) && + lodashIsEqual(prevProps.report.errorFields, nextProps.report.errorFields) && + prevProps.report?.statusNum === nextProps.report?.statusNum && + prevProps.report?.stateNum === nextProps.report?.stateNum && + prevProps.report?.parentReportID === nextProps.report?.parentReportID && + prevProps.report?.parentReportActionID === nextProps.report?.parentReportActionID && + // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport + ReportUtils.isTaskReport(prevProps.report) === ReportUtils.isTaskReport(nextProps.report) && + prevProps.action.actionName === nextProps.action.actionName && + prevProps.report.reportName === nextProps.report.reportName && + prevProps.report.description === nextProps.report.description && + ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) && + prevProps.report.managerID === nextProps.report.managerID && + prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && + prevProps.report?.total === nextProps.report?.total && + prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal && + prevProps.report?.policyAvatar === nextProps.report?.policyAvatar && + prevProps.linkedReportActionID === nextProps.linkedReportActionID && + lodashIsEqual(prevProps.report.fieldList, nextProps.report.fieldList) && + lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) && + lodashIsEqual(prevProps.reportActions, nextProps.reportActions) && + lodashIsEqual(prevParentReportAction, nextParentReportAction) + ); +}); diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index ec9f5ea9915..4031d2f330b 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -1,8 +1,6 @@ -import lodashIsEqual from 'lodash/isEqual'; import React, {memo} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; @@ -14,21 +12,9 @@ import * as ReportUtils from '@libs/ReportUtils'; import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; -type ReportActionItemCreatedOnyxProps = { - /** The report currently being looked at */ - report: OnyxEntry; - - /** The policy object for the current route */ - policy: OnyxEntry; - - /** Personal details of all the users */ - personalDetails: OnyxEntry; -}; - -type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { +type ReportActionItemCreatedProps = { /** The id of the report */ reportID: string; @@ -36,9 +22,12 @@ type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { // eslint-disable-next-line react/no-unused-prop-types policyID: string | undefined; }; -function ReportActionItemCreated({report, personalDetails, policy, reportID}: ReportActionItemCreatedProps) { +function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedProps) { const styles = useThemeStyles(); + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const {translate} = useLocalize(); const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout(); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); @@ -98,33 +87,4 @@ function ReportActionItemCreated({report, personalDetails, policy, reportID}: Re ReportActionItemCreated.displayName = 'ReportActionItemCreated'; -export default withOnyx({ - report: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - }, - - policy: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, - }, - - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, -})( - memo( - ReportActionItemCreated, - (prevProps, nextProps) => - prevProps.policy?.name === nextProps.policy?.name && - prevProps.policy?.avatarURL === nextProps.policy?.avatarURL && - prevProps.report?.stateNum === nextProps.report?.stateNum && - prevProps.report?.statusNum === nextProps.report?.statusNum && - prevProps.report?.lastReadTime === nextProps.report?.lastReadTime && - prevProps.report?.description === nextProps.report?.description && - prevProps.personalDetails === nextProps.personalDetails && - prevProps.policy?.description === nextProps.policy?.description && - prevProps.report?.reportName === nextProps.report?.reportName && - prevProps.report?.avatarUrl === nextProps.report?.avatarUrl && - lodashIsEqual(prevProps.report?.invoiceReceiver, nextProps.report?.invoiceReceiver) && - prevProps.report?.errorFields === nextProps.report?.errorFields, - ), -); +export default memo(ReportActionItemCreated); diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index d01efdf28e9..fe7e98ef4ba 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -11,8 +11,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import InvertedFlatList from '@components/InvertedFlatList'; import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList'; import {usePersonalDetails} from '@components/OnyxProvider'; -import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; -import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; +import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useReportScrollManager from '@hooks/useReportScrollManager'; @@ -39,7 +38,7 @@ import ReportActionsListItemRenderer from './ReportActionsListItemRenderer'; type LoadNewerChats = DebouncedFunc<(params: {distanceFromStart: number}) => void>; -type ReportActionsListProps = WithCurrentUserPersonalDetailsProps & { +type ReportActionsListProps = { /** The report currently being looked at */ report: OnyxTypes.Report; @@ -146,7 +145,6 @@ function ReportActionsList({ sortedReportActions, onScroll, mostRecentIOUReportActionID = '', - currentUserPersonalDetails, loadNewerChats, loadOlderChats, onLayout, @@ -156,6 +154,7 @@ function ReportActionsList({ shouldEnableAutoScrollToTopThreshold, parentReportActionForTransactionThread, }: ReportActionsListProps) { + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const personalDetailsList = usePersonalDetails() || CONST.EMPTY_OBJECT; const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -676,6 +675,6 @@ function ReportActionsList({ ReportActionsList.displayName = 'ReportActionsList'; -export default withCurrentUserPersonalDetails(memo(ReportActionsList)); +export default memo(ReportActionsList); export type {LoadNewerChats, ReportActionsListProps}; diff --git a/src/pages/home/report/ReportTypingIndicator.tsx b/src/pages/home/report/ReportTypingIndicator.tsx index 3ff8f2b0eb8..1845a07681e 100755 --- a/src/pages/home/report/ReportTypingIndicator.tsx +++ b/src/pages/home/report/ReportTypingIndicator.tsx @@ -1,6 +1,5 @@ import React, {memo, useMemo} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Text from '@components/Text'; import TextWithEllipsis from '@components/TextWithEllipsis'; import useLocalize from '@hooks/useLocalize'; @@ -8,22 +7,16 @@ import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {ReportUserIsTyping} from '@src/types/onyx'; -type ReportTypingIndicatorOnyxProps = { - /** Key-value pairs of user accountIDs/logins and whether or not they are typing. Keys are accountIDs or logins. */ - userTypingStatuses: OnyxEntry; -}; - -type ReportTypingIndicatorProps = ReportTypingIndicatorOnyxProps & { - // eslint-disable-next-line react/no-unused-prop-types -- This is used by withOnyx +type ReportTypingIndicatorProps = { reportID: string; }; -function ReportTypingIndicator({userTypingStatuses}: ReportTypingIndicatorProps) { +function ReportTypingIndicator({reportID}: ReportTypingIndicatorProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const [userTypingStatuses] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`); const styles = useThemeStyles(); const usersTyping = useMemo(() => Object.keys(userTypingStatuses ?? {}).filter((loginOrAccountID) => userTypingStatuses?.[loginOrAccountID]), [userTypingStatuses]); const firstUserTyping = usersTyping[0]; @@ -63,8 +56,4 @@ function ReportTypingIndicator({userTypingStatuses}: ReportTypingIndicatorProps) ReportTypingIndicator.displayName = 'ReportTypingIndicator'; -export default withOnyx({ - userTypingStatuses: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, - }, -})(memo(ReportTypingIndicator)); +export default memo(ReportTypingIndicator); diff --git a/src/pages/home/report/UserTypingEventListener.tsx b/src/pages/home/report/UserTypingEventListener.tsx index 57eb51df137..fa0eed4d57c 100644 --- a/src/pages/home/report/UserTypingEventListener.tsx +++ b/src/pages/home/report/UserTypingEventListener.tsx @@ -2,7 +2,7 @@ import type {RouteProp} from '@react-navigation/native'; import {useIsFocused, useRoute} from '@react-navigation/native'; import {useEffect, useRef} from 'react'; import {InteractionManager} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Navigation from '@libs/Navigation/Navigation'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as Report from '@userActions/Report'; @@ -10,16 +10,12 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -type UserTypingEventListenerOnyxProps = { - /** Stores last visited path */ - lastVisitedPath?: string; -}; - -type UserTypingEventListenerProps = UserTypingEventListenerOnyxProps & { +type UserTypingEventListenerProps = { /** The report currently being looked at */ report: OnyxTypes.Report; }; -function UserTypingEventListener({report, lastVisitedPath}: UserTypingEventListenerProps) { +function UserTypingEventListener({report}: UserTypingEventListenerProps) { + const [lastVisitedPath] = useOnyx(ONYXKEYS.LAST_VISITED_PATH, {selector: (path) => path ?? ''}); const didSubscribeToReportTypingEvents = useRef(false); const reportID = report.reportID; const isFocused = useIsFocused(); @@ -83,9 +79,4 @@ function UserTypingEventListener({report, lastVisitedPath}: UserTypingEventListe UserTypingEventListener.displayName = 'UserTypingEventListener'; -export default withOnyx({ - lastVisitedPath: { - key: ONYXKEYS.LAST_VISITED_PATH, - selector: (path) => path ?? '', - }, -})(UserTypingEventListener); +export default UserTypingEventListener;