From 2ffd6ca54db6639e00f7286d721f3d85e8abc165 Mon Sep 17 00:00:00 2001 From: Nam Le Date: Mon, 28 Aug 2023 17:12:11 +0700 Subject: [PATCH 1/3] show all selection and clear a search input field --- src/components/CountryPicker/CountrySelectorModal.js | 10 ++++++++-- src/components/CountryPicker/index.js | 10 ++-------- src/components/StatePicker/StateSelectorModal.js | 10 ++++++++-- src/components/StatePicker/index.js | 10 ++-------- src/languages/en.js | 6 ------ src/languages/es.js | 6 ------ src/libs/searchCountryOptions.js | 2 +- .../settings/Profile/PersonalDetails/AddressPage.js | 11 ++--------- 8 files changed, 23 insertions(+), 42 deletions(-) diff --git a/src/components/CountryPicker/CountrySelectorModal.js b/src/components/CountryPicker/CountrySelectorModal.js index 146b023bbf0c..126cea7e842e 100644 --- a/src/components/CountryPicker/CountrySelectorModal.js +++ b/src/components/CountryPicker/CountrySelectorModal.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useMemo} from 'react'; +import React, {useMemo, useEffect} from 'react'; import PropTypes from 'prop-types'; import CONST from '../../CONST'; import useLocalize from '../../hooks/useLocalize'; @@ -40,6 +40,13 @@ const defaultProps = { function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySelected, setSearchValue, searchValue}) { const {translate} = useLocalize(); + useEffect(() => { + if (isVisible) { + return; + } + setSearchValue(''); + }, [isVisible, setSearchValue]); + const countries = useMemo( () => _.map(translate('allCountries'), (countryName, countryISO) => ({ @@ -76,7 +83,6 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele { - setSearchValue(lodashGet(allCountries, value, '')); - }, [value, allCountries]); + const [searchValue, setSearchValue] = useState(''); const showPickerModal = () => { - setSearchValue(lodashGet(allCountries, value, '')); setIsPickerVisible(true); }; diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js index 91ee1b225a1f..c7cbd5be9e31 100644 --- a/src/components/StatePicker/StateSelectorModal.js +++ b/src/components/StatePicker/StateSelectorModal.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useMemo} from 'react'; +import React, {useMemo, useEffect} from 'react'; import PropTypes from 'prop-types'; import CONST from '../../CONST'; import Modal from '../Modal'; @@ -44,6 +44,13 @@ const defaultProps = { function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue, label}) { const {translate} = useLocalize(); + useEffect(() => { + if (isVisible) { + return; + } + setSearchValue(''); + }, [isVisible, setSearchValue]); + const countryStates = useMemo( () => _.map(translate('allStates'), (state) => ({ @@ -81,7 +88,6 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, { - setSearchValue(lodashGet(allStates, `${value}.stateName`, '')); - }, [value, allStates]); + const [searchValue, setSearchValue] = useState(''); const showPickerModal = () => { - setSearchValue(lodashGet(allStates, `${value}.stateName`, '')); setIsPickerVisible(true); }; diff --git a/src/languages/en.js b/src/languages/en.js index e2b9fa37e91e..fcbcb0a796eb 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1628,12 +1628,6 @@ export default { selectSuggestedAddress: 'Please select a suggested address', }, }, - countrySelectorModal: { - placeholderText: 'Search to see options', - }, - stateSelectorModal: { - placeholderText: 'Search to see options', - }, demos: { saastr: { signInWelcome: 'Welcome to SaaStr! Hop in to start networking now.', diff --git a/src/languages/es.js b/src/languages/es.js index 48da21363722..944920b6431d 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -2115,12 +2115,6 @@ export default { selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida', }, }, - countrySelectorModal: { - placeholderText: 'Buscar para ver opciones', - }, - stateSelectorModal: { - placeholderText: 'Buscar para ver opciones', - }, demos: { saastr: { signInWelcome: '¡Bienvenido a SaaStr! Entra y empieza a establecer contactos.', diff --git a/src/libs/searchCountryOptions.js b/src/libs/searchCountryOptions.js index 5aa8a052374e..b0b45fceb6cb 100644 --- a/src/libs/searchCountryOptions.js +++ b/src/libs/searchCountryOptions.js @@ -10,7 +10,7 @@ import StringUtils from './StringUtils'; function searchCountryOptions(searchValue, countriesData) { const trimmedSearchValue = StringUtils.sanitizeString(searchValue); if (_.isEmpty(trimmedSearchValue)) { - return []; + return countriesData; } const filteredData = _.filter(countriesData, (country) => _.includes(country.searchValue, trimmedSearchValue)); diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index dcce76689251..143bc32954d7 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -26,9 +26,6 @@ import FullscreenLoadingIndicator from '../../../../components/FullscreenLoading const propTypes = { /* Onyx Props */ - // The user's country based on IP address - country: PropTypes.string, - /** User's private personal details */ privatePersonalDetails: PropTypes.shape({ /** User's home address */ @@ -43,7 +40,6 @@ const propTypes = { }; const defaultProps = { - country: '', privatePersonalDetails: { address: { street: '', @@ -63,10 +59,10 @@ function updateAddress(values) { PersonalDetails.updateAddress(values.addressLine1.trim(), values.addressLine2.trim(), values.city.trim(), values.state.trim(), values.zipPostCode.trim().toUpperCase(), values.country); } -function AddressPage({privatePersonalDetails, country}) { +function AddressPage({privatePersonalDetails}) { usePrivatePersonalDetails(); const {translate} = useLocalize(); - const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')) || country || CONST.COUNTRY.US); + const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country'))); const isUSAForm = currentCountry === CONST.COUNTRY.US; const zipSampleFormat = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, [currentCountry, 'samples'], ''); const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat}); @@ -237,9 +233,6 @@ AddressPage.propTypes = propTypes; AddressPage.defaultProps = defaultProps; export default withOnyx({ - country: { - key: ONYXKEYS.COUNTRY, - }, privatePersonalDetails: { key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, }, From ce9145f86135210493ac766736ae6c9a419d0831 Mon Sep 17 00:00:00 2001 From: Nam Le Date: Mon, 28 Aug 2023 20:09:01 +0700 Subject: [PATCH 2/3] fix search number --- src/libs/searchCountryOptions.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/libs/searchCountryOptions.js b/src/libs/searchCountryOptions.js index b0b45fceb6cb..9b0357a17a65 100644 --- a/src/libs/searchCountryOptions.js +++ b/src/libs/searchCountryOptions.js @@ -8,9 +8,13 @@ import StringUtils from './StringUtils'; * @returns {Object[]} An array of countries/states sorted based on the search query */ function searchCountryOptions(searchValue, countriesData) { + if (_.isEmpty(searchValue)) { + return countriesData; + } + const trimmedSearchValue = StringUtils.sanitizeString(searchValue); if (_.isEmpty(trimmedSearchValue)) { - return countriesData; + return []; } const filteredData = _.filter(countriesData, (country) => _.includes(country.searchValue, trimmedSearchValue)); From 4b659208cf9f1aef490aaf548820438e7342560b Mon Sep 17 00:00:00 2001 From: Nam Le Date: Mon, 28 Aug 2023 22:10:25 +0700 Subject: [PATCH 3/3] clear default when open timezone selector --- src/pages/settings/Profile/TimezoneSelectPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js index d0a50acdeb17..5066b581fbd8 100644 --- a/src/pages/settings/Profile/TimezoneSelectPage.js +++ b/src/pages/settings/Profile/TimezoneSelectPage.js @@ -46,7 +46,7 @@ function TimezoneSelectPage(props) { })) .value(), ); - const [timezoneInputText, setTimezoneInputText] = useState(timezone.selected); + const [timezoneInputText, setTimezoneInputText] = useState(''); const [timezoneOptions, setTimezoneOptions] = useState(allTimezones.current); /**