[HOLD for payment 2023-07-26] [$250] Migrate CategoryShortcutButton.js to function component

[marcaaron]

Class Component Migration

Filenames

• src/components/EmojiPicker/CategoryShortcutButton.js
  • type: React.PureComponent
  • has state values: true
  • has refs: false
  • has context: false
  • lifecycle methods: none

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/~01fb802482a26469f9
• Upwork Job ID: 1679301991414870017
• Last Price Increase: 2023-07-13

[kuluruvineeth]

Proposal

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

-> Class Component Migration for CategoryShortcutButton Component

What is the root cause of that problem?

-> class components are more verbose and harder to reason about than functional components.

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

-> Convert CategoryShortcutButton to functional component by removing extends Component , receiving props as input parameter and using arrow functionality syntax.
-> Use useState hook to create and update isHighlighted and setIsHighlighted component state property with the initial value as false.
-> For onHoverIn parameter of Pressable Component, I would write inline function to set isHighlighted to true.
-> For onHoverOut parameter of Pressable Component, I would write inline function to set isHighlighted to false.

What alternative solutions did you explore? (Optional)

[MelvinBot]

Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

12 days overdue now... This issue's end is nigh!

[muxriddinmuqimov77]

I'd like to work on this issue

[dummy-1111]

I'd love to work on this.

[AGarciaNY]

I would like to work on this issue

[melvin-bot]

📣 @AGarciaNY! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[AGarciaNY]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~014058e940367a0a40

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[olexyt]

I can work on this issue.

[mooyg]

Is their any update on this? Can I work on this?

[Santhosh-Sellavel]

@sakluger Can you assign a new CME as @puneetlath is OOO?

[puneetlath]

I happened to see this, so went ahead and reviewed/merged. No need to re-assign @sakluger.

[Santhosh-Sellavel]

Thanks @puneetlath!

[sakluger]

This issue is a bit different from what I'm used to. @marcaaron @puneetlath I assume that I need to hire and pay @AGarciaNY $250 through Upwork (@Santhosh-Sellavel requests payment through NewDot)?

The linked PR was deployed to staging today, so estimated payment date is July 25.

[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.42-26 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat[issue #16143]: Changed CategoryShortcutButton class component #22431

If no regressions arise, payment will be issued on 2023-07-26. 🎊

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

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

[puneetlath]

This issue is a bit different from what I'm used to. @marcaaron @puneetlath I assume that I need to hire and pay @AGarciaNY $250 through Upwork (@Santhosh-Sellavel requests payment through NewDot)?

Yes, that sounds correct to me.

[puneetlath]

This issue is a bit different from what I'm used to. @marcaaron @puneetlath I assume that I need to hire and pay @AGarciaNY $250 through Upwork (@Santhosh-Sellavel requests payment through NewDot)?

Yes, that sounds correct to me.

[Santhosh-Sellavel]

Request $250 on ND

[JmillsExpensify]

Reviewed details for @Santhosh-Sellavel. This is accurate and approved for payment in NewDot.

[puneetlath]

@sakluger could we get the payments handled on this one so that we can close it out?

[sakluger]

Sorry for the delay! @AGarciaNY I sent an offer to you through Upwork. Can you let me know once you've accepted?

[AGarciaNY]

Hi @sakluger. I accepted it.

[sakluger]

Thanks! All paid up 🎉