Skip to content

Commit

Permalink
Revert "implemented a year picker route screen v1"
Browse files Browse the repository at this point in the history 
This reverts commit 7be2a59.
  • Loading branch information
@ishpaul777
ishpaul777 committed Oct 18, 2023
1 parent 7be2a59 commit 503df1e
Show file tree
Hide file tree
Showing 9 changed files with 76 additions and 168 deletions.
10 changes: 0 additions & 10 deletions src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
143 changes: 54 additions & 89 deletions src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) {
Expand All @@ -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 (
<ScreenWrapper
style={[styles.pb0]}
includePaddingTop={false}
includeSafeAreaPaddingBottom={false}
testID={YearPickerModal.displayName}
<Modal
type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
isVisible={props.isVisible}
onClose={props.onClose}
onModalHide={props.onClose}
hideModalContentWhileAnimating
useNativeDriver
>
<HeaderWithBackButton
title={translate('yearPickerPage.year')}
onBackButtonPress={() => {
const backTo = lodashGet(route, 'params.backTo', '');
const backToRoute = backTo ? `${backTo}?year=${currentYear}` : '';
Navigation.goBack(backToRoute);
}}
/>
<SelectionList
shouldDelayFocus
textInputLabel={translate('yearPickerPage.selectYear')}
textInputValue={searchText}
textInputMaxLength={4}
onChangeText={(text) => setSearchText(text.replace(CONST.REGEX.NON_NUMERIC, '').trim())}
keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
headerMessage={headerMessage}
sections={sections}
onSelectRow={selectYear}
initiallyFocusedOptionKey={currentYear.toString()}
showScrollIndicator
/>
</ScreenWrapper>
<ScreenWrapper
style={[styles.pb0]}
includePaddingTop={false}
includeSafeAreaPaddingBottom={false}
testID={YearPickerModal.displayName}
>
<HeaderWithBackButton
title={translate('yearPickerPage.year')}
onBackButtonPress={props.onClose}
/>
<SelectionList
shouldDelayFocus
textInputLabel={translate('yearPickerPage.selectYear')}
textInputValue={searchText}
textInputMaxLength={4}
onChangeText={(text) => 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
/>
</ScreenWrapper>
</Modal>
);
}

YearPickerModal.propTypes = propTypes;
YearPickerModal.defaultProps = defaultProps;
YearPickerModal.displayName = 'YearPickerModal';

export default YearPickerModal;
58 changes: 14 additions & 44 deletions src/components/NewDatePicker/CalendarPicker/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 */
Expand All @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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.
Expand All @@ -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() {
Expand All @@ -155,14 +132,10 @@ class CalendarPicker extends React.PureComponent {
<View>
<View
style={[styles.calendarHeader, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ph4, styles.pr1]}
dataSet={{ [CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true }}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
>
<PressableWithFeedback
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));
}}
onPress={() => this.setState({isYearPickerVisible: true})}
style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentStart]}
wrapperStyle={[styles.alignItemsCenter]}
hoverDimmingValue={1}
Expand Down Expand Up @@ -216,7 +189,7 @@ class CalendarPicker extends React.PureComponent {
<View
key={dayOfWeek}
style={[styles.calendarDayRoot, styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}
dataSet={{ [CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true }}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
>
<Text style={styles.sidebarLinkTextBold}>{dayOfWeek[0]}</Text>
</View>
Expand All @@ -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}) => (
<View
style={[
styles.calendarDayContainer,
Expand All @@ -261,13 +234,13 @@ class CalendarPicker extends React.PureComponent {
})}
</View>
))}
{/* <YearPickerModal
<YearPickerModal
isVisible={this.state.isYearPickerVisible}
years={this.state.years}
currentYear={currentYearView}
onYearChange={this.onYearSelected}
onClose={() => this.setState({isYearPickerVisible: false})}
/> */}
/>
</View>
);
}
Expand All @@ -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);
3 changes: 1 addition & 2 deletions src/components/NewDatePicker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -92,7 +92,6 @@ function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inpu
maxDate={maxDate}
value={selectedDate}
onSelected={setSelectedDate}
selectedYear={selectedYear}
/>
</View>
</View>
Expand Down
1 change: 0 additions & 1 deletion src/components/withNavigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default function withNavigation(WrappedComponent) {
{...props}
ref={props.forwardedRef}
navigation={navigation}
currentRoute={navigation.getState().routes[navigation.getState().index]}
/>
);
}
Expand Down
1 change: 0 additions & 1 deletion src/libs/Navigation/AppNavigator/ModalStackNavigators.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 0 additions & 4 deletions src/libs/Navigation/linkingConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 503df1e

Please sign in to comment.