-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor: Migrate EmojiPickerMenu Class component to Functional Component #29241
Refactor: Migrate EmojiPickerMenu Class component to Functional Component #29241
Conversation
@Santhosh-Sellavel Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a merge conflict with my PR.
This conflict was because of this change in another merged PR src/components/EmojiPicker/EmojiPickerMenu/index.js
I have carefully resolved the merge conflict here b420a04
Also, the final DIFF you can see is not that helpful That's why I have made very small small commit. You can start checking the DIFF of the commits, starting from commit message:- (Sorry for the wierd commit message prefixes😅) |
@@ -499,7 +496,7 @@ const EmojiPickerMenu = (props) => { | |||
</View> | |||
{!isFiltered && ( | |||
<CategoryShortcutBar | |||
headerEmojis={headerEmojis.current} | |||
headerEmojis={headerEmojis} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't use .jsx
please undo the name changes.
Ask in Slack for help. Maybe @Santhosh-Sellavel can help ya. |
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
…d to class methods Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
…putOnScreenFocus Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
… + cleanupEventHandlers() Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
…ollToHeader() Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
…firstNonHeaderIndex converted to ref Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Hey @marcaaron, I just noticed that the workflows require your approval. Could you please take a moment to review this PR? |
@ashuvssut Resolve conflicts, please! |
Hi @Santhosh-Sellavel, I've incorporated all the changes from this pull request to address the merge conflicts.
The pull request is now ready for your review! 😊 |
Reviewer Checklist
Screenshots/VideosWeb & DesktopScreen.Recording.2023-10-16.at.11.08.49.PM.movMobile Web - ChromeScreen_Recording_20231016_234740_Chrome.mp4Mobile Web - SafariSimulator.Screen.Recording.-.iPhone.15.-.2023-10-17.at.00.12.43.mp4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, all yours @marcaaron !
LGTM but there is a lint error that needs to be fixed. |
@marcaaron the lint warning is taken care of! Please Review again😊
|
😬 you have conflicts again 😭 |
@marcaaron fixing it right away in 30mins! |
…expensify-app; branch 'main' of github.com:Expensify/App into refactor/emojipickermenu-try2
Hi @marcaaron , I've incorporated all the changes from this pull request to address the merge conflicts.
The pull request is now ready for your review! 😊 |
All checks passed!!✨✨✨ |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by https://github.com/marcaaron in version: 1.3.87-0 🚀
|
1 similar comment
🚀 Deployed to staging by https://github.com/marcaaron in version: 1.3.87-0 🚀
|
🚀 Deployed to production by https://github.com/francoisl in version: 1.3.87-12 🚀
|
🚀 Deployed to staging by https://github.com/marcaaron in version: 1.3.88-0 🚀
|
🚀 Deployed to production by https://github.com/chiragsalian in version: 1.3.88-11 🚀
|
} | ||
|
||
setupEventHandlers(); | ||
updateFirstNonHeaderIndex(emojis.current); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This caused a regression in #30083. Prior to this PR, updating FirstNonHeaderIndex
was done in componentDidMount
, we should have preserved the same behavior as before.
Details
The migration from class component to functional component is 100% complete.
Fixed Issues
$ #16145
PROPOSAL: #16145 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
I linked the correct issue in the
### Fixed Issues
section aboveI wrote clear testing steps that cover the changes made in this PR
Tests
sectionOffline steps
sectionQA steps
sectionI included screenshots or videos for tests on WEB. Because I only made changes in files that are for web (I have not edited any files with extesnion .native.js (https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
I ran the tests on all platforms & verified they passed on:
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I followed proper code patterns (see Reviewing the code)
toggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedIf a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I followed the guidelines as stated in the Review Guidelines
I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like
Avatar
, I verified the components usingAvatar
are working as expected)I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
I verified that if a function's arguments changed that all usages have also been updated correctly
If a new component is created I verified that:
/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)If any new file was added I verified that:
If a new CSS style is added I verified that:
StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avatar
is modified, I verified thatAvatar
is working as expected in all cases)If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If a new page is added, I verified it's using the
ScrollView
component to make it scrollable when more elements are added to the page.If the
main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.
Screenshots/Videos
Android: Native
There we no changes in .native.js file. so native code for
EmojiPickerMenu's
index.native.js
is untouched. However, here the video:-android.mp4
Android: mWeb Chrome
web1.mp4
iOS: Native
ios.mp4
iOS: mWeb Safari
mweb.ios.mp4
MacOS: Chrome / Safari
web.mp4
MacOS: Desktop
osx.mp4