[$1000] App does not display current value on opening date of birth page

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Open settings
3. Open profile
4. Open personal details
5. Open date of birth
6. Reload the page
7. Change year and click save
8. Again open date of birth and observe that app still displays changed year value instead of currently selected value

Expected Result:

App should display currently selected value in calendar whenever we open date of birth page

Actual Result:

If we reload on date of birth page, change year, save and revisit then app displays changed year value instead of currently selected value

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.42-6
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

displays.changed.year.value.date.of.birth.mp4

Recording.1307.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689775123559269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010b252a0c8b8f0528
• Upwork Job ID: 1683848000545353728
• Last Price Increase: 2023-07-25

[dukenv0307]

Proposal

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

App does not display current value on opening date of birth page

What is the root cause of that problem?

We save the date of birth and navigate to PersonalDetailsInitialPage. When we go to DateOfBirthPage page again, this page isn't unmounted and old state is displayed.

App/src/libs/actions/PersonalDetails.js

Line 216 in e87f2eb

Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS);

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

We can use HOC withNavigationFocus to listen when DateOfBirthPage page is focused and need a prop to reset the year of date picker to the dob year.

What alternative solutions did you explore? (Optional)

When we save the dob, we can use goBack intstead of navigate to unmount DateOfBirthPage page after navigating.

Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS);

App/src/libs/actions/PersonalDetails.js

Line 216 in e87f2eb

Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS);

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[c3024]

Proposal

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

On clicking the year in date of birth the date does not get updated

What is the root cause of that problem?

Root cause of the problem we are not calling the callback function which updates the date onYearSelected here

App/src/components/NewDatePicker/CalendarPicker/index.js

Lines 80 to 90 in 40f354b

	onYearSelected(year) {
	this.setState((prev) => {
	const newCurrentDateView = moment(prev.currentDateView).set('year', year).toDate();
	return {
	currentDateView: newCurrentDateView,
	isYearPickerVisible: false,
	years: _.map(prev.years, (item) => ({
	...item,
	isSelected: item.value === newCurrentDateView.getFullYear(),
	})),

like when we select day in onDayPressed here

App/src/components/NewDatePicker/CalendarPicker/index.js

Line 104 in 40f354b

() => this.props.onSelected(moment(this.state.currentDateView).format('YYYY-MM-DD')),

So unless we select day, the date does not get updated. If we select another year or month but not select the day the date does not get updated.

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

We need to add the callback function here

App/src/components/NewDatePicker/CalendarPicker/index.js

Line 90 in 40f354b

})),

We need to add this at moveToPrevMonth and moveToNextMonth also so that when changing month also the date updates correctly here

App/src/components/NewDatePicker/CalendarPicker/index.js

Line 112 in 40f354b

this.setState((prev) => ({currentDateView: moment(prev.currentDateView).subtract(1, 'months').toDate()}));

and here

App/src/components/NewDatePicker/CalendarPicker/index.js

Line 119 in 40f354b

this.setState((prev) => ({currentDateView: moment(prev.currentDateView).add(1, 'months').toDate()}));

To avoid repetition of this line in each of the handlers, we can extract this line to a separate function and use it in each of the handlers. Any changes can be done centrally in that function in future.
We might as well change the onDayPressed function to this so that callback function is called with the new date to ensure no stale values are passed to the callback function.

    onDayPressed(day) {
    this.setState((prev) => {
        const newDate = moment(prev.currentDateView).set('date', day).toDate();
        this.props.onSelected(moment(newDate).format('YYYY-MM-DD'));
        return { currentDateView: newDate };
    });
}

What alternative solutions did you explore? (Optional)

We can keep the existing code of updating the date only on selecting day. Then we can disable the Save button in the DateOfBirth page till day is selected (even though year or month may have been changed) or show an error if we click on Save without selecting day.
I think this solution is more complicated and less user-friendly. It is common for people to select day first and then year later. In these cases, the primary solution above updates the TextInput and calls props.onSelected on click of year itself without requiring clicking on day and the Save button can be clicked directly. With the alternative solution the day should be clicked whenever we change year or month to Save without Save getting disabled or without errors.

Result

Screen.Recording.2023-07-21.at.9.02.57.AM.mov

[huzaifa-99]

Proposal

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

We want the year to be updated in the date field when selected from the year picker modal

What is the root cause of that problem?

This is a regression from #21792

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

Before #21792 we were using componentDidUpdate to set the state for all cases and trigger the props.onSelected callback. I think we should also do something similar here like

componentDidUpdate(prevProps, prevState) {
    if (this.state.currentDateView !== prevState.currentDateView) {
        this.props.onSelected(moment(this.state.currentDateView).format('YYYY-MM-DD'))
    }
}

and remove this line

What alternative solutions did you explore? (Optional)

N/A

[zanyrenney]

Checking what the process is for regression bugs and if we would reopen that intitial issue.

[c3024]

While componentDidUpdate appears simpler, the props.onPressed is directly related to the press handlers onYearPressed etc so I think the callback should be triggered from the press handlers as the ideal React practice instead of waiting for the page to render and then calling the callback with componentDidUpdate.

[zanyrenney]

reproduced. but getting Yowza big file error.

[zanyrenney]

adding external.

[zanyrenney]

2023-07-25_13-12-29.mp4