From d3af8b5a3c95236c2a92f5e5e948fd7eebccb2ed Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 27 Dec 2024 19:51:48 +0530 Subject: [PATCH 1/4] fix: Room - No animation when returning to room settings after saving new room description. Signed-off-by: krishna2323 --- src/pages/GroupChatNameEditPage.tsx | 6 ++++-- src/pages/PrivateNotes/PrivateNotesEditPage.tsx | 2 +- src/pages/RoomDescriptionPage.tsx | 2 +- src/pages/settings/Report/RoomNamePage.tsx | 2 +- src/pages/workspace/WorkspaceNamePage.tsx | 2 +- src/pages/workspace/WorkspaceProfileDescriptionPage.tsx | 2 +- 6 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/GroupChatNameEditPage.tsx b/src/pages/GroupChatNameEditPage.tsx index 69d7f6c6f8af..e154bb32dc01 100644 --- a/src/pages/GroupChatNameEditPage.tsx +++ b/src/pages/GroupChatNameEditPage.tsx @@ -69,13 +69,15 @@ function GroupChatNameEditPage({groupChatDraft, report}: GroupChatNameEditPagePr if (values[INPUT_IDS.NEW_CHAT_NAME] !== currentChatName) { Report.updateGroupChatName(reportID, values[INPUT_IDS.NEW_CHAT_NAME] ?? ''); } - Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(reportID)); + + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(reportID))); + return; } if (values[INPUT_IDS.NEW_CHAT_NAME] !== currentChatName) { Report.setGroupDraft({reportName: values[INPUT_IDS.NEW_CHAT_NAME]}); } - Navigation.goBack(ROUTES.NEW_CHAT_CONFIRM); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.NEW_CHAT_CONFIRM)); }, [isUpdatingExistingReport, reportID, currentChatName], ); diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 4d084cfa924d..deab122e3006 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -96,7 +96,7 @@ function PrivateNotesEditPage({route, report, accountID}: PrivateNotesEditPagePr if (!Object.values({...report.privateNotes, [route.params.accountID]: {note: editedNote}}).some((item) => item.note)) { ReportUtils.navigateToDetailsPage(report, backTo); } else { - Navigation.goBack(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID, backTo)); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID, backTo))); } }; diff --git a/src/pages/RoomDescriptionPage.tsx b/src/pages/RoomDescriptionPage.tsx index abafa519cb33..169ed6bd3d2e 100644 --- a/src/pages/RoomDescriptionPage.tsx +++ b/src/pages/RoomDescriptionPage.tsx @@ -51,7 +51,7 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) { }, []); const goBack = useCallback(() => { - Navigation.goBack(backTo ?? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID)); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(backTo ?? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID))); }, [report.reportID, backTo]); const submitForm = useCallback(() => { diff --git a/src/pages/settings/Report/RoomNamePage.tsx b/src/pages/settings/Report/RoomNamePage.tsx index bc83b2ad0ba1..efa8f992e67f 100644 --- a/src/pages/settings/Report/RoomNamePage.tsx +++ b/src/pages/settings/Report/RoomNamePage.tsx @@ -45,7 +45,7 @@ function RoomNamePage({report, reports}: RoomNamePageProps) { const reportID = report?.reportID ?? '-1'; const goBack = useCallback(() => { - Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, route.params.backTo)); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, route.params.backTo))); }, [reportID, route.params.backTo]); const validate = useCallback( diff --git a/src/pages/workspace/WorkspaceNamePage.tsx b/src/pages/workspace/WorkspaceNamePage.tsx index 42c97d5d85e6..a57b7421c198 100644 --- a/src/pages/workspace/WorkspaceNamePage.tsx +++ b/src/pages/workspace/WorkspaceNamePage.tsx @@ -33,7 +33,7 @@ function WorkspaceNamePage({policy}: Props) { Policy.updateGeneralSettings(policy.id, values.name.trim(), policy.outputCurrency); Keyboard.dismiss(); - Navigation.goBack(); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack()); }, [policy], ); diff --git a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx index a72daf2e907e..88c66771a1ca 100644 --- a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx +++ b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx @@ -65,7 +65,7 @@ function WorkspaceProfileDescriptionPage({policy}: Props) { Policy.updateWorkspaceDescription(policy.id, values.description.trim(), policy.description ?? ''); Keyboard.dismiss(); - Navigation.goBack(); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack()); }, [policy], ); From 99f187356675f76d3d0c57ce87ab2a82f0a5f2a5 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 27 Dec 2024 20:19:15 +0530 Subject: [PATCH 2/4] fix eslint. Signed-off-by: krishna2323 --- src/libs/ValidationUtils.ts | 4 ++-- src/pages/GroupChatNameEditPage.tsx | 2 +- src/pages/settings/Report/RoomNamePage.tsx | 4 ++-- src/pages/workspace/WorkspaceProfileDescriptionPage.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts index fac02bd2b4ca..ea1ecf319cc2 100644 --- a/src/libs/ValidationUtils.ts +++ b/src/libs/ValidationUtils.ts @@ -390,8 +390,8 @@ function isReservedRoomName(roomName: string): boolean { /** * Checks if the room name already exists. */ -function isExistingRoomName(roomName: string, reports: OnyxCollection, policyID: string): boolean { - return Object.values(reports ?? {}).some((report) => report && report.policyID === policyID && report.reportName === roomName); +function isExistingRoomName(roomName: string, reports: OnyxCollection, policyID: string | undefined): boolean { + return Object.values(reports ?? {}).some((report) => report && policyID && report.policyID === policyID && report.reportName === roomName); } /** diff --git a/src/pages/GroupChatNameEditPage.tsx b/src/pages/GroupChatNameEditPage.tsx index e154bb32dc01..330ea6604eef 100644 --- a/src/pages/GroupChatNameEditPage.tsx +++ b/src/pages/GroupChatNameEditPage.tsx @@ -37,7 +37,7 @@ type GroupChatNameEditPageProps = GroupChatNameEditPageOnyxProps & function GroupChatNameEditPage({groupChatDraft, report}: GroupChatNameEditPageProps) { // If we have a report this means we are using this page to update an existing Group Chat name // In this case its better to use empty string as the reportID if there is no reportID - const reportID = report?.reportID ?? ''; + const reportID = report?.reportID; const isUpdatingExistingReport = !!reportID; const styles = useThemeStyles(); diff --git a/src/pages/settings/Report/RoomNamePage.tsx b/src/pages/settings/Report/RoomNamePage.tsx index efa8f992e67f..ad906d369d60 100644 --- a/src/pages/settings/Report/RoomNamePage.tsx +++ b/src/pages/settings/Report/RoomNamePage.tsx @@ -42,7 +42,7 @@ function RoomNamePage({report, reports}: RoomNamePageProps) { const roomNameInputRef = useRef(null); const isFocused = useIsFocused(); const {translate} = useLocalize(); - const reportID = report?.reportID ?? '-1'; + const reportID = report?.reportID; const goBack = useCallback(() => { Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, route.params.backTo))); @@ -66,7 +66,7 @@ function RoomNamePage({report, reports}: RoomNamePageProps) { } else if (ValidationUtils.isReservedRoomName(values.roomName)) { // Certain names are reserved for default rooms and should not be used for policy rooms. ErrorUtils.addErrorMessage(errors, 'roomName', translate('newRoomPage.roomNameReservedError', {reservedName: values.roomName})); - } else if (ValidationUtils.isExistingRoomName(values.roomName, reports, report?.policyID ?? '-1')) { + } else if (ValidationUtils.isExistingRoomName(values.roomName, reports, report?.policyID)) { // The room name can't be set to one that already exists on the policy ErrorUtils.addErrorMessage(errors, 'roomName', translate('newRoomPage.roomAlreadyExistsError')); } else if (values.roomName.length > CONST.TITLE_CHARACTER_LIMIT) { diff --git a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx index 88c66771a1ca..f6a9e3649b22 100644 --- a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx +++ b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx @@ -72,7 +72,7 @@ function WorkspaceProfileDescriptionPage({policy}: Props) { return ( Date: Fri, 27 Dec 2024 20:27:26 +0530 Subject: [PATCH 3/4] fix eslint. Signed-off-by: krishna2323 --- src/pages/settings/Report/RoomNamePage.tsx | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/pages/settings/Report/RoomNamePage.tsx b/src/pages/settings/Report/RoomNamePage.tsx index ad906d369d60..d7ad1c51f22c 100644 --- a/src/pages/settings/Report/RoomNamePage.tsx +++ b/src/pages/settings/Report/RoomNamePage.tsx @@ -1,8 +1,7 @@ import {useIsFocused, useRoute} from '@react-navigation/native'; import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxCollection} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -27,22 +26,18 @@ import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/RoomNameForm'; import type {Report} from '@src/types/onyx'; -type RoomNamePageOnyxProps = { - /** All reports shared with the user */ - reports: OnyxCollection; -}; - -type RoomNamePageProps = RoomNamePageOnyxProps & { +type RoomNamePageProps = { report: Report; }; -function RoomNamePage({report, reports}: RoomNamePageProps) { +function RoomNamePage({report}: RoomNamePageProps) { const route = useRoute>(); const styles = useThemeStyles(); const roomNameInputRef = useRef(null); const isFocused = useIsFocused(); const {translate} = useLocalize(); const reportID = report?.reportID; + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); const goBack = useCallback(() => { Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID, route.params.backTo))); @@ -122,8 +117,4 @@ function RoomNamePage({report, reports}: RoomNamePageProps) { RoomNamePage.displayName = 'RoomNamePage'; -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - }, -})(RoomNamePage); +export default RoomNamePage; From 1cbc9881ca97ea0b64f08428c5749f8d4f11d900 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 27 Dec 2024 20:30:54 +0530 Subject: [PATCH 4/4] migrate GroupChatNameEditPage to use useOnyx. Signed-off-by: krishna2323 --- src/pages/GroupChatNameEditPage.tsx | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/pages/GroupChatNameEditPage.tsx b/src/pages/GroupChatNameEditPage.tsx index 330ea6604eef..66cc4b0a2329 100644 --- a/src/pages/GroupChatNameEditPage.tsx +++ b/src/pages/GroupChatNameEditPage.tsx @@ -1,6 +1,5 @@ import React, {useCallback, useMemo} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import type {FormOnyxValues} from '@components/Form/types'; @@ -22,23 +21,18 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/NewChatNameForm'; import type {Report as ReportOnyxType} from '@src/types/onyx'; -import type NewGroupChatDraft from '@src/types/onyx/NewGroupChatDraft'; import type {Errors} from '@src/types/onyx/OnyxCommon'; -type GroupChatNameEditPageOnyxProps = { - groupChatDraft: OnyxEntry; +type GroupChatNameEditPageProps = Partial> & { + report?: ReportOnyxType; }; -type GroupChatNameEditPageProps = GroupChatNameEditPageOnyxProps & - Partial> & { - report?: ReportOnyxType; - }; - -function GroupChatNameEditPage({groupChatDraft, report}: GroupChatNameEditPageProps) { +function GroupChatNameEditPage({report}: GroupChatNameEditPageProps) { // If we have a report this means we are using this page to update an existing Group Chat name // In this case its better to use empty string as the reportID if there is no reportID const reportID = report?.reportID; const isUpdatingExistingReport = !!reportID; + const [groupChatDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -119,8 +113,4 @@ function GroupChatNameEditPage({groupChatDraft, report}: GroupChatNameEditPagePr GroupChatNameEditPage.displayName = 'GroupChatNameEditPage'; -export default withOnyx({ - groupChatDraft: { - key: ONYXKEYS.NEW_GROUP_CHAT_DRAFT, - }, -})(GroupChatNameEditPage); +export default GroupChatNameEditPage;