[TS migration] Migrate 'AppNavigator' lib to TypeScript #29157

VickyStash · 2023-10-10T07:32:59Z

Details

[TS migration] Migrate 'AppNavigator' lib to TypeScript

Fixed Issues

$ #24935
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

Note: Test the app generally, navigating through the app, login screen, settings, report screen, etc

Open the app and log in.
Create a Money Request, and make sure the navigation works as expected.
Open any chat/report.
Open Settings, look through different Settings screens: Profile, Workspaces, Wallet, Preferences, etc and make sure the navigation works as expected.
Log out and log in again. Navigate to a few screens to make sure that the navigator works properly.

Offline tests

N/A

QA Steps

Verify that no errors appear in the JS console

Note: Test the app generally, navigating through the app, login screen, settings, report screen, etc

Open the app and log in.
Create a Money Request, and make sure the navigation works as expected.
Open any chat/report.
Open Settings, look through different Settings screens: Profile, Workspaces, Wallet, Preferences, etc and make sure the navigation works as expected.
Log out and log in again. Navigate to a few screens to make sure that the navigator works properly.

PR Author Checklist

Screenshots/Videos

Android: Native

android1.mp4

Android: mWeb Chrome

android_web1.mp4

iOS: Native

ios1.mp4

iOS: mWeb Safari

ios_web1.mp4

MacOS: Chrome / Safari

web1.mp4

MacOS: Desktop

desktop1.mp4

# Conflicts: # src/SCREENS.ts

src/libs/Navigation/AppNavigator/AuthScreens.tsx

src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx

src/libs/Navigation/AppNavigator/RHPScreenOptions.ts

src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

src/libs/Navigation/Navigation.js

# Conflicts: # src/SCREENS.ts # src/libs/Navigation/AppNavigator/AuthScreens.tsx # src/libs/Navigation/AppNavigator/ModalStackNavigators.js # src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.tsx # src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx # src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx # src/libs/Navigation/AppNavigator/PublicScreens.tsx # src/libs/Navigation/AppNavigator/RHPScreenOptions.ts # src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts # src/libs/Navigation/AppNavigator/ReportScreenWrapper.js # src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts # src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js # src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts # src/libs/Navigation/AppNavigator/index.tsx # src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts # src/styles/cardStyles/types.ts # src/types/onyx/Report.ts

# Conflicts: # src/SCREENS.ts # src/libs/actions/App.ts

# Conflicts: # src/SCREENS.ts # src/libs/Navigation/AppNavigator/AuthScreens.tsx # src/libs/Navigation/AppNavigator/ModalStackNavigators.js # src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx # src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx # src/libs/Navigation/Navigation.js # src/types/onyx/Report.ts

# Conflicts: # src/libs/Navigation/AppNavigator/ModalStackNavigators.js # src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx # src/libs/Navigation/AppNavigator/RHPScreenOptions.ts # src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts

# Conflicts: # src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts

src/pages/ErrorPage/NotFoundPage.js

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

rezkiy37

Left comments. Overall, LGTM!

src/SCREENS.ts

src/libs/Navigation/AppNavigator/AuthScreens.tsx

src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

src/pages/ErrorPage/NotFoundPage.js

src/libs/Navigation/AppNavigator/AuthScreens.tsx

src/pages/ErrorPage/NotFoundPage.js

src/libs/Navigation/AppNavigator/AuthScreens.tsx

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts

src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

allroundexperts · 2023-12-05T19:19:50Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2023-12-06.at.4.31.32.AM.mov

Android: mWeb Chrome

Screen.Recording.2023-12-06.at.4.30.03.AM.mov

iOS: Native

Screen.Recording.2023-12-06.at.4.28.37.AM.mov

iOS: mWeb Safari

Screen.Recording.2023-12-06.at.4.27.23.AM.mov

MacOS: Chrome / Safari

Screen.Recording.2023-12-06.at.4.17.16.AM.mov

MacOS: Desktop

Screen.Recording.2023-12-06.at.4.24.46.AM.mov

allroundexperts · 2023-12-05T22:02:08Z

src/libs/Navigation/AppNavigator/AuthScreens.tsx

-                mode="modal"
-                // We are disabling the default keyboard handling here since the automatic behavior is to close a
-                // keyboard that's open when swiping to dismiss a modal. In those cases, pressing the back button on
-                // a header will briefly open and close the keyboard and crash Android.
-                // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                keyboardHandlingEnabled={false}


Why is this being removed?

@allroundexperts Please, see this discussion for the context

allroundexperts · 2023-12-05T22:24:16Z

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

        return getTopMostReportIDFromRHP(topmostRoute.state);
    }

