diff --git a/app/soapbox/features/verification/steps/age-verification.js b/app/soapbox/features/verification/steps/age-verification.tsx similarity index 77% rename from app/soapbox/features/verification/steps/age-verification.js rename to app/soapbox/features/verification/steps/age-verification.tsx index 71b33772d..67559a6bb 100644 --- a/app/soapbox/features/verification/steps/age-verification.js +++ b/app/soapbox/features/verification/steps/age-verification.tsx @@ -1,11 +1,10 @@ -import PropTypes from 'prop-types'; -import * as React from 'react'; +import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { useDispatch, useSelector } from 'react-redux'; import snackbar from 'soapbox/actions/snackbar'; import { verifyAge } from 'soapbox/actions/verification'; import { Button, Datepicker, Form, Text } from 'soapbox/components/ui'; +import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; const messages = defineMessages({ fail: { @@ -14,7 +13,7 @@ const messages = defineMessages({ }, }); -function meetsAgeMinimum(birthday, ageMinimum) { +function meetsAgeMinimum(birthday: Date, ageMinimum: number) { const month = birthday.getUTCMonth(); const day = birthday.getUTCDate(); const year = birthday.getUTCFullYear(); @@ -24,11 +23,11 @@ function meetsAgeMinimum(birthday, ageMinimum) { const AgeVerification = () => { const intl = useIntl(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); - const isLoading = useSelector((state) => state.verification.get('isLoading')); - const ageMinimum = useSelector((state) => state.verification.get('ageMinimum')); - const siteTitle = useSelector((state) => state.instance.get('title')); + const isLoading = useAppSelector((state) => state.verification.get('isLoading')) as boolean; + const ageMinimum = useAppSelector((state) => state.verification.get('ageMinimum')) as any; + const siteTitle = useAppSelector((state) => state.instance.title); const [date, setDate] = React.useState(''); const isValid = typeof date === 'object'; @@ -44,9 +43,7 @@ const AgeVerification = () => { dispatch(verifyAge(birthday)); } else { dispatch( - snackbar.error(intl.formatMessage(messages.fail, { - ageMinimum, - })), + snackbar.error(intl.formatMessage(messages.fail, { ageMinimum })), ); } }, [date, ageMinimum]); @@ -78,8 +75,4 @@ const AgeVerification = () => { ); }; -AgeVerification.propTypes = { - verifyAge: PropTypes.func, -}; - export default AgeVerification; diff --git a/app/soapbox/features/verification/steps/email-verification.js b/app/soapbox/features/verification/steps/email-verification.tsx similarity index 84% rename from app/soapbox/features/verification/steps/email-verification.js rename to app/soapbox/features/verification/steps/email-verification.tsx index 05e463db3..c68d78208 100644 --- a/app/soapbox/features/verification/steps/email-verification.js +++ b/app/soapbox/features/verification/steps/email-verification.tsx @@ -1,12 +1,12 @@ -import PropTypes from 'prop-types'; -import * as React from 'react'; +import { AxiosError } from 'axios'; +import React from 'react'; import { useIntl } from 'react-intl'; -import { useDispatch, useSelector } from 'react-redux'; import snackbar from 'soapbox/actions/snackbar'; import { checkEmailVerification, postEmailVerification, requestEmailVerification } from 'soapbox/actions/verification'; import Icon from 'soapbox/components/icon'; import { Button, Form, FormGroup, Input, Text } from 'soapbox/components/ui'; +import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; const Statuses = { IDLE: 'IDLE', @@ -16,8 +16,12 @@ const Statuses = { const EMAIL_REGEX = /^[^@\s]+@[^@\s]+$/; -const EmailSent = ({ handleSubmit }) => { - const dispatch = useDispatch(); +interface IEmailSent { + handleSubmit: React.FormEventHandler, +} + +const EmailSent: React.FC = ({ handleSubmit }) => { + const dispatch = useAppDispatch(); const checkEmailConfirmation = () => { dispatch(checkEmailVerification()) @@ -47,19 +51,19 @@ const EmailSent = ({ handleSubmit }) => { const EmailVerification = () => { const intl = useIntl(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); - const isLoading = useSelector((state) => state.verification.get('isLoading')); + const isLoading = useAppSelector((state) => state.verification.get('isLoading')) as boolean; const [email, setEmail] = React.useState(''); const [status, setStatus] = React.useState(Statuses.IDLE); - const [errors, setErrors] = React.useState([]); + const [errors, setErrors] = React.useState>([]); const isValid = email.length > 0 && EMAIL_REGEX.test(email); const onChange = React.useCallback((event) => setEmail(event.target.value), []); - const handleSubmit = React.useCallback((event) => { + const handleSubmit: React.FormEventHandler = React.useCallback((event) => { event.preventDefault(); setErrors([]); @@ -80,8 +84,8 @@ const EmailVerification = () => { ), ); }) - .catch(error => { - const isEmailTaken = error.response?.data?.error === 'email_taken'; + .catch((error: AxiosError) => { + const isEmailTaken = (error.response?.data as any)?.error === 'email_taken'; const message = isEmailTaken ? ( intl.formatMessage({ id: 'email_verification.exists', defaultMessage: 'This email has already been taken.' }) @@ -130,8 +134,4 @@ const EmailVerification = () => { ); }; -EmailSent.propTypes = { - handleSubmit: PropTypes.func.isRequired, -}; - export default EmailVerification; diff --git a/app/soapbox/features/verification/steps/sms-verification.js b/app/soapbox/features/verification/steps/sms-verification.tsx similarity index 95% rename from app/soapbox/features/verification/steps/sms-verification.js rename to app/soapbox/features/verification/steps/sms-verification.tsx index aa5e3f3ea..6e26050dd 100644 --- a/app/soapbox/features/verification/steps/sms-verification.js +++ b/app/soapbox/features/verification/steps/sms-verification.tsx @@ -1,11 +1,11 @@ -import * as React from 'react'; +import React from 'react'; import { useIntl } from 'react-intl'; import OtpInput from 'react-otp-input'; -import { useDispatch, useSelector } from 'react-redux'; import snackbar from 'soapbox/actions/snackbar'; import { confirmPhoneVerification, requestPhoneVerification } from 'soapbox/actions/verification'; import { Button, Form, FormGroup, Input, Text } from 'soapbox/components/ui'; +import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { formatPhoneNumber } from 'soapbox/utils/phone'; const Statuses = { @@ -18,9 +18,9 @@ const validPhoneNumberRegex = /^\+1\s\(\d{3}\)\s\d{3}-\d{4}/; const SmsVerification = () => { const intl = useIntl(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); - const isLoading = useSelector((state) => state.verification.get('isLoading')); + const isLoading = useAppSelector((state) => state.verification.get('isLoading')) as boolean; const [phone, setPhone] = React.useState(''); const [status, setStatus] = React.useState(Statuses.IDLE);