Simplify PhoneInput to only care about its own internal state

update-emoji-mart^2
Alex Gleason 2022-07-13 17:37:40 -05:00
rodzic 0ed1c3ca83
commit f62dcc6650
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
7 zmienionych plików z 59 dodań i 34 usunięć

Wyświetl plik

@ -1,6 +1,7 @@
import React from 'react';
import { parsePhoneNumber } from 'libphonenumber-js';
import React, { useState, useEffect } from 'react';
import { CountryCode, formatPhoneNumber } from 'soapbox/utils/phone';
import { CountryCode } from 'soapbox/utils/phone';
import HStack from '../hstack/hstack';
import Input from '../input/input';
@ -8,31 +9,49 @@ import Input from '../input/input';
import CountryCodeDropdown from './country-code-dropdown';
interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required' | 'autoFocus'> {
/** Input phone number. */
/** E164 phone number. */
value?: string,
/** E164 country code. */
countryCode?: CountryCode,
/** Change event handler taking the formatted input. */
onChange?: (phone: string) => void,
/** Change handler which receives the E164 phone string. */
onChange?: (phone: string | undefined) => void,
/** Country code that's selected on mount. */
defaultCountryCode?: CountryCode,
}
/** Internationalized phone input with country code picker. */
const PhoneInput: React.FC<IPhoneInput> = (props) => {
const { countryCode = 1, value = '', onChange, ...rest } = props;
const { value, onChange, defaultCountryCode = '1', ...rest } = props;
const [countryCode, setCountryCode] = useState<CountryCode>(defaultCountryCode);
const [nationalNumber, setNationalNumber] = useState<string>('');
const handleCountryChange = (code: CountryCode) => {
if (onChange) {
onChange(formatPhoneNumber(countryCode, value));
}
setCountryCode(code);
};
/** Pass the formatted phone to the handler. */
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
if (onChange) {
onChange(formatPhoneNumber(countryCode, target.value));
}
setNationalNumber(target.value);
};
// When the internal state changes, update the external state.
useEffect(() => {
if (onChange) {
try {
const opts = { defaultCallingCode: countryCode, extract: false } as any;
const result = parsePhoneNumber(nationalNumber, opts);
if (!result.isPossible()) {
throw result;
}
onChange(result.format('E.164'));
} catch (e) {
// The value returned is always a valid E164 string.
// If it's not valid, it'll return undefined.
onChange(undefined);
}
}
}, [countryCode, nationalNumber]);
return (
<HStack alignItems='center'>
<CountryCodeDropdown
@ -43,7 +62,7 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
<Input
type='text'
onChange={handleChange}
value={value}
value={nationalNumber}
{...rest}
/>
</HStack>

Wyświetl plik

@ -31,13 +31,13 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
const isLoading = useAppSelector((state) => state.verification.isLoading);
const [status, setStatus] = useState<Statuses>(Statuses.IDLE);
const [phone, setPhone] = useState<string>('');
const [phone, setPhone] = useState<string>();
const [verificationCode, setVerificationCode] = useState('');
const [requestedAnother, setAlreadyRequestedAnother] = useState(false);
const isValid = validPhoneNumberRegex.test(phone);
const isValid = phone ? validPhoneNumberRegex.test(phone) : false;
const onChange = useCallback((phone: string) => {
const onChange = useCallback((phone?: string) => {
setPhone(phone);
}, []);
@ -57,7 +57,7 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
return;
}
dispatch(reRequestPhoneVerification(phone)).then(() => {
dispatch(reRequestPhoneVerification(phone!)).then(() => {
dispatch(
snackbar.success(
intl.formatMessage({

Wyświetl plik

@ -22,14 +22,14 @@ const SmsVerification = () => {
const isLoading = useAppSelector((state) => state.verification.isLoading) as boolean;
const [phone, setPhone] = React.useState('');
const [phone, setPhone] = React.useState<string>();
const [status, setStatus] = React.useState(Statuses.IDLE);
const [verificationCode, setVerificationCode] = React.useState('');
const [requestedAnother, setAlreadyRequestedAnother] = React.useState(false);
const isValid = validPhoneNumberRegex.test(phone);
const isValid = phone ? validPhoneNumberRegex.test(phone) : false;
const onChange = React.useCallback((phone: string) => {
const onChange = React.useCallback((phone?: string) => {
setPhone(phone);
}, []);
@ -49,7 +49,7 @@ const SmsVerification = () => {
return;
}
dispatch(requestPhoneVerification(phone)).then(() => {
dispatch(requestPhoneVerification(phone!)).then(() => {
dispatch(
snackbar.success(
intl.formatMessage({

Wyświetl plik

@ -3,27 +3,27 @@ import { formatPhoneNumber } from '../phone';
describe('Phone unit tests', () => {
it('Properly formats', () => {
let number = '';
expect(formatPhoneNumber(1, number)).toEqual('');
expect(formatPhoneNumber('1', number)).toEqual('');
number = '5';
expect(formatPhoneNumber(1, number)).toEqual('+1 (5');
expect(formatPhoneNumber('1', number)).toEqual('+1 (5');
number = '55';
expect(formatPhoneNumber(1, number)).toEqual('+1 (55');
expect(formatPhoneNumber('1', number)).toEqual('+1 (55');
number = '555';
expect(formatPhoneNumber(1, number)).toEqual('+1 (555');
expect(formatPhoneNumber('1', number)).toEqual('+1 (555');
number = '55513';
expect(formatPhoneNumber(1, number)).toEqual('+1 (555) 13');
expect(formatPhoneNumber('1', number)).toEqual('+1 (555) 13');
number = '555135';
expect(formatPhoneNumber(1, number)).toEqual('+1 (555) 135');
expect(formatPhoneNumber('1', number)).toEqual('+1 (555) 135');
number = '5551350';
expect(formatPhoneNumber(1, number)).toEqual('+1 (555) 135-0');
expect(formatPhoneNumber('1', number)).toEqual('+1 (555) 135-0');
number = '5551350123';
expect(formatPhoneNumber(1, number)).toEqual('+1 (555) 135-0123');
expect(formatPhoneNumber('1', number)).toEqual('+1 (555) 135-0123');
});
});

Wyświetl plik

@ -1,7 +1,7 @@
/** List of supported E164 country codes. */
const COUNTRY_CODES = [
1,
44,
'1',
'44',
] as const;
/** Supported E164 country code. */

Wyświetl plik

@ -133,6 +133,7 @@
"intl-pluralrules": "^1.3.1",
"is-nan": "^1.2.1",
"jsdoc": "~3.6.7",
"libphonenumber-js": "^1.10.8",
"line-awesome": "^1.3.0",
"localforage": "^1.10.0",
"lodash": "^4.7.11",

Wyświetl plik

@ -7756,6 +7756,11 @@ li@^1.3.0:
resolved "https://registry.yarnpkg.com/li/-/li-1.3.0.tgz#22c59bcaefaa9a8ef359cf759784e4bf106aea1b"
integrity sha512-z34TU6GlMram52Tss5mt1m//ifRIpKH5Dqm7yUVOdHI+BQCs9qGPHFaCUTIzsWX7edN30aa2WrPwR7IO10FHaw==
libphonenumber-js@^1.10.8:
version "1.10.8"
resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.8.tgz#21925db0f16d4f1553dff2bbc62afdaeb03f21f0"
integrity sha512-MGgHrKRGE7sg7y0DikHybRDgTXcYv4HL+WwhDm5UAiChCNb5tcy5OEaU8XTTt5bDBwhZGCJNxoGMVBpZ4RfhIg==
lie@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"