-    if (topmostRoute.params && topmostRoute.params.reportID) {
+    if (topmostRoute?.params && 'reportID' in topmostRoute.params && typeof topmostRoute.params.reportID === 'string' && topmostRoute.params.reportID) {


Curious why && typeof topmostRoute.params.reportID === 'string' && topmostRoute.params.reportID is needed? Shouldn't 'reportID' in topmostRoute.params be enough?

@allroundexperts Not really, we need to narrow down the type to make sure reportID is string, that's why

allroundexperts · 2023-12-05T22:29:13Z

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

                addCentralPaneNavigatorRoute(partialState);
            }
-            const state = stackRouter.getRehydratedState(partialState, {routeNames, routeParamList});
+            const state = stackRouter.getRehydratedState(partialState, {routeNames, routeParamList, routeGetIdList});


Why is routeGetIdList being added here?

Because routeGetIdList is a required param of RouterConfigOptions.
getRehydratedState typing
RouterConfigOptions typing

allroundexperts · 2023-12-05T22:35:03Z

src/libs/NetworkConnection.ts

@@ -13,7 +13,7 @@ let hasPendingNetworkCheck = false;

 // Holds all of the callbacks that need to be triggered when the network reconnects
 let callbackID = 0;
-const reconnectionCallbacks: Record<string, () => Promise<void>> = {};
+const reconnectionCallbacks: Record<string, () => void> = {};


Why isn't this a promise anymore?

Because the callback passed to reconnect function is not a Promise

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 156 to 162 in d6c824b

NetworkConnection.onReconnect(() => {

if (isLoadingApp) {

App.openApp();

} else {

App.reconnectApp(lastUpdateIDAppliedToClient);

}

});

allroundexperts · 2023-12-05T22:37:12Z

src/styles/getNavigationModalCardStyles/types.ts

-type GetNavigationModalCardStylesParams = {isSmallScreenWidth: number};
-
-type GetNavigationModalCardStyles = (params: GetNavigationModalCardStylesParams) => ViewStyle;
+type GetNavigationModalCardStyles = () => ViewStyle;


Why the params are being removed?

@allroundexperts Because this type is used for typing the functions without params:

App/src/styles/getNavigationModalCardStyles/index.desktop.ts

Line 4 in 5a0b7fd

const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({

App/src/styles/getNavigationModalCardStyles/index.ts

Line 3 in 5a0b7fd

const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({

App/src/styles/getNavigationModalCardStyles/index.website.ts

Line 4 in 5a0b7fd

const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({

allroundexperts · 2023-12-05T22:38:13Z

src/types/onyx/Report.ts

+    /** If the admin room should be opened */
+    openOnAdminRoom?: boolean;
+


Why is this being added?

Without it we will have next TS error in ReportScreenIDSetter.ts file

allroundexperts · 2023-12-05T23:39:10Z

Found the following two console warnings. I'm quite sure that these are not related to this PR but still, it would be good to confirm these before merging @VickyStash!

allroundexperts

Tests well. I'm not blocking the approval because of my comments because this is such a high priority PR.

melvin-bot · 2023-12-05T23:40:05Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #24935 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

VickyStash · 2023-12-06T08:08:40Z

@allroundexperts I wasn't able to reproduce a console warning from the first screenshot, do you remember the steps of reproduction?
Regarding the second one, I see the same warning on the main branch so it's not related to this PR

VickyStash · 2023-12-06T09:50:15Z

@Gonals The SWM team is currently working on navigation refactoring, and this migration could speed up things - so please prioritize this one 🙏

Gonals

This looks good to me and all comments have been answered.

Gonals · 2023-12-06T10:15:10Z

Ahh, damn. @VickyStash, seems like we have some conflicts. I'll merge once they are solved

# Conflicts: # src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

VickyStash · 2023-12-06T11:01:12Z

@Gonals Is there anything that prevents you from merging? 😅

OSBotify · 2023-12-06T11:58:45Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2023-12-06T22:17:04Z

🚀 Deployed to staging by https://github.com/Gonals in version: 1.4.9-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-12-06T23:11:14Z

🚀 Deployed to staging by https://github.com/Gonals in version: 1.4.9-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-12-08T01:08:22Z

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.4.9-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

VickyStash added 3 commits October 10, 2023 09:22

[TS migration] Migrate 'AppNavigator' lib

9117c61

Merge branch 'main' into ts-migration/appNavigator-lib

dbe6294

# Conflicts: # src/SCREENS.ts

Fix ts error

fa52838

kubabutkiewicz reviewed Oct 10, 2023

View reviewed changes

VickyStash added 16 commits October 12, 2023 10:25

Minor code improvements

0a8b4ad

Resolve conflicts after merging main; partly fix TS issues

ea93221

Merge branch 'main' into ts-migration/appNavigator-lib

080e66c

# Conflicts: # src/SCREENS.ts # src/libs/actions/App.ts

TS fixes after merging main

22e369f

Fix TS issues after merging main

70bf742

Fix TS issues after merging main

6799a1d

Fix lint issue

7580e3a

Run prettier

8cb67ac

Merge branch 'main' into ts-migration/appNavigator-lib

073bec5

# Conflicts: # src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts

Update CustomRouter typing

16b732f

Use types from Navigation types file

603bab0

Update types file to use screen constants

38d5c73

AuthScreens improvements

bff0598

VickyStash commented Dec 4, 2023

View reviewed changes

src/pages/ErrorPage/NotFoundPage.js Show resolved Hide resolved

VickyStash commented Dec 4, 2023

View reviewed changes

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts Outdated Show resolved Hide resolved

VickyStash commented Dec 4, 2023

View reviewed changes

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts Outdated Show resolved Hide resolved

VickyStash added 4 commits December 4, 2023 13:30

Code improvements

a22d4f7

Add empty lines to improve code readability

a44f5cd

Merge branch 'main' into ts-migration/appNavigator-lib

c52ba4c

Update createModalStackNavigator typing

274073d

rezkiy37 suggested changes Dec 4, 2023

View reviewed changes

gedu reviewed Dec 4, 2023

View reviewed changes

src/libs/Navigation/AppNavigator/AuthScreens.tsx Outdated Show resolved Hide resolved

blazejkustra suggested changes Dec 4, 2023

View reviewed changes

Merge branch 'main' into ts-migration/appNavigator-lib

d6c824b

allroundexperts reviewed Dec 5, 2023

View reviewed changes

allroundexperts approved these changes Dec 5, 2023

View reviewed changes

melvin-bot bot requested a review from Gonals December 5, 2023 23:40

blazejkustra mentioned this pull request Dec 6, 2023

[No QA][Cleanup] Always use constants for screen names #32430

Merged

47 tasks

Gonals previously approved these changes Dec 6, 2023

View reviewed changes

VickyStash added 2 commits December 6, 2023 11:20

Merge branch 'main' into ts-migration/appNavigator-lib

791c713

# Conflicts: # src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Fix TS issue

1d6a804

VickyStash dismissed Gonals’s stale review via 1d6a804 December 6, 2023 10:27

Gonals approved these changes Dec 6, 2023

View reviewed changes

Gonals merged commit bbe73ef into Expensify:main Dec 6, 2023
16 checks passed

github-actions bot mentioned this pull request Dec 6, 2023

Deploy Checklist: New Expensify 2023-12-06 #32589

Closed

74 tasks

lanitochka17 mentioned this pull request Dec 7, 2023

[$500] Web - Errors appear in the JS console when requesting money or assigning a task #32605

Closed

6 tasks

melvin-bot bot mentioned this pull request Dec 8, 2023

[HOLD for payment 2023-12-15] [TS migration] Migrate 'AppNavigator' lib to TypeScript #24935

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TS migration] Migrate 'AppNavigator' lib to TypeScript #29157

[TS migration] Migrate 'AppNavigator' lib to TypeScript #29157

VickyStash commented Oct 10, 2023 •

edited

Loading

rezkiy37 left a comment

allroundexperts commented Dec 5, 2023 •

edited

Loading

allroundexperts Dec 5, 2023

VickyStash Dec 5, 2023

allroundexperts Dec 5, 2023

VickyStash Dec 6, 2023

allroundexperts Dec 5, 2023

VickyStash Dec 6, 2023

allroundexperts Dec 5, 2023

VickyStash Dec 6, 2023

allroundexperts Dec 5, 2023

VickyStash Dec 6, 2023

allroundexperts Dec 5, 2023

VickyStash Dec 6, 2023

allroundexperts commented Dec 5, 2023

allroundexperts left a comment

melvin-bot bot commented Dec 5, 2023

VickyStash commented Dec 6, 2023

VickyStash commented Dec 6, 2023

Gonals left a comment •

edited

Loading

Gonals commented Dec 6, 2023

VickyStash commented Dec 6, 2023

OSBotify commented Dec 6, 2023

OSBotify commented Dec 6, 2023

OSBotify commented Dec 6, 2023

OSBotify commented Dec 8, 2023

	NetworkConnection.onReconnect(() => {
	if (isLoadingApp) {
	App.openApp();
	} else {
	App.reconnectApp(lastUpdateIDAppliedToClient);
	}
	});

		/** If the admin room should be opened */
		openOnAdminRoom?: boolean;

[TS migration] Migrate 'AppNavigator' lib to TypeScript #29157

[TS migration] Migrate 'AppNavigator' lib to TypeScript #29157

Conversation

VickyStash commented Oct 10, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

rezkiy37 left a comment

Choose a reason for hiding this comment

allroundexperts commented Dec 5, 2023 • edited Loading

Reviewer Checklist

Screenshots/Videos

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

allroundexperts commented Dec 5, 2023

allroundexperts left a comment

Choose a reason for hiding this comment

melvin-bot bot commented Dec 5, 2023

VickyStash commented Dec 6, 2023

VickyStash commented Dec 6, 2023

Gonals left a comment • edited Loading

Choose a reason for hiding this comment

Gonals commented Dec 6, 2023

VickyStash commented Dec 6, 2023

OSBotify commented Dec 6, 2023

OSBotify commented Dec 6, 2023

OSBotify commented Dec 6, 2023

OSBotify commented Dec 8, 2023

VickyStash commented Oct 10, 2023 •

edited

Loading

allroundexperts commented Dec 5, 2023 •

edited

Loading

Gonals left a comment •

edited

Loading