Disables timezone options if it is set to automatic #15176
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
priyeshshah11
changed the title
melvin-bot
bot
requested review from
amyevans and
mollfpr
and removed request for
a team
1 task
|
There's a bug I found while testing this PR. Whenever I redirect to the select timezone page with automatic set to Simulator.Screen.Recording.-.iPhone.13.-.2023-02-16.at.22.06.07.mp4Also, I confirm this already in staging, so no regression tied to this PR. |
Reviewer Checklist
Screenshots/VideosWeb15176.Web.mp4Mobile Web - Chrome15176.mWeb-Chrome.mp4Mobile Web - Safari15176.mWeb-Safari.mp4Desktop15176.Desktop.mp4iOS15176.iOS.mp4Android15176.Android.mp4 |
mollfpr
reviewed
Feb 16, 2023
| timezoneInputText: this.timezone.selected, | ||
| timezoneOptions: updatedAllTimezones, | ||
| }); | ||
| } |
There was a problem hiding this comment.
@priyeshshah11 Why do we need this componentDidUpdate?
There was a problem hiding this comment.
It also adds componentDidUpdate in order to update the timezone options when automatic is toggled on/off as navigating back doesn't unmount the page, thus it won't update the timezone options & stay disabled without this.
We should put that instead of // Update timezoneInputText & all timezoneOptions when the timezone object changes
There was a problem hiding this comment.
It also adds componentDidUpdate in order to update the timezone options when automatic is toggled on/off as navigating back doesn't unmount the page, thus it won't update the timezone options & stay disabled without this.
There was a problem hiding this comment.
Thanks @priyeshshah11 that will help to explain what's going on 👍
amyevans
requested review from
tylerkaraszewski
and removed request for
amyevans
|
Assigning @tylerkaraszewski since a bug caused me to be added to #14340 by mistake, but Tyler is CME on that GH, not me |
mollfpr
reviewed
Feb 16, 2023
| // componentDidUpdate is added in order to update the timezone options when automatic is toggled on/off as | ||
| // navigating back doesn't unmount the page, thus it won't update the timezone options & stay disabled without this. | ||
| const newTimezone = lodashGet(this.props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE); | ||
| if (_.isEqual(this.timezone, newTimezone)) { return; } |
There was a problem hiding this comment.
Suggested change
| if (_.isEqual(this.timezone, newTimezone)) { return; } | |
| if (_.isEqual(this.timezone, newTimezone)) { | |
| return; | |
| } | |
|
@priyeshshah11 Is it possible to DRY the below codes? Example: getUserTimezone(currentUserPersonalDetails) {
return lodashGet(currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
}
formatTimezone(timezone) {
return {
text: timezone,
keyForList: timezone,
// Include the green checkmark icon to indicate the currently selected value
customIcon: timezone === this.timezone.selected ? greenCheckmark : undefined,
// This property will make the currently selected value have bold text
boldStyle: timezone === this.timezone.selected,
};
}- this.timezone = lodashGet(props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
+ this.timezone = this.getUserTimezone(props.currentUserPersonalDetails);
this.allTimezones = _.chain(moment.tz.names())
.filter(timezone => !timezone.startsWith('Etc/GMT'))
- .map(timezone => ({
- text: timezone,
- keyForList: timezone,
-
- // Include the green checkmark icon to indicate the currently selected value
- customIcon: timezone === this.timezone.selected ? greenCheckmark : undefined,
-
- // This property will make the currently selected value have bold text
- boldStyle: timezone === this.timezone.selected,
- }))
+ .map(this.formatTimezone)
.value();
this.state = {
@@ -58,23 +49,36 @@ class TimezoneSelectPage extends Component {
componentDidUpdate() {
// componentDidUpdate is added in order to update the timezone options when automatic is toggled on/off as
// navigating back doesn't unmount the page, thus it won't update the timezone options & stay disabled without this.
- const newTimezone = lodashGet(this.props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
- if (_.isEqual(this.timezone, newTimezone)) { return; }
+ const newTimezone = this.getUserTimezone(this.props.currentUserPersonalDetails);
+ if (_.isEqual(this.timezone, newTimezone)) {
+ return;
+ }
+
this.timezone = newTimezone;
- const updatedAllTimezones = _.map(this.allTimezones, timezone => ({
- ...timezone,
+ const updatedAllTimezones = _.map(this.allTimezones, this.formatTimezone);
+
+ this.setState({
+ timezoneInputText: this.timezone.selected,
+ timezoneOptions: updatedAllTimezones,
+ });
+ } |
|
@mollfpr Thanks for that suggestion. I have refactored the get timezone part but not the Thus, I have refactored it to use the correct type of data in each Let me know your thoughts on those changes! Thanks 😄 |
priyeshshah11
requested review from
mollfpr
and removed request for
tylerkaraszewski
|
Sorry, I didn't mean to remove the review request for @tylerkaraszewski but re-requesting review from @mollfpr did it automatically & now I can't request from Tyler. |
mollfpr
reviewed
Feb 19, 2023
| */ | ||
| getKey(text) { | ||
| return `${text}-${(new Date()).getTime()}`; | ||
| } |
There was a problem hiding this comment.
Could you add a description of why we are doing this?
mollfpr
reviewed
Feb 19, 2023
|
|
||
| // This property will make the currently selected value have bold text | ||
| boldStyle: text === this.timezone.selected, | ||
| }; |
There was a problem hiding this comment.
We have a similar object structured within the constructor. We could probably create a function to return the object with a single argument.
|
Thanks for the update @priyeshshah11! It solves the issue I encountered before, just left with a comment. |
@mollfpr Done, refactored as requested 👍 |
mollfpr
reviewed
Feb 19, 2023
|
@mollfpr @tylerkaraszewski Are we waiting on anything here? Is there any action required from me? |
|
@priyeshshah11 we just need to wait for @tylerkaraszewski to review this. |
|
@priyeshshah11 Could you resolve the conflict? Thanks! |
Done @mollfpr |
mollfpr
approved these changes
Feb 23, 2023
|
Bump @tylerkaraszewski for final review. |
|
Bump @tylerkaraszewski for review. |
tylerkaraszewski
approved these changes
Feb 28, 2023
|
Congrats, that’s your 5th PR merged! 🎉 Do you know about the ContributorPlus role? It’s an opportunity to earn more in the Expensify Open Source community. Keep up the great work - thanks! |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Performance Comparison Report 📊Significant Changes To Duration
Show details
Meaningless Changes To DurationShow entries
Show details
|
github-actions
bot
added
the
DeployBlockerCash
|
@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker. |
35 tasks
|
🚀 Deployed to staging by https://github.com/tylerkaraszewski in version: 1.2.78-0 🚀
|
|
🚀 Deployed to production by https://github.com/mountiny in version: 1.2.78-0 🚀
|
6 tasks
|
This regression was caused by this PR. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
This PR disables all the timezone options in the list if timezone is set to automatic. It also adds
componentDidUpdatein order to update the timezone options when automatic is toggled on/off as navigating back doesn't unmount the page, thus it won't update the timezone options & stay disabled without this.Fixed Issues
$ #14340
PROPOSAL: #14340 (comment)
Tests
/selectto the existing route in the browser.Offline tests
You won't be able to go to the timezone options page by modifying the URL in offline mode
QA Steps
Same as Tests section
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.Screenshots/Videos
Web
Screen.Recording.2023-02-16.at.4.03.10.AM.mov
Mobile Web - Chrome
timezone-chrome.mov
timzone-chrom-a.mov
Mobile Web - Safari
timezone-mweb.mov
Desktop
timezone-desktop.mov
iOS
timezone-ios.mov
Android
timezone-android.mov