Fix warning "Function components cannot be given refs"

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<ComposerWithSuggestionsProps, 'reportID' | 'isEmptyChat' | 'isComposerFullSize' | 'lastReportAction'> & {
-        /** A method to call when the form is submitted */
-        onSubmit: (newComment: string) => void;
+type ReportActionComposeProps = Pick<ComposerWithSuggestionsProps, 'reportID' | 'isEmptyChat' | 'isComposerFullSize' | 'lastReportAction'> & {
+    /** A method to call when the form is submitted */
+    onSubmit: (newComment: string) => void;
 
-        /** The report currently being looked at */
-        report: OnyxEntry<OnyxTypes.Report>;
+    /** The report currently being looked at */
+    report: OnyxEntry<OnyxTypes.Report>;
 
-        /** 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<View | HTMLDivElement | null>(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};

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};

src/pages/home/report/ReportTypingIndicator.tsx

@@ -1,29 +1,22 @@
 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';
 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<ReportUserIsTyping>;
-};
-
-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<ReportTypingIndicatorProps, ReportTypingIndicatorOnyxProps>({
-    userTypingStatuses: {
-        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`,
-    },
-})(memo(ReportTypingIndicator));
+export default memo(ReportTypingIndicator);

src/pages/home/report/UserTypingEventListener.tsx

@@ -2,24 +2,20 @@ 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';
 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<UserTypingEventListenerProps, UserTypingEventListenerOnyxProps>({
-    lastVisitedPath: {
-        key: ONYXKEYS.LAST_VISITED_PATH,
-        selector: (path) => path ?? '',
-    },
-})(UserTypingEventListener);
+export default UserTypingEventListener;