TypeScript

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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;

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<IEmailSent> = ({ 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<Array<string>>([]);
 
   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;

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);