Merge pull request #49914 from Krishna2323/krishna2323/issue/49337

fix: Web - Settings is opened on the left with a conversation opened on the right.

src/pages/settings/Profile/CustomStatus/StatusPage.tsx

@@ -1,7 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
 import FormProvider from '@components/Form/FormProvider';
@@ -15,9 +14,8 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -30,21 +28,16 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/SettingsStatusSetForm';
-import type {CustomStatusDraft} from '@src/types/onyx';
-
-type StatusPageOnyxProps = {
-    draftStatus: OnyxEntry<CustomStatusDraft>;
-};
-
-type StatusPageProps = StatusPageOnyxProps & WithCurrentUserPersonalDetailsProps;
 
 const initialEmoji = '💬';
 
-function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) {
+function StatusPage() {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
+    const [draftStatus] = useOnyx(ONYXKEYS.CUSTOM_STATUS_DRAFT);
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const formRef = useRef<FormRef>(null);
     const [brickRoadIndicator, setBrickRoadIndicator] = useState<ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>>();
     const currentUserEmojiCode = currentUserPersonalDetails?.status?.emojiCode ?? '';
@@ -97,6 +90,9 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
     const navigateBackToPreviousScreen = useCallback(() => Navigation.goBack(), []);
     const updateStatus = useCallback(
         ({emojiCode, statusText}: FormOnyxValues<typeof ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM>) => {
+            if (navigateBackToPreviousScreenTask.current) {
+                return;
+            }
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
             const clearAfterTime = draftClearAfter || currentUserClearAfter || CONST.CUSTOM_STATUS_TYPES.NEVER;
             const isValid = DateUtils.isTimeAtLeastOneMinuteInFuture({dateTimeString: clearAfterTime});
@@ -118,6 +114,9 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
     );
 
     const clearStatus = () => {
+        if (navigateBackToPreviousScreenTask.current) {
+            return;
+        }
         User.clearCustomStatus();
         User.updateDraftCustomStatus({
             text: '',
@@ -229,10 +228,4 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
 
 StatusPage.displayName = 'StatusPage';
 
-export default withCurrentUserPersonalDetails(
-    withOnyx<StatusPageProps, StatusPageOnyxProps>({
-        draftStatus: {
-            key: () => ONYXKEYS.CUSTOM_STATUS_DRAFT,
-        },
-    })(StatusPage),
-);
+export default StatusPage;