From 7be2a5953b279ce6d0166d9bdaab33884d1f1a85 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 17 Oct 2023 23:59:48 +0530 Subject: [PATCH 1/3] implemented a year picker route screen v1 --- src/ROUTES.ts | 10 ++ .../CalendarPicker/YearPickerModal.js | 143 +++++++++++------- .../NewDatePicker/CalendarPicker/index.js | 58 +++++-- src/components/NewDatePicker/index.js | 3 +- src/components/withNavigation.js | 1 + .../AppNavigator/ModalStackNavigators.js | 1 + src/libs/Navigation/linkingConfig.js | 4 + src/libs/Permissions.ts | 3 +- .../PersonalDetails/DateOfBirthPage.js | 21 ++- 9 files changed, 168 insertions(+), 76 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b7896225557d..8ed3cae803e8 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -97,6 +97,16 @@ export default { SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details', SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth', + SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH_SELECT_YEAR: { + route: 'settings/profile/personal-details/date-of-birth/select-year', + getRoute: (year: string, backTo?: string) => { + let route = `settings/profile/personal-details/date-of-birth/select-year?year=${year}`; + if (backTo) { + route += `&backTo=${encodeURIComponent(backTo)}`; + } + return route; + }, + }, SETTINGS_PERSONAL_DETAILS_ADDRESS: 'settings/profile/personal-details/address', SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY: { route: 'settings/profile/personal-details/address/country', diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js index 9825109fbb63..8813ffbd8312 100644 --- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js +++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js @@ -1,6 +1,7 @@ -import React, {useEffect, useMemo, useState} from 'react'; +import React, {useEffect, useMemo, useState, useCallback} from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; +import moment from 'moment'; import HeaderWithBackButton from '../../HeaderWithBackButton'; import CONST from '../../../CONST'; import SelectionList from '../../SelectionList'; @@ -9,40 +10,61 @@ import {radioListItemPropTypes} from '../../SelectionList/selectionListPropTypes import useLocalize from '../../../hooks/useLocalize'; import ScreenWrapper from '../../ScreenWrapper'; import styles from '../../../styles/styles'; +import lodashGet from 'lodash/get'; +import Navigation from '../../../libs/Navigation/Navigation'; const propTypes = { - /** Whether the modal is visible */ - isVisible: PropTypes.bool.isRequired, + /** Route from navigation */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** Currently selected country */ + country: PropTypes.string, - /** The list of years to render */ - years: PropTypes.arrayOf(PropTypes.shape(radioListItemPropTypes.item)).isRequired, + /** Route to navigate back after selecting a currency */ + backTo: PropTypes.string, + }), + }).isRequired, - /** Currently selected year */ - currentYear: PropTypes.number, - - /** Function to call when the user selects a year */ - onYearChange: PropTypes.func, - - /** Function to call when the user closes the year picker */ - onClose: PropTypes.func, -}; - -const defaultProps = { - currentYear: new Date().getFullYear(), - onYearChange: () => {}, - onClose: () => {}, + /** Navigation from react-navigation */ + navigation: PropTypes.shape({ + /** getState function retrieves the current navigation state from react-navigation's navigation property */ + getState: PropTypes.func.isRequired, + }).isRequired, }; function YearPickerModal(props) { + const minYear = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'years').year(); + const maxYear = moment().subtract(CONST.DATE_BIRTH.MIN_AGE, 'years').year(); + const currentYear = lodashGet(props, 'route.params.year'); + const years = useMemo( + () => + _.map( + Array.from({length: maxYear - minYear + 1}, (_, i) => minYear + i), + (year) => { + return { + value: year, + keyForList: year.toString(), + text: year.toString(), + isSelected: currentYear.toString() === year.toString(), + }; + }, + ), + [currentYear, maxYear, minYear], + ); + + const {route, navigation} = props; const {translate} = useLocalize(); const [searchText, setSearchText] = useState(''); const {sections, headerMessage} = useMemo(() => { - const yearsList = searchText === '' ? props.years : _.filter(props.years, (year) => year.text.includes(searchText)); + const yearsList = searchText === '' ? years : _.filter(years, (year) => year.text.includes(searchText)); return { headerMessage: !yearsList.length ? translate('common.noResultsFound') : '', sections: [{data: yearsList, indexOffset: 0}], }; - }, [props.years, searchText, translate]); + }, [years, searchText, translate]); + + console.log('years', minYear, maxYear); useEffect(() => { if (props.isVisible) { @@ -51,45 +73,58 @@ function YearPickerModal(props) { setSearchText(''); }, [props.isVisible]); + const selectYear = useCallback( + (option) => { + const backTo = lodashGet(route, 'params.backTo', ''); + + // Check the navigation state and "backTo" parameter to decide navigation behavior + if (navigation.getState().routes.length === 1 && _.isEmpty(backTo)) { + // If there is only one route and "backTo" is empty, go back in navigation + Navigation.goBack(); + } else if (!_.isEmpty(backTo) && navigation.getState().routes.length === 1) { + // If "backTo" is not empty and there is only one route, go back to the specific route defined in "backTo" with a country parameter + Navigation.goBack(`${route.params.backTo}?year=${option.value}`); + } else { + // Otherwise, navigate to the specific route defined in "backTo" with a country parameter + Navigation.navigate(`${route.params.backTo}?year=${option.value}`); + } + }, + [route, navigation], + ); + return ( - - - - setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())} - keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} - headerMessage={headerMessage} - sections={sections} - onSelectRow={(option) => props.onYearChange(option.value)} - initiallyFocusedOptionKey={props.currentYear.toString()} - showScrollIndicator - /> - - + { + const backTo = lodashGet(route, 'params.backTo', ''); + const backToRoute = backTo ? `${backTo}?year=${currentYear}` : ''; + Navigation.goBack(backToRoute); + }} + /> + setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())} + keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} + headerMessage={headerMessage} + sections={sections} + onSelectRow={selectYear} + initiallyFocusedOptionKey={currentYear.toString()} + showScrollIndicator + /> + ); } YearPickerModal.propTypes = propTypes; -YearPickerModal.defaultProps = defaultProps; YearPickerModal.displayName = 'YearPickerModal'; export default YearPickerModal; diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js index d03c36997845..b1553d9d0545 100644 --- a/src/components/NewDatePicker/CalendarPicker/index.js +++ b/src/components/NewDatePicker/CalendarPicker/index.js @@ -1,20 +1,25 @@ import _ from 'underscore'; import React from 'react'; -import {View} from 'react-native'; +import { View } from 'react-native'; import moment from 'moment'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import Text from '../../Text'; import YearPickerModal from './YearPickerModal'; +import lodashGet from 'lodash/get'; +import compose from '../../../libs/compose'; import ArrowIcon from './ArrowIcon'; import styles from '../../../styles/styles'; import generateMonthMatrix from './generateMonthMatrix'; -import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; +import Navigation from '../../../libs/Navigation/Navigation'; +import withLocalize, { withLocalizePropTypes } from '../../withLocalize'; import CONST from '../../../CONST'; +import ROUTES from '../../../ROUTES'; import getButtonState from '../../../libs/getButtonState'; import * as StyleUtils from '../../../styles/StyleUtils'; import PressableWithFeedback from '../../Pressable/PressableWithFeedback'; import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback'; +import withNavigation from '../../withNavigation'; const propTypes = { /** An initial value of date string */ @@ -36,7 +41,7 @@ const defaultProps = { value: new Date(), minDate: moment().year(CONST.CALENDAR_PICKER.MIN_YEAR).toDate(), maxDate: moment().year(CONST.CALENDAR_PICKER.MAX_YEAR).toDate(), - onSelected: () => {}, + onSelected: () => { }, }; class CalendarPicker extends React.PureComponent { @@ -61,7 +66,7 @@ class CalendarPicker extends React.PureComponent { currentDateView, isYearPickerVisible: false, years: _.map( - Array.from({length: maxYear - minYear + 1}, (v, i) => i + minYear), + Array.from({ length: maxYear - minYear + 1 }, (v, i) => i + minYear), (value) => ({ text: value.toString(), value, @@ -92,6 +97,24 @@ class CalendarPicker extends React.PureComponent { }); } + componentDidMount() { + const yearFromRoute = lodashGet(this.props, 'currentRoute.params.year'); + if (!yearFromRoute || yearFromRoute === this.state.currentDateView.getFullYear()) { + return; + } + this.onYearSelected(yearFromRoute); + } + + componentDidUpdate(prevProps) { + const yearFromRoute = lodashGet(this.props, 'currentRoute.params.year'); + const prevYearFromRoute = lodashGet(prevProps, 'currentRoute.params.year'); + console.log('yearFromRoute', yearFromRoute, prevYearFromRoute) + if (!yearFromRoute || yearFromRoute === this.state.currentDateView.getFullYear() || yearFromRoute === prevYearFromRoute) { + return; + } + this.onYearSelected(yearFromRoute); + } + /** * Calls the onSelected function with the selected date. * @param {Number} day - The day of the month that was selected. @@ -109,14 +132,14 @@ class CalendarPicker extends React.PureComponent { * Handles the user pressing the previous month arrow of the calendar picker. */ moveToPrevMonth() { - this.setState((prev) => ({currentDateView: moment(prev.currentDateView).subtract(1, 'months').toDate()})); + this.setState((prev) => ({ currentDateView: moment(prev.currentDateView).subtract(1, 'months').toDate() })); } /** * Handles the user pressing the next month arrow of the calendar picker. */ moveToNextMonth() { - this.setState((prev) => ({currentDateView: moment(prev.currentDateView).add(1, 'months').toDate()})); + this.setState((prev) => ({ currentDateView: moment(prev.currentDateView).add(1, 'months').toDate() })); } render() { @@ -132,10 +155,14 @@ class CalendarPicker extends React.PureComponent { this.setState({isYearPickerVisible: true})} + onPress={() => { + const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, ''); + const year = moment(this.state.currentDateView).year(); + Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH_SELECT_YEAR.getRoute(year, activeRoute)); + }} style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentStart]} wrapperStyle={[styles.alignItemsCenter]} hoverDimmingValue={1} @@ -189,7 +216,7 @@ class CalendarPicker extends React.PureComponent { {dayOfWeek[0]} @@ -216,9 +243,9 @@ class CalendarPicker extends React.PureComponent { accessibilityLabel={day ? day.toString() : undefined} focusable={Boolean(day)} accessible={Boolean(day)} - dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} + dataSet={{ [CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true }} > - {({hovered, pressed}) => ( + {({ hovered, pressed }) => ( ))} - this.setState({isYearPickerVisible: false})} - /> + /> */} ); } @@ -249,4 +276,7 @@ class CalendarPicker extends React.PureComponent { CalendarPicker.propTypes = propTypes; CalendarPicker.defaultProps = defaultProps; -export default withLocalize(CalendarPicker); +export default compose( + withLocalize, + withNavigation, +)(CalendarPicker); diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index 3201388790c9..966169f725a3 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -44,7 +44,7 @@ const datePickerDefaultProps = { value: undefined, }; -function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) { +function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value, selectedYear}) { const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined); useEffect(() => { @@ -92,6 +92,7 @@ function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inpu maxDate={maxDate} value={selectedDate} onSelected={setSelectedDate} + selectedYear={selectedYear} /> diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js index ef0f599dc982..6d9721187173 100644 --- a/src/components/withNavigation.js +++ b/src/components/withNavigation.js @@ -17,6 +17,7 @@ export default function withNavigation(WrappedComponent) { {...props} ref={props.forwardedRef} navigation={navigation} + currentRoute={navigation.getState().routes[navigation.getState().index]} /> ); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 54c7b9b8396e..9efc61f339f2 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -127,6 +127,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ Settings_PersonalDetails_Initial: () => require('../../../pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage').default, Settings_PersonalDetails_LegalName: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default, Settings_PersonalDetails_DateOfBirth: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default, + Settings_PersonalDetails_DateOfBirth_Select_Year: () => require('../../../components/NewDatePicker/CalendarPicker/YearPickerModal').default, Settings_PersonalDetails_Address: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default, Settings_PersonalDetails_Address_Country: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default, Settings_ContactMethods: () => require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 8a68ec9c0d07..a37c90373e26 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -163,6 +163,10 @@ export default { path: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH, exact: true, }, + Settings_PersonalDetails_DateOfBirth_Select_Year: { + path: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH_SELECT_YEAR.route, + exact: true, + }, Settings_PersonalDetails_Address: { path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS, exact: true, diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 13489c396c3c..0505420822a3 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -2,7 +2,8 @@ import CONST from '../CONST'; import Beta from '../types/onyx/Beta'; function canUseAllBetas(betas: Beta[]): boolean { - return betas?.includes(CONST.BETAS.ALL); + // return betas?.includes(CONST.BETAS.ALL); + return true; } function canUseChronos(betas: Beta[]): boolean { diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js index 68d81d64c604..2668230fe370 100644 --- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js +++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js @@ -1,15 +1,15 @@ import PropTypes from 'prop-types'; -import React, {useCallback} from 'react'; -import {withOnyx} from 'react-native-onyx'; +import React, { useCallback, useEffect, useRef } from 'react'; +import { withOnyx } from 'react-native-onyx'; import lodashGet from 'lodash/get'; -import {subYears} from 'date-fns'; +import { subYears } from 'date-fns'; import CONST from '../../../../CONST'; import ONYXKEYS from '../../../../ONYXKEYS'; import ROUTES from '../../../../ROUTES'; import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; import NewDatePicker from '../../../../components/NewDatePicker'; import ScreenWrapper from '../../../../components/ScreenWrapper'; -import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; +import withLocalize, { withLocalizePropTypes } from '../../../../components/withLocalize'; import Navigation from '../../../../libs/Navigation/Navigation'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import * as PersonalDetails from '../../../../libs/actions/PersonalDetails'; @@ -20,6 +20,14 @@ import FullscreenLoadingIndicator from '../../../../components/FullscreenLoading import FormProvider from '../../../../components/Form/FormProvider'; const propTypes = { + /** Route from navigation */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** Currently selected country */ + year: PropTypes.string, + }), + }).isRequired, /* Onyx Props */ /** User's private personal details */ @@ -36,9 +44,10 @@ const defaultProps = { }, }; -function DateOfBirthPage({translate, privatePersonalDetails}) { +function DateOfBirthPage({ translate, privatePersonalDetails, route }) { usePrivatePersonalDetails(); const isLoadingPersonalDetails = lodashGet(privatePersonalDetails, 'isLoading', true); + const yearFromRoute = lodashGet(route, 'params.year') /** * @param {Object} values @@ -59,7 +68,6 @@ function DateOfBirthPage({translate, privatePersonalDetails}) { return errors; }, []); - return ( )} From 503df1eb6487e8c316e58059f2708ee55806baee Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Wed, 18 Oct 2023 20:02:25 +0530 Subject: [PATCH 2/3] Revert "implemented a year picker route screen v1" This reverts commit 7be2a5953b279ce6d0166d9bdaab33884d1f1a85. --- src/ROUTES.ts | 10 -- .../CalendarPicker/YearPickerModal.js | 143 +++++++----------- .../NewDatePicker/CalendarPicker/index.js | 58 ++----- src/components/NewDatePicker/index.js | 3 +- src/components/withNavigation.js | 1 - .../AppNavigator/ModalStackNavigators.js | 1 - src/libs/Navigation/linkingConfig.js | 4 - src/libs/Permissions.ts | 3 +- .../PersonalDetails/DateOfBirthPage.js | 21 +-- 9 files changed, 76 insertions(+), 168 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 8ed3cae803e8..b7896225557d 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -97,16 +97,6 @@ export default { SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details', SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth', - SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH_SELECT_YEAR: { - route: 'settings/profile/personal-details/date-of-birth/select-year', - getRoute: (year: string, backTo?: string) => { - let route = `settings/profile/personal-details/date-of-birth/select-year?year=${year}`; - if (backTo) { - route += `&backTo=${encodeURIComponent(backTo)}`; - } - return route; - }, - }, SETTINGS_PERSONAL_DETAILS_ADDRESS: 'settings/profile/personal-details/address', SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY: { route: 'settings/profile/personal-details/address/country', diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js index 8813ffbd8312..9825109fbb63 100644 --- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js +++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js @@ -1,7 +1,6 @@ -import React, {useEffect, useMemo, useState, useCallback} from 'react'; +import React, {useEffect, useMemo, useState} from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import moment from 'moment'; import HeaderWithBackButton from '../../HeaderWithBackButton'; import CONST from '../../../CONST'; import SelectionList from '../../SelectionList'; @@ -10,61 +9,40 @@ import {radioListItemPropTypes} from '../../SelectionList/selectionListPropTypes import useLocalize from '../../../hooks/useLocalize'; import ScreenWrapper from '../../ScreenWrapper'; import styles from '../../../styles/styles'; -import lodashGet from 'lodash/get'; -import Navigation from '../../../libs/Navigation/Navigation'; const propTypes = { - /** Route from navigation */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** Currently selected country */ - country: PropTypes.string, + /** Whether the modal is visible */ + isVisible: PropTypes.bool.isRequired, - /** Route to navigate back after selecting a currency */ - backTo: PropTypes.string, - }), - }).isRequired, + /** The list of years to render */ + years: PropTypes.arrayOf(PropTypes.shape(radioListItemPropTypes.item)).isRequired, - /** Navigation from react-navigation */ - navigation: PropTypes.shape({ - /** getState function retrieves the current navigation state from react-navigation's navigation property */ - getState: PropTypes.func.isRequired, - }).isRequired, + /** Currently selected year */ + currentYear: PropTypes.number, + + /** Function to call when the user selects a year */ + onYearChange: PropTypes.func, + + /** Function to call when the user closes the year picker */ + onClose: PropTypes.func, }; -function YearPickerModal(props) { - const minYear = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'years').year(); - const maxYear = moment().subtract(CONST.DATE_BIRTH.MIN_AGE, 'years').year(); - const currentYear = lodashGet(props, 'route.params.year'); - const years = useMemo( - () => - _.map( - Array.from({length: maxYear - minYear + 1}, (_, i) => minYear + i), - (year) => { - return { - value: year, - keyForList: year.toString(), - text: year.toString(), - isSelected: currentYear.toString() === year.toString(), - }; - }, - ), - [currentYear, maxYear, minYear], - ); +const defaultProps = { + currentYear: new Date().getFullYear(), + onYearChange: () => {}, + onClose: () => {}, +}; - const {route, navigation} = props; +function YearPickerModal(props) { const {translate} = useLocalize(); const [searchText, setSearchText] = useState(''); const {sections, headerMessage} = useMemo(() => { - const yearsList = searchText === '' ? years : _.filter(years, (year) => year.text.includes(searchText)); + const yearsList = searchText === '' ? props.years : _.filter(props.years, (year) => year.text.includes(searchText)); return { headerMessage: !yearsList.length ? translate('common.noResultsFound') : '', sections: [{data: yearsList, indexOffset: 0}], }; - }, [years, searchText, translate]); - - console.log('years', minYear, maxYear); + }, [props.years, searchText, translate]); useEffect(() => { if (props.isVisible) { @@ -73,58 +51,45 @@ function YearPickerModal(props) { setSearchText(''); }, [props.isVisible]); - const selectYear = useCallback( - (option) => { - const backTo = lodashGet(route, 'params.backTo', ''); - - // Check the navigation state and "backTo" parameter to decide navigation behavior - if (navigation.getState().routes.length === 1 && _.isEmpty(backTo)) { - // If there is only one route and "backTo" is empty, go back in navigation - Navigation.goBack(); - } else if (!_.isEmpty(backTo) && navigation.getState().routes.length === 1) { - // If "backTo" is not empty and there is only one route, go back to the specific route defined in "backTo" with a country parameter - Navigation.goBack(`${route.params.backTo}?year=${option.value}`); - } else { - // Otherwise, navigate to the specific route defined in "backTo" with a country parameter - Navigation.navigate(`${route.params.backTo}?year=${option.value}`); - } - }, - [route, navigation], - ); - return ( - - { - const backTo = lodashGet(route, 'params.backTo', ''); - const backToRoute = backTo ? `${backTo}?year=${currentYear}` : ''; - Navigation.goBack(backToRoute); - }} - /> - setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())} - keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} - headerMessage={headerMessage} - sections={sections} - onSelectRow={selectYear} - initiallyFocusedOptionKey={currentYear.toString()} - showScrollIndicator - /> - + + + setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())} + keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} + headerMessage={headerMessage} + sections={sections} + onSelectRow={(option) => props.onYearChange(option.value)} + initiallyFocusedOptionKey={props.currentYear.toString()} + showScrollIndicator + /> + + ); } YearPickerModal.propTypes = propTypes; +YearPickerModal.defaultProps = defaultProps; YearPickerModal.displayName = 'YearPickerModal'; export default YearPickerModal; diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js index b1553d9d0545..d03c36997845 100644 --- a/src/components/NewDatePicker/CalendarPicker/index.js +++ b/src/components/NewDatePicker/CalendarPicker/index.js @@ -1,25 +1,20 @@ import _ from 'underscore'; import React from 'react'; -import { View } from 'react-native'; +import {View} from 'react-native'; import moment from 'moment'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import Text from '../../Text'; import YearPickerModal from './YearPickerModal'; -import lodashGet from 'lodash/get'; -import compose from '../../../libs/compose'; import ArrowIcon from './ArrowIcon'; import styles from '../../../styles/styles'; import generateMonthMatrix from './generateMonthMatrix'; -import Navigation from '../../../libs/Navigation/Navigation'; -import withLocalize, { withLocalizePropTypes } from '../../withLocalize'; +import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; import CONST from '../../../CONST'; -import ROUTES from '../../../ROUTES'; import getButtonState from '../../../libs/getButtonState'; import * as StyleUtils from '../../../styles/StyleUtils'; import PressableWithFeedback from '../../Pressable/PressableWithFeedback'; import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback'; -import withNavigation from '../../withNavigation'; const propTypes = { /** An initial value of date string */ @@ -41,7 +36,7 @@ const defaultProps = { value: new Date(), minDate: moment().year(CONST.CALENDAR_PICKER.MIN_YEAR).toDate(), maxDate: moment().year(CONST.CALENDAR_PICKER.MAX_YEAR).toDate(), - onSelected: () => { }, + onSelected: () => {}, }; class CalendarPicker extends React.PureComponent { @@ -66,7 +61,7 @@ class CalendarPicker extends React.PureComponent { currentDateView, isYearPickerVisible: false, years: _.map( - Array.from({ length: maxYear - minYear + 1 }, (v, i) => i + minYear), + Array.from({length: maxYear - minYear + 1}, (v, i) => i + minYear), (value) => ({ text: value.toString(), value, @@ -97,24 +92,6 @@ class CalendarPicker extends React.PureComponent { }); } - componentDidMount() { - const yearFromRoute = lodashGet(this.props, 'currentRoute.params.year'); - if (!yearFromRoute || yearFromRoute === this.state.currentDateView.getFullYear()) { - return; - } - this.onYearSelected(yearFromRoute); - } - - componentDidUpdate(prevProps) { - const yearFromRoute = lodashGet(this.props, 'currentRoute.params.year'); - const prevYearFromRoute = lodashGet(prevProps, 'currentRoute.params.year'); - console.log('yearFromRoute', yearFromRoute, prevYearFromRoute) - if (!yearFromRoute || yearFromRoute === this.state.currentDateView.getFullYear() || yearFromRoute === prevYearFromRoute) { - return; - } - this.onYearSelected(yearFromRoute); - } - /** * Calls the onSelected function with the selected date. * @param {Number} day - The day of the month that was selected. @@ -132,14 +109,14 @@ class CalendarPicker extends React.PureComponent { * Handles the user pressing the previous month arrow of the calendar picker. */ moveToPrevMonth() { - this.setState((prev) => ({ currentDateView: moment(prev.currentDateView).subtract(1, 'months').toDate() })); + this.setState((prev) => ({currentDateView: moment(prev.currentDateView).subtract(1, 'months').toDate()})); } /** * Handles the user pressing the next month arrow of the calendar picker. */ moveToNextMonth() { - this.setState((prev) => ({ currentDateView: moment(prev.currentDateView).add(1, 'months').toDate() })); + this.setState((prev) => ({currentDateView: moment(prev.currentDateView).add(1, 'months').toDate()})); } render() { @@ -155,14 +132,10 @@ class CalendarPicker extends React.PureComponent { { - const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, ''); - const year = moment(this.state.currentDateView).year(); - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH_SELECT_YEAR.getRoute(year, activeRoute)); - }} + onPress={() => this.setState({isYearPickerVisible: true})} style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentStart]} wrapperStyle={[styles.alignItemsCenter]} hoverDimmingValue={1} @@ -216,7 +189,7 @@ class CalendarPicker extends React.PureComponent { {dayOfWeek[0]} @@ -243,9 +216,9 @@ class CalendarPicker extends React.PureComponent { accessibilityLabel={day ? day.toString() : undefined} focusable={Boolean(day)} accessible={Boolean(day)} - dataSet={{ [CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true }} + dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} > - {({ hovered, pressed }) => ( + {({hovered, pressed}) => ( ))} - {/* this.setState({isYearPickerVisible: false})} - /> */} + /> ); } @@ -276,7 +249,4 @@ class CalendarPicker extends React.PureComponent { CalendarPicker.propTypes = propTypes; CalendarPicker.defaultProps = defaultProps; -export default compose( - withLocalize, - withNavigation, -)(CalendarPicker); +export default withLocalize(CalendarPicker); diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index 966169f725a3..3201388790c9 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -44,7 +44,7 @@ const datePickerDefaultProps = { value: undefined, }; -function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value, selectedYear}) { +function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) { const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined); useEffect(() => { @@ -92,7 +92,6 @@ function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inpu maxDate={maxDate} value={selectedDate} onSelected={setSelectedDate} - selectedYear={selectedYear} /> diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js index 6d9721187173..ef0f599dc982 100644 --- a/src/components/withNavigation.js +++ b/src/components/withNavigation.js @@ -17,7 +17,6 @@ export default function withNavigation(WrappedComponent) { {...props} ref={props.forwardedRef} navigation={navigation} - currentRoute={navigation.getState().routes[navigation.getState().index]} /> ); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 9efc61f339f2..54c7b9b8396e 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -127,7 +127,6 @@ const SettingsModalStackNavigator = createModalStackNavigator({ Settings_PersonalDetails_Initial: () => require('../../../pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage').default, Settings_PersonalDetails_LegalName: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default, Settings_PersonalDetails_DateOfBirth: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default, - Settings_PersonalDetails_DateOfBirth_Select_Year: () => require('../../../components/NewDatePicker/CalendarPicker/YearPickerModal').default, Settings_PersonalDetails_Address: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default, Settings_PersonalDetails_Address_Country: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default, Settings_ContactMethods: () => require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index a37c90373e26..8a68ec9c0d07 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -163,10 +163,6 @@ export default { path: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH, exact: true, }, - Settings_PersonalDetails_DateOfBirth_Select_Year: { - path: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH_SELECT_YEAR.route, - exact: true, - }, Settings_PersonalDetails_Address: { path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS, exact: true, diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 0505420822a3..13489c396c3c 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -2,8 +2,7 @@ import CONST from '../CONST'; import Beta from '../types/onyx/Beta'; function canUseAllBetas(betas: Beta[]): boolean { - // return betas?.includes(CONST.BETAS.ALL); - return true; + return betas?.includes(CONST.BETAS.ALL); } function canUseChronos(betas: Beta[]): boolean { diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js index 2668230fe370..68d81d64c604 100644 --- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js +++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js @@ -1,15 +1,15 @@ import PropTypes from 'prop-types'; -import React, { useCallback, useEffect, useRef } from 'react'; -import { withOnyx } from 'react-native-onyx'; +import React, {useCallback} from 'react'; +import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; -import { subYears } from 'date-fns'; +import {subYears} from 'date-fns'; import CONST from '../../../../CONST'; import ONYXKEYS from '../../../../ONYXKEYS'; import ROUTES from '../../../../ROUTES'; import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; import NewDatePicker from '../../../../components/NewDatePicker'; import ScreenWrapper from '../../../../components/ScreenWrapper'; -import withLocalize, { withLocalizePropTypes } from '../../../../components/withLocalize'; +import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import Navigation from '../../../../libs/Navigation/Navigation'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import * as PersonalDetails from '../../../../libs/actions/PersonalDetails'; @@ -20,14 +20,6 @@ import FullscreenLoadingIndicator from '../../../../components/FullscreenLoading import FormProvider from '../../../../components/Form/FormProvider'; const propTypes = { - /** Route from navigation */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** Currently selected country */ - year: PropTypes.string, - }), - }).isRequired, /* Onyx Props */ /** User's private personal details */ @@ -44,10 +36,9 @@ const defaultProps = { }, }; -function DateOfBirthPage({ translate, privatePersonalDetails, route }) { +function DateOfBirthPage({translate, privatePersonalDetails}) { usePrivatePersonalDetails(); const isLoadingPersonalDetails = lodashGet(privatePersonalDetails, 'isLoading', true); - const yearFromRoute = lodashGet(route, 'params.year') /** * @param {Object} values @@ -68,6 +59,7 @@ function DateOfBirthPage({ translate, privatePersonalDetails, route }) { return errors; }, []); + return ( )} From 83c2f5389608ef32f0ebc36900893dccc31cb6eb Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Wed, 18 Oct 2023 22:52:56 +0530 Subject: [PATCH 3/3] fixe: country not updating when address selected from suggestions --- src/pages/settings/Profile/PersonalDetails/AddressPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index b8d91b4769fc..3a49b6901035 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -154,11 +154,11 @@ function AddressPage({privatePersonalDetails, route}) { }, []); useEffect(() => { - if (!countryFromUrl || countryFromUrl === currentCountry) { + if (!countryFromUrl) { return; } handleAddressChange(countryFromUrl, 'country'); - }, [countryFromUrl, handleAddressChange, currentCountry]); + }, [countryFromUrl, handleAddressChange]); return (