[HOLD for payment 2024-02-14] [$250] Remove MoneyRequestTagPage.js and copy any changes since Nov 27 into IOURequestStepTags.js

[tgolen]

This is a part of #29107. You can look at that issue for more context behind the cleanup process.

Problem

The app has two redundant components:

Old Component: MoneyRequestTagPage
New Component IOURequestStepTags

Solution

Following the examples (example 1, example 2), the Old Component needs to be completely removed from the codebase

1. Look at the history of the Old Component
2. If there are any changes since Nov 27, 2023 which have not been added to the New Component, copy those changes
3. Replace all uses of the Old Component with the New Component
4. Remove all traces of Old Component
5. Be sure to update all routes and navigation to use the new :action param (instead of being hard-coded with "create")
6. Update any logic like isEditing to use the new action param from the route

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f0c8228cceba8683
• Upwork Job ID: 1747632892276064256
• Last Price Increase: 2024-01-17
• Automatic offers:
• fedirjh | Reviewer | 28119689
• dukenv0307 | Contributor | 28119690

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Remove MoneyRequestTagPage.js and copy any changes since Nov 27 into IOURequestStepTags.js

What is the root cause of that problem?

Component update

What changes do you think we should make in order to solve the problem?

I checked all the commits after 27th Nov and the new component is updated according to the old component, we just need to remove the file and route created for it. I checked the commits thoroughly but will check again in the PR. There is only 1 commit after 27th Nov and it is about moving import of useThemeStyles.

Component to remove:
https://github.com/Expensify/App/blob/main/src/pages/iou/MoneyRequestTagPage.js

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

Line 101 in a7a3e7f

[SCREENS.MONEY_REQUEST.TAG]: () => require('../../../pages/iou/MoneyRequestTagPage').default as React.ComponentType,

We also need to remove all traces from src/libs/Navigation/types.ts & src/libs/Navigation/linkingConfig.ts

App/src/libs/Navigation/linkingConfig.ts

Line 434 in a2f5bd5

[SCREENS.MONEY_REQUEST.TAG]: ROUTES.MONEY_REQUEST_TAG.route,

App/src/libs/Navigation/types.ts

Line 214 in a2f5bd5

[SCREENS.MONEY_REQUEST.TAG]: {

Note: The below 2 steps can be omitted because we only use IOURequestStepTags for IOU creation flow.

Need to update to :action here:

App/src/ROUTES.ts

Line 367 in a2f5bd5

MONEY_REQUEST_STEP_TAG: {

We only need to pass the action from one component here:

App/src/components/MoneyRequestConfirmationList.js

Line 749 in a2f5bd5

Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID));

Result

[njmulsqb]

I would love to take this!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f0c8228cceba8683

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Remove MoneyRequestTagPage.js and copy any changes since Nov 27 into IOURequestStepTags.js

What is the root cause of that problem?

This is a refactor

What changes do you think we should make in order to solve the problem?

Look at the history of the Old Component
If there are any changes since Nov 27, 2023 which have not been added to the New Component, copy those changes

1. The history change here: https://github.com/Expensify/App/blob/main/src/pages/iou/MoneyRequestTagPage.js

We have had one change since Nov 27, 2023 but it's the refactoring change and has already been applied in IOURequestStepTags. So no need to change here.

Replace all uses of the Old Component with the New Component
Remove all traces of Old Component

2. MoneyRequestTagPage isn't used in any component so we don't need to have any updates here.

We only need to remove MoneyRequestTagPage in ModalStackNavigators, remove .MONEY_REQUEST.TAG from SCREENS, and remove MONEY_REQUEST_TAG route

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

Line 98 in a8acf44

[SCREENS.MONEY_REQUEST.DATE]: () => require('../../../pages/iou/MoneyRequestDatePage').default as React.ComponentType,

Be sure to update all routes and navigation to use the new :action param (instead of being hard-coded with "create")

3. Update the getRoute function with an extra param action and return it instead of always returning create

getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo: string) =>
            getUrlWithBackToParam(`${action}/${iouType}/tag/${transactionID}/${reportID}`, backTo),

App/src/ROUTES.ts

Lines 339 to 340 in a8acf44

	getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
	getUrlWithBackToParam(`create/${iouType}/date/${transactionID}/${reportID}`, backTo),

Update any logic like isEditing to use the new action param from the route

4. We need to update updateTag function in IOURequestStepTags for the edit case by checking action params. For edit case, we can re-use the logic of saveTag function in EditRequestPage.

And when we click on tag on MoneyRequestView we will navigate to IOURequestStepTags with action param is edit.

After this refactor we can remove EditRequestTagPage.

What alternative solutions did you explore? (Optional)

NA