-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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 ParticipantLocalTime to function component #20300
Conversation
@fedirjh @roryabraham One of you needs to 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] |
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.
Looks good. left minor comment about props destruction.
} | ||
|
||
function ParticipantLocalTime(props) { | ||
const {participant, preferredLocale, translate} = props; |
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.
I think we should avoid props destruction as per Style guidelines
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.
Seems we have a similar cases that got resolved with a partial destruction , you can check this thread https://expensify.slack.com/archives/C01GTK53T8Q/p1684969645381109
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.
Are you suggesting I shouldn't destructure translate
because that is not watched and we can keep accessing it as props.translate
?
If that is the case, I don't have strong feeling toward that, but I think the best would be to have access to the translate
function through a hook like it was suggested here: https://expensify.slack.com/archives/C01GTK53T8Q/p1685068222924839?thread_ts=1684969645.381109&cid=C01GTK53T8Q
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.
Are you suggesting I shouldn't destructure translate because that is not watched and we can keep accessing it as props.translate?
Sorry missed this comment. Well, props.translate
should be watched as well, as the language may change during re-renders.
I suggested to proceed with the current destruction of props as you did.
|
||
render() { | ||
const reportRecipientDisplayName = lodashGet(this.props, 'participant.firstName') || lodashGet(this.props, 'participant.displayName'); | ||
const reportRecipientDisplayName = lodashGet(props, 'participant.firstName') || lodashGet(props, 'participant.displayName'); |
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.
@aldo-expensify Shouldn’t we wrap it with useMemo
? the state update will re-render the component every second.
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.
Not worth it in my opinion.
useMemo
doesn't prevent re-rendering.
Caching lodashGet(props, 'participant.firstName') || lodashGet(props, 'participant.displayName');
is probably more costly than recalculating it.
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.
is probably more costly than recalculating it.
hmmm , make sense 👍🏼
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.
the state update will re-render the component every second.
I just understood what you meant here. The interval is updating the state every second. I'll check if setting the state to the same value triggers a re-render or not. If it does, we should only set the state if it is really different.
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.
Thank you , that’s perfect.
Reviewer Checklist
Screenshots/VideosWebWeb.movMobile Web - ChromeChrome.movMobile Web - SafariSafari.movDesktopDesktop.moviOSIOS.movAndroidAndroid.mov |
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 and tests well
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 👍🏼
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 👍🏼
✋ 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/roryabraham in version: 1.3.26-0 🚀
|
🚀 Deployed to production by https://github.com/AndrewGable in version: 1.3.26-4 🚀
|
Details
Fixed Issues
$ #16262
PROPOSAL: GH_LINK_ISSUE(COMMENT)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
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 followedAvatar
, I verified the components usingAvatar
are working as expected)/** 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
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Web
Added a couple of console logs to make it more visible when the interval's callback is called and when we cancel it
Screen.Recording.2023-06-06.at.1.05.00.PM.mov
Mobile Web - Chrome
Mobile Web - Safari
Desktop
iOS
Android