[HOLD for payment 2024-10-30] [$1000] Create a useResponsiveLayout hook

[roryabraham]

Slack context: https://expensify.slack.com/archives/C01GTK53T8Q/p1698364514493649

Problem

There are some times when we want to use the same layout on mobile devices or in the RHP on wide screens. In these cases, we can't rely on isSmallScreenWidth from useWindowDimensions to determine which layout to use, so we have hard-coded and/or different solutions we use to address the same problem.

Solution

1. In the navigation stack, add an isInRHP route prop to all screens in the RHP.

2. Write a custom hook called useResponsiveLayout that does something like this:

   function useResponsiveLayout() {
       const {isSmallScreenWidth} = useWindowDimensions();
       const {params} = useRoute();
       return {
           shouldUseNarrowLayout = isSmallScreenWidth || params.isInRHP,
       };
   }

3. Replace most layout-motivated uses of useWindowDimensions with useResponsiveLayout like so:

   - const {isSmallScreenWidth} = useWindowDimensions();
   + const {shouldUseNarrowLayout} = useResponsiveLayout();

4. Introduce a new lint rule that prohibits using isSmallScreenWidth from useWindowDimensions, advising developers to use shouldUseNarrowLayout instead.

   Upwork Automation - Do Not Edit

   • Upwork Job URL: https://www.upwork.com/jobs/~01f36dcb081cdf74b2
   • Upwork Job ID: 1717949899365408768
   • Last Price Increase: 2023-12-29

Issue Owner

Current Issue Owner: @alexpensify

[alexpensify]

Weekly Update: the PR is moving forward.

[alexpensify]

Weekly Update: The PR is going through reviews but moving along.

[alexpensify]

Weekly Update: The PR is in review to make sure testing passes.

[alexpensify]

Weekly Update: The PR went through another review process and more testing.

[alexpensify]

Weekly Update: More discussion in the PR due to recent findings

[alexpensify]

@roryabraham can I get feedback regarding which Wave or VIP to associate this one with? -- thanks!

[alexpensify]

Weekly Update: We are in a focus period, I'll check in next week.

[roryabraham]

This is a pretty old issue, and I'm not sure which wave or VIP I'd associate it with. It's basically a low-level code improvement to help avoid a semi-common developer mistake and make the code more consistent. Some recent discussion about it in slack here.

[alexpensify]

Thanks for the context @roryabraham!

Weekly Update: The PR is moving in review again: https://github.com/Expensify/App/pull/36292

[alexpensify]

Heads up, I will be offline until Tuesday, May 28, 2024, and will not actively watch over this GitHub during that period.

If anything urgent is needed here, please ask for help in the #expensify-open-source Slack Room-- thanks!

[rayane-djouah]

Heads up, I'll be mostly offline until June 5th, 2024. I can still review this issue, but my response might be slower. If there is something urgent, please reassign it. Thanks!

[alexpensify]

Catching up from being OOO, it looks like this one was on hold due to the freeze but we can carry on now.

[roryabraham]

PR merged today

[alexpensify]

Weekly Update: It looks like there was regression, but that has been addressed. I'll check again next week to confirm if we can move forward with the payment process.

[alexpensify]

Automation failed here, I need to start the payment process tomorrow since today marks 7 days in production.

[getusha]

@alexpensify there are still other PRs we need to get merged https://github.com/Expensify/App/issues/30528#issuecomment-1868485991

[alexpensify]

@getusha, thanks for flagging; I appreciate it. With that said, are we still striking the completed ones? If not, we should to keep a better record of what's left. For now, I'll hold on the payment process.

[rayane-djouah]

I have returned from being out of office, I will prepare the next PR this week

[rayane-djouah]

PR ready for review

[melvin-bot[bot]]

This issue has not been updated in over 15 days. @alexpensify, @roryabraham, @getusha, @rayane-djouah eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[rayane-djouah]

@getusha - Could you please continue the review of the PR when you get a chance. Thank you!

