[HOLD for payment 2023-06-19] [$250] Migrate ReportFooter.js to function component

[marcaaron]

Class Component Migration

Filenames

• src/pages/home/report/ReportFooter.js
  • type: React.Component
  • has state values: false
  • 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/~01587290f1883b1269
• Upwork Job ID: 1665689038067744768
• Last Price Increase: 2023-06-05

[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.

[marcaaron]

Heads up! The pricing for this issue has been adjusted based on the scope of the work and the fact that no complex bug investigations or proposal are required.

[mountiny]

Lower priority right now but I will try to get to this soon

[marcaaron]

Heads up, I'm taking this issue off HOLD and making it a Daily. If you are unable to work on it please remove your assignment and add the External + Help Wanted labels as per this update.

[dhairyasenjaliya]

I can work on this if goes to external

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01587290f1883b1269

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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)

[melvin-bot]

Current assignee @mountiny is eligible for the External assigner, not assigning anyone new.

[mountiny]

@dhairyasenjaliya are you working on anay other refactor now? following this guideline https://expensify.slack.com/archives/C01GTK53T8Q/p1685729601728839?thread_ts=1685727880.152119&cid=C01GTK53T8Q

[kushu7]

I would like to take this refactoring

[dhairyasenjaliya]

@mountiny currently not working on any refactoring task

[multijump]

I would like to take this.

[mountiny]

@dhairyasenjaliya since you were first on this issue after the announcement in Slack, I am going to assing you

[melvin-bot]

📣 @dhairyasenjaliya You have been assigned to this job by @mountiny!
Please apply to this job in Upwork 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 📖

[mountiny]

Thanks everyone, be on a look out for other migration issues, assigning @dhairyasenjaliya as they were the first one to raise hands after the announcement

[dhairyasenjaliya]

alright PR coming up soon thnx @mountiny

[the-mold]

Proposal

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

Refactor the component src/pages/home/report/ReportFooter.js to a function component

What is the root cause of that problem?

Class components are deprecated. We need to upgrade the component to the function component by following the guidelines: https://react.dev/reference/react/Component#alternatives.

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

1. Substitute the getChatFooterStyles with the useMemo hook that has single dependency props.isOffline.
   

   App/src/pages/home/report/ReportFooter.js

   Lines 64 to 66 in 758ef37

   	getChatFooterStyles() {
   	return {...styles.chatFooter, minHeight: !this.props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0};
   	}

2. Both constants isArchivedRoom and isAllowedToComment should be calculated by a single useMemo hook with the single dependency props.report.
   

   App/src/pages/home/report/ReportFooter.js

   Lines 69 to 70 in 758ef37

   	const isArchivedRoom = ReportUtils.isArchivedRoom(this.props.report);
   	const isAllowedToComment = ReportUtils.isAllowedToComment(this.props.report);

3. hideComposer should be calculated with useMemo hook with the dependencies [props.errors, isAllowedToComment]
   

   App/src/pages/home/report/ReportFooter.js

   Line 71 in 758ef37

   const hideComposer = isArchivedRoom || !_.isEmpty(this.props.errors) || !isAllowedToComment;

4. Remove this bindings and use the props argument that are passed to the function component.

What alternative solutions did you explore? (Optional)

NA

[mountiny]

@petromoldovan thanks for the proposal, since these issues are quite straightforwards, we are going based on the first come firse serve basis and each developer only has one assigned at the time, see this update in slack for more info https://expensify.slack.com/archives/C01GTK53T8Q/p1685727880152119

[dhairyasenjaliya]

@s77rt @mountiny PR ready for review

[Vishrut19]

Is it open ?

[s77rt]

@Vishrut19 This issue does not have Help Wanted label, so no. But there are many other open issues checkout issues with Help Wanted label.

[mountiny]

Pr Merged 🎉

[dhairyasenjaliya]

Awesome 👌

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

• Migrate ReportFooter.js to function component #20182

If no regressions arise, payment will be issued on 2023-06-19. 🎊

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

[MitchExpensify]

Payment reminder set in my cal 👍

[MitchExpensify]

Invites sent for payment @s77rt @dhairyasenjaliya 👍

[MitchExpensify]

Paid with bonuses!

[s77rt]

I don't think bonus applies for migration. I have refunded the bonus.

[dhairyasenjaliya]

Yeah agree will refund too within an hour

[dhairyasenjaliya]

Refunded bonus :) @MitchExpensify

[MitchExpensify]

Ah, thanks for the catch team! I appreciated the speed of assignment to merge all the same 😆