Skip to content

Migrate index.js to function component #16161

New issue
New issue
Closed
Closed
Migrate index.js to function component#16161
Assignees
BeamanatorpeterdbarkerUKArekChrkacper-mikolajczak
Labels
EngineeringExternalAdded to denote the issue can be worked on by a contributorImprovementItem broken or needs improvement.WeeklyKSv2
Milestone
React Class Component Migration

Description

@marcaaron
marcaaron
opened on Mar 20, 2023

Class Component Migration

Filenames

  • src/components/Hoverable/index.js
    • type: React.Component
    • has state values: true
    • has refs: true
    • has context: false
    • lifecycle methods: componentDidMount,componentWillUnmount

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/~019c6ea0a458401e24
  • Upwork Job ID: 1701785419929559040
  • Last Price Increase: 2023-10-04

Activity

  1. marcaaron
    added
    Engineering
    ImprovementItem broken or needs improvement.
    on Mar 20, 2023
  2. marcaaron
    added this to the React Class Component Migration milestone on Mar 20, 2023
  3. melvin-bot
    locked and limited conversation to collaborators on Mar 20, 2023
  4. Expensify
    unlocked this conversation on Mar 21, 2023
  5. marcaaron
    changed the title [-][HOLD] Migrate index.js to function component[/-] [+][HOLD][$250] Migrate index.js to function component[/+] on Apr 13, 2023

  6. muxriddinmuqimov77 commented on Jun 6, 2023

    @muxriddinmuqimov77
    muxriddinmuqimov77
    on Jun 6, 2023

    I'd like to work on this issue

  7. dummy-1111 commented on Jun 6, 2023

    @dummy-1111
    dummy-1111
    on Jun 6, 2023
    Contributor

    I'd love to work on this.

  8. vdem0115 commented on Jul 5, 2023

    @vdem0115
    vdem0115
    on Jul 5, 2023

    I can work on this issue.

  9. olexyt commented on Jul 7, 2023

    @olexyt
    olexyt
    on Jul 7, 2023
    Contributor

    I can work on this issue.

  10. rayane-d commented on Jul 9, 2023

    @rayane-d
    rayane-d
    on Jul 9, 2023
    Contributor

    Can I work on this issue?

  11. mkhutornyi commented on Jul 12, 2023

    @mkhutornyi
    mkhutornyi
    on Jul 12, 2023
    Contributor

    I'd like to work on this.

  12. aditygrg2 commented on Aug 9, 2023

    @aditygrg2
    aditygrg2
    on Aug 9, 2023

    Hello, I would like to work on this issue.

  13. kacper-mikolajczak commented on Sep 11, 2023

    @kacper-mikolajczak
    kacper-mikolajczak
    on Sep 11, 2023
    Contributor

    Hi, I am Kacper from Callstack and I’d like to work on this issue :)

  14. melvin-bot commented on Sep 11, 2023

    @melvin-bot
    melvin-botBot
    on Sep 11, 2023

    📣 @kacper-mikolajczak! 📣
    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.
      Screen Shot 2022-11-16 at 4 42 54 PM
      Format:
    Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

  15. 63 remaining items

  16. kacper-mikolajczak commented on Oct 23, 2023

    @kacper-mikolajczak
    kacper-mikolajczak
    on Oct 23, 2023
    Contributor

    @youssef-lr Here is the continuation of an issue described in #29844 (comment)

  17. kacper-mikolajczak commented on Oct 24, 2023

    @kacper-mikolajczak
    kacper-mikolajczak
    on Oct 24, 2023
    Contributor

    @youssef-lr I've tried to investigate what is causing the app to crash when responsive view is triggered via devtools. I could not really find a proper reason - it looks like it only happens when we open the devtools for the first time:

    • no error when rapidly changing window size
    • no error when going between many screen sizes in devtools' responsive view
    • no error when app is being opened in devtools's responsive view
    • window size does not matter, with larger/smaller screens it's still triggering

    It seems that some refs are not being properly attached, or at least not in time for BoundsObserver to be ready, thus BoundsObserver triggers its error based on missing ref.

    I tried to prepare reproducible sample with BoundsObserver but it did not give any meaningful results - the app just works.

    For today I have no further ideas how to solve the issue. Sorry! I will try to find a way soon!

  18. youssef-lr commented on Oct 25, 2023

    @youssef-lr
    youssef-lr
    on Oct 25, 2023
    Contributor

    Thank you so much for digging into this @kacper-mikolajczak, appreciate it!

  19. kacper-mikolajczak commented on Oct 27, 2023

    @kacper-mikolajczak
    kacper-mikolajczak
    on Oct 27, 2023
    Contributor

    @youssef-lr Here is a solution that should solve the issue here as well: #30278 (comment)

    PR is under review 👍

  20. peterdbarkerUK
    removed
    Help WantedApply this label when an issue is open to proposals by contributors
    Awaiting PaymentAuto-added when associated PR is deployed to production
    on Oct 30, 2023
  21. peterdbarkerUK
    changed the title [-][HOLD for payment 2023-10-25] [$250] Migrate index.js to function component[/-] [+]Migrate index.js to function component[/+] on Oct 30, 2023

  22. peterdbarkerUK commented on Oct 30, 2023

    @peterdbarkerUK
    peterdbarkerUK
    on Oct 30, 2023
    Contributor

    Deployed to staging

  23. melvin-bot
    added
    Overdue
    on Nov 7, 2023

  24. peterdbarkerUK commented on Nov 7, 2023

    @peterdbarkerUK
    peterdbarkerUK
    on Nov 7, 2023
    Contributor

    With this now on prod, @youssef-lr can you confirm this is working as expected (and if so, close out the issue)?

  25. melvin-bot
    removed
    Overdue
    on Nov 7, 2023

  26. youssef-lr commented on Nov 8, 2023

    @youssef-lr
    youssef-lr
    on Nov 8, 2023
    Contributor

    Working great @peterdbarkerUK!

  27. Beamanator commented on Nov 9, 2023

    @Beamanator
    Beamanator
    on Nov 9, 2023
    Contributor

    Woohoo ! That means we can finally close this out? :D

  28. youssef-lr commented on Nov 9, 2023

    @youssef-lr
    youssef-lr
    on Nov 9, 2023
    Contributor

    Yup!

  29. youssef-lr
    closed this as completedon Nov 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

EngineeringExternalAdded to denote the issue can be worked on by a contributorImprovementItem broken or needs improvement.WeeklyKSv2

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions