diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index e4b0eef6ca52..bbfb47ad8e1f 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -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,32 +62,31 @@ type SuggestionsRef = { getIsSuggestionsMenuVisible: () => boolean; }; -type ReportActionComposeProps = WithCurrentUserPersonalDetailsProps & - Pick & { - /** A method to call when the form is submitted */ - onSubmit: (newComment: string) => void; +type ReportActionComposeProps = 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 @@ -100,7 +98,6 @@ const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); let onSubmitAction = noop; function ReportActionCompose({ - currentUserPersonalDetails, disabled = false, isComposerFullSize = false, onSubmit, @@ -120,6 +117,7 @@ function ReportActionCompose({ const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {isOffline} = useNetwork(); const actionButtonRef = useRef(null); + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const navigation = useNavigation(); const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE); @@ -548,6 +546,6 @@ function ReportActionCompose({ ReportActionCompose.displayName = 'ReportActionCompose'; -export default withCurrentUserPersonalDetails(memo(ReportActionCompose)); +export default memo(ReportActionCompose); export {onSubmitAction}; export type {SuggestionsRef, ComposerRef}; diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 8f5fc907a962..422a1a71401a 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(); @@ -664,6 +663,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 3ff8f2b0eb8e..1845a07681e3 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 57eb51df137d..fa0eed4d57c5 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;