Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 33 commits into from
Dec 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
9117c61
[TS migration] Migrate 'AppNavigator' lib
VickyStash Oct 10, 2023
dbe6294
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Oct 10, 2023
fa52838
Fix ts error
VickyStash Oct 10, 2023
0a8b4ad
Minor code improvements
VickyStash Oct 12, 2023
323f54a
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Nov 9, 2023
ea93221
Resolve conflicts after merging main; partly fix TS issues
VickyStash Nov 13, 2023
080e66c
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Nov 13, 2023
22e369f
TS fixes after merging main
VickyStash Nov 13, 2023
0c1164e
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Nov 29, 2023
70bf742
Fix TS issues after merging main
VickyStash Nov 29, 2023
68b31c0
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Nov 29, 2023
6799a1d
Fix TS issues after merging main
VickyStash Nov 29, 2023
7580e3a
Fix lint issue
VickyStash Nov 29, 2023
8cb67ac
Run prettier
VickyStash Nov 29, 2023
073bec5
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Dec 1, 2023
16b732f
Update CustomRouter typing
VickyStash Dec 1, 2023
603bab0
Use types from Navigation types file
VickyStash Dec 1, 2023
38d5c73
Update types file to use screen constants
VickyStash Dec 1, 2023
bff0598
AuthScreens improvements
VickyStash Dec 4, 2023
a22d4f7
Code improvements
VickyStash Dec 4, 2023
a44f5cd
Add empty lines to improve code readability
VickyStash Dec 4, 2023
c52ba4c
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Dec 4, 2023
274073d
Update createModalStackNavigator typing
VickyStash Dec 4, 2023
18e25a5
Remove extra comments, get rid of ts-expect-error
VickyStash Dec 4, 2023
7a4879c
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Dec 4, 2023
371860f
Update NAVIGATION.md file and commented code
VickyStash Dec 4, 2023
5fbf995
Remove old screen options; add default values to params
VickyStash Dec 5, 2023
b2ec5a7
Update ModalStackNavigator typing
VickyStash Dec 5, 2023
0fc1b1e
Update reconnectApp function typing
VickyStash Dec 5, 2023
d666c0d
Minor code improvement
VickyStash Dec 5, 2023
d6c824b
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Dec 5, 2023
791c713
Merge branch 'main' into ts-migration/appNavigator-lib
VickyStash Dec 6, 2023
1d6a804
Fix TS issue
VickyStash Dec 6, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions contributingGuides/NAVIGATION.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Overview

The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.js` file.
The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.tsx` file.

## Terminology

Expand All @@ -20,11 +20,11 @@ Navigation Actions - User actions correspond to resulting navigation actions tha

## Adding RHP flows

Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.js` and `ModalStackNavigators.js` file:
Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.tsx` and `ModalStackNavigators.tsx` file:

- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.js`.
- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.tsx`.

- If you want to create new flow, add a `Screen` in `RightModalNavigator.js` and make new modal in `ModalStackNavigators.js` with chosen pages.
- If you want to create new flow, add a `Screen` in `RightModalNavigator.tsx` and make new modal in `ModalStackNavigators.tsx` with chosen pages.

When creating RHP flows, you have to remember a couple things:

