[HOLD for payment 2023-08-03] [$250] Migrate PopoverWithMeasuredContent.js to function component

[marcaaron]

Class Component Migration

Filenames

• src/components/PopoverWithMeasuredContent.js
  • type: React.Component
  • has state values: true
  • has refs: false
  • has context: false
  • lifecycle methods: shouldComponentUpdate,getDerivedStateFromProps

Task

• We currently have some class components in our codebase that we would like to refactor to a function component.
• Here's a link with some general advice on how to refactor a class component to a function component: https://react.dev/reference/react/Component#alternatives
• If you need additional guidance, please ask in #expensify-open-source
• Test for any regressions and verify that there are no breaking changes

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010c5cb522f6569b11
• Upwork Job ID: 1678837431026483200
• Last Price Increase: 2023-07-11

[MelvinBot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[dummy-1111]

I'd love to work on this.

[dayana7204]

I am ready to work on this ticket. :)

[olexyt]

I can work on this issue.

[rayane-d]

Can I work on this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010c5cb522f6569b11

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[rayane-d]

Can I work on this issue?

[alexxxwork]

I would love to work on this issue

[payal-lathidadiya]

dibs?

[yh-0218]

I can work on this task. Thanks.

[crazy-coding]

I'd love to work on this.

[kmwamasali]

would like to work on this

[Talha345]

I'd love to work on this.

[mejed-alkoutaini]

I'm able to work on this if needed!

[Vadym-33]

I hope to work on this task.

[vadymbokatov]

I'd love to work on this issue

[PhantomOz]

Here is my proposal for how I will fix this issue:

• I will use the React Hooks API to convert the class component to a function component. Specifically, I will use the useState hook to manage the state values, the useRef hook to create and access the refs, and the useEffect hook to replicate the componentDidMount behavior.
• I will also use the React.memo function to wrap the function component and optimize its rendering performance. This will ensure that the component only re-renders when its props change.
• I will test the refactored component on all platforms (iOS, Android, web, desktop) to make sure that it works as expected and does not introduce any regressions or breaking changes.

[s77rt]

Thank you all for your interest here.

• @rayane-djouah Skipping since you are "assigned" to another migration (here)
• @alexxxwork Let's do it! 🚀

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Upwork job

[melvin-bot]

📣 @alexxxwork 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[alexxxwork]

The PR is ready

[melvin-bot]

@alexxxwork, @s77rt, @luacmartins, @bfitzexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[s77rt]

Not overdue. PR is ready for merge - waiting for @luacmartins review

[luacmartins]

This is merged. Sorry for the delay, I was ooo since Thursday last week.

[melvin-bot]

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

[melvin-bot]

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

• Component refactor: migrate PopoverWithMeasuredContent to function component #22868

If no regressions arise, payment will be issued on 2023-08-03. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @alexxxwork requires payment
• @s77rt requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[bfitzexpensify]

All paid out, we're done here.