[getusha]

@rayane-djouah i think we can put the remaining changes in a single PR except the eslint-config-expensify changes

[rayane-djouah]

PR ready for review

[rayane-djouah]

@getusha @roryabraham - In my PR, useWindowDimensions now exports only windowWidth and windowHeight, and useResponsiveLayout is responsible for any logic determining the correct layout. The lint rule prohibiting the use of isSmallScreenWidth from useWindowDimensions is now unnecessary. However, we could introduce a lint rule advising developers to preferably use shouldUseNarrowLayout over isSmallScreenWidth from useResponsiveLayout, with a warning level. wdyt?

[roryabraham]

sounds good 👍🏼

[rayane-djouah]

Update: PR under review.

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[alexpensify]

@getusha and @rayane-djouah - can either of you confirm if this notice is accurate or not? Thanks!

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rayane-djouah]

We've fixed the above bugs in a follow-up PR: https://github.com/Expensify/App/pull/48723

[rayane-djouah]

Update:

There are still other PRs we need to create and merge:

1. A PR to Introduce the new lint rule advising developers to preferably use shouldUseNarrowLayout over isSmallScreenWidth from useResponsiveLayout, with a warning level.
2. A PR to upgrade the version of eslint in App to use the new lint rule. We might also include necessary changes after introducing the rule

Updated the PRs list summary: https://github.com/Expensify/App/issues/30528#issuecomment-1868485991

[rayane-djouah]

• PR ready for review: https://github.com/Expensify/eslint-config-expensify/pull/116

[rayane-djouah]

https://github.com/Expensify/eslint-config-expensify/pull/116 in review

[alexpensify]

Ok, waiting on https://github.com/Expensify/eslint-config-expensify/pull/116 to go into production

[roryabraham]

pulling in @mountiny to take over while I'm on parental leave

[mountiny]

ESLint rule merged @rayane-djouah can you raise App PR now please?

[rayane-djouah]

PR ready for review: https://github.com/Expensify/App/pull/50935

[alexpensify]

Heads up, I will be offline until Tuesday, October 22, 2024, and will not actively watch over this GitHub during that period.

If this GitHub requires an urgent update, please ask for help in the #expensify-open-source Slack Room. If the inquiry can wait, I'll review it when I return online.

[alexpensify]

Waiting for this one to move to production

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.52-5 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/50935

If no regressions arise, payment will be issued on 2024-10-30. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @getusha requires payment through NewDot Manual Requests
• @rayane-djouah requires payment (Needs manual offer from BZ)

[melvin-bot[bot]]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [x] [@getusha / @rayane-djouah] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [x] [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mountiny]

No regression tests required this is a tool for developers

The payment summary is $1000 to @rayane-djouah and to @getusha

[melvin-bot[bot]]

Payment Summary

Upwork Job

• Reviewer: @getusha owed $250 via NewDot
• ROLE: @rayane-djouah paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@alexpensify)

• [ ] I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• [ ] I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1717949899365408768/hired)
• [ ] I have paid out the Upwork contracts or cancelled the ones that are incorrect
• [ ] I have verified the payment summary above is correct

[alexpensify]

Payouts due: 2024-10-30

• [x] Contributor: $1000 @rayane-djouah
• [x] Reviewer: $1000 @getusha

Upwork job is here. I had to create a new job in Upwork. Please accept and I can complete the payment process. Thanks!

[rayane-djouah]

@alexpensify The payment amount for this issue is $1000 - https://github.com/Expensify/App/issues/30528#issuecomment-2434278370

[rayane-djouah]

@alexpensify Offer accepted, thanks!

[alexpensify]

🤦🏼 good catch - Upwork was right. I've updated the summary here and paid @rayane-djouah via Upwork. I'm waiting for @getusha to accept.

[alexpensify]

Status: Waiting for @getusha to accept in Upwork

[rayane-djouah]

@alexpensify I think that @getusha is being paid in NewDot, we can close this issue