Expand Down Expand Up @@ -196,4 +196,4 @@ The action for the first step created with `getMinimalAction` looks like this:
```

### Deeplinking
There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.
There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.
2 changes: 2 additions & 0 deletions src/ONYXKEYS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,7 @@ type OnyxValues = {
[ONYXKEYS.IS_LOADING_PAYMENT_METHODS]: boolean;
[ONYXKEYS.IS_LOADING_REPORT_DATA]: boolean;
[ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN]: boolean;
[ONYXKEYS.IS_LOADING_APP]: boolean;
[ONYXKEYS.WALLET_TRANSFER]: OnyxTypes.WalletTransfer;
[ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID]: string;
[ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT]: boolean;
Expand All @@ -428,6 +429,7 @@ type OnyxValues = {
[ONYXKEYS.MAPBOX_ACCESS_TOKEN]: OnyxTypes.MapboxAccessToken;
[ONYXKEYS.ONYX_UPDATES_FROM_SERVER]: OnyxTypes.OnyxUpdatesFromServer;
[ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT]: number;
[ONYXKEYS.DEMO_INFO]: OnyxTypes.DemoInfo;
[ONYXKEYS.MAX_CANVAS_AREA]: number;
[ONYXKEYS.MAX_CANVAS_HEIGHT]: number;
[ONYXKEYS.MAX_CANVAS_WIDTH]: number;
Expand Down
171 changes: 171 additions & 0 deletions src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* This is a file containing constants for all of the screen names. In most cases, we should use the routes for
* navigation. But there are situations where we may need to access screen names directly.
*/
import DeepValueOf from './types/utils/DeepValueOf';

const PROTECTED_SCREENS = {
HOME: 'Home',
Expand All @@ -22,6 +23,25 @@ const SCREENS = {
WORKSPACES: 'Settings_Workspaces',
SECURITY: 'Settings_Security',
STATUS: 'Settings_Status',
PROFILE: 'Settings_Profile',
PRONOUNS: 'Settings_Pronouns',
DISPLAY_NAME: 'Settings_Display_Name',
TIMEZONE: 'Settings_Timezone',
TIMEZONE_SELECT: 'Settings_Timezone_Select',
CONTACT_METHODS: 'Settings_ContactMethods',
CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails',
NEW_CONTACT_METHOD: 'Settings_NewContactMethod',
SHARE_CODE: 'Settings_Share_Code',
ABOUT: 'Settings_About',
APP_DOWNLOAD_LINKS: 'Settings_App_Download_Links',
LOUNGE_ACCESS: 'Settings_Lounge_Access',

PERSONAL_DETAILS_INITIAL: 'Settings_PersonalDetails_Initial',
PERSONAL_DETAILS_LEGAL_NAME: 'Settings_PersonalDetails_LegalName',
PERSONAL_DETAILS_DATE_OF_BIRTH: 'Settings_PersonalDetails_DateOfBirth',
PERSONAL_DETAILS_ADDRESS: 'Settings_PersonalDetails_Address',
PERSONAL_DETAILS_ADDRESS_COUNTRY: 'Settings_PersonalDetails_Address_Country',

WALLET: 'Settings_Wallet',
WALLET_DOMAIN_CARD: 'Settings_Wallet_DomainCard',
WALLET_CARD_GET_PHYSICAL: {
Expand All @@ -30,15 +50,166 @@ const SCREENS = {
ADDRESS: 'Settings_Card_Get_Physical_Address',
CONFIRM: 'Settings_Card_Get_Physical_Confirm',
},
WALLET_TRANSFER_BALANCE: 'Settings_Wallet_Transfer_Balance',
WALLET_CHOOSE_TRANSFER_ACCOUNT: 'Settings_Wallet_Choose_Transfer_Account',
WALLET_ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments',
WALLET_CARD_ACTIVATE: 'Settings_Wallet_Card_Activate',
WALLET_REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud',
VickyStash marked this conversation as resolved.
Show resolved Hide resolved
WALLET_CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address',

ADD_DEBIT_CARD: 'Settings_Add_Debit_Card',
ADD_BANK_ACCOUNT: 'Settings_Add_Bank_Account',
PREFERENCES_PRIORITY_MODE: 'Settings_Preferences_PriorityMode',
PREFERENCES_LANGUAGE: 'Settings_Preferences_Language',
PREFERENCES_THEME: 'Settings_Preferences_Theme',
CLOSE: 'Settings_Close',
STATUS_SET: 'Settings_Status_Set',
TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth',
REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',
},
SAVE_THE_WORLD: {
ROOT: 'SaveTheWorld_Root',
},
RIGHT_MODAL: {
SETTINGS: 'Settings',
NEW_CHAT: 'NewChat',
SEARCH: 'Search',
DETAILS: 'Details',
PROFILE: 'Profile',
REPORT_DETAILS: 'Report_Details',
REPORT_SETTINGS: 'Report_Settings',
REPORT_WELCOME_MESSAGE: 'Report_WelcomeMessage',
PARTICIPANTS: 'Participants',
MONEY_REQUEST: 'MoneyRequest',
NEW_TASK: 'NewTask',
TEACHERS_UNITE: 'TeachersUnite',
TASK_DETAILS: 'Task_Details',
ENABLE_PAYMENTS: 'EnablePayments',
SPLIT_DETAILS: 'SplitDetails',
ADD_PERSONAL_BANK_ACCOUNT: 'AddPersonalBankAccount',
WALLET_STATEMENT: 'Wallet_Statement',
FLAG_COMMENT: 'Flag_Comment',
EDIT_REQUEST: 'EditRequest',
SIGN_IN: 'SignIn',
PRIVATE_NOTES: 'Private_Notes',
ROOM_MEMBERS: 'RoomMembers',
ROOM_INVITE: 'RoomInvite',
REFERRAL: 'Referral',
},
SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect',
SAML_SIGN_IN: 'SAMLSignIn',

MONEY_REQUEST: {
ROOT: 'Money_Request',
AMOUNT: 'Money_Request_Amount',
VickyStash marked this conversation as resolved.
Show resolved Hide resolved
PARTICIPANTS: 'Money_Request_Participants',
CONFIRMATION: 'Money_Request_Confirmation',
CURRENCY: 'Money_Request_Currency',
DATE: 'Money_Request_Date',
DESCRIPTION: 'Money_Request_Description',
CATEGORY: 'Money_Request_Category',
TAG: 'Money_Request_Tag',
MERCHANT: 'Money_Request_Merchant',
WAYPOINT: 'Money_Request_Waypoint',
EDIT_WAYPOINT: 'Money_Request_Edit_Waypoint',
DISTANCE: 'Money_Request_Distance',
RECEIPT: 'Money_Request_Receipt',
},

IOU_SEND: {
ADD_BANK_ACCOUNT: 'IOU_Send_Add_Bank_Account',
ADD_DEBIT_CARD: 'IOU_Send_Add_Debit_Card',
ENABLE_PAYMENTS: 'IOU_Send_Enable_Payments',
},

REPORT_SETTINGS: {
ROOT: 'Report_Settings_Root',
ROOM_NAME: 'Report_Settings_Room_Name',
NOTIFICATION_PREFERENCES: 'Report_Settings_Notification_Preferences',
WRITE_CAPABILITY: 'Report_Settings_Write_Capability',
},

NEW_TASK: {
ROOT: 'NewTask_Root',
TASK_ASSIGNEE_SELECTOR: 'NewTask_TaskAssigneeSelector',
TASK_SHARE_DESTINATION_SELECTOR: 'NewTask_TaskShareDestinationSelector',
DETAILS: 'NewTask_Details',
TITLE: 'NewTask_Title',
DESCRIPTION: 'NewTask_Description',
},

TASK: {
TITLE: 'Task_Title',
DESCRIPTION: 'Task_Description',
ASSIGNEE: 'Task_Assignee',
},

PRIVATE_NOTES: {
VIEW: 'PrivateNotes_View',
LIST: 'PrivateNotes_List',
EDIT: 'PrivateNotes_Edit',
},

REPORT_DETAILS: {
ROOT: 'Report_Details_Root',
SHARE_CODE: 'Report_Details_Share_Code',
},

WORKSPACE: {
INITIAL: 'Workspace_Initial',
SETTINGS: 'Workspace_Settings',
CARD: 'Workspace_Card',
REIMBURSE: 'Workspace_Reimburse',
RATE_AND_UNIT: 'Workspace_RateAndUnit',
BILLS: 'Workspace_Bills',
INVOICES: 'Workspace_Invoices',
TRAVEL: 'Workspace_Travel',
MEMBERS: 'Workspace_Members',
INVITE: 'Workspace_Invite',
INVITE_MESSAGE: 'Workspace_Invite_Message',
CURRENCY: 'Workspace_Settings_Currency',
},

EDIT_REQUEST: {
ROOT: 'EditRequest_Root',
CURRENCY: 'EditRequest_Currency',
},

I_KNOW_A_TEACHER: 'I_Know_A_Teacher',
INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal',
I_AM_A_TEACHER: 'I_Am_A_Teacher',
VickyStash marked this conversation as resolved.
Show resolved Hide resolved

ENABLE_PAYMENTS_ROOT: 'EnablePayments_Root',
ADD_PERSONAL_BANK_ACCOUNT_ROOT: 'AddPersonalBankAccount_Root',
REIMBURSEMENT_ACCOUNT_ROOT: 'Reimbursement_Account_Root',
WALLET_STATEMENT_ROOT: 'WalletStatement_Root',
SIGN_IN_ROOT: 'SignIn_Root',
DETAILS_ROOT: 'Details_Root',
PROFILE_ROOT: 'Profile_Root',
REPORT_WELCOME_MESSAGE_ROOT: 'Report_WelcomeMessage_Root',
REPORT_PARTICIPANTS_ROOT: 'ReportParticipants_Root',
ROOM_MEMBERS_ROOT: 'RoomMembers_Root',
ROOM_INVITE_ROOT: 'RoomInvite_Root',
SEARCH_ROOT: 'Search_Root',
NEW_CHAT_ROOT: 'NewChat_Root',
FLAG_COMMENT_ROOT: 'FlagComment_Root',

SPLIT_DETAILS: {
ROOT: 'SplitDetails_Root',
EDIT_REQUEST: 'SplitDetails_Edit_Request',
EDIT_CURRENCY: 'SplitDetails_Edit_Currency',
},

REIMBURSEMENT_ACCOUNT: 'ReimbursementAccount',
GET_ASSISTANCE: 'GetAssistance',
REFERRAL_DETAILS: 'Referral_Details',
KEYBOARD_SHORTCUTS: 'KeyboardShortcuts',
} as const;

type Screen = DeepValueOf<typeof SCREENS>;

export default SCREENS;
export {PROTECTED_SCREENS};
export type {Screen};
Loading
Loading