From 6aa69f57b8ace3252b644f67699ed35ce73388d0 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 7 Apr 2022 13:39:22 -0400
Subject: [PATCH] Convert Registration component to TSX

---
 app/soapbox/components/ui/input/input.tsx          |  4 ++--
 .../{registration.js => registration.tsx}          | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)
 rename app/soapbox/features/verification/{registration.js => registration.tsx} (87%)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 343a9d0dd..4b81ed440 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -11,7 +11,7 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'type'> {
   autoFocus?: boolean,
   defaultValue?: string,
   className?: string,
@@ -19,7 +19,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
   name?: string,
   placeholder?: string,
   value?: string,
-  onChange?: () => void,
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
   type: 'text' | 'email' | 'tel' | 'password'
 }
 
diff --git a/app/soapbox/features/verification/registration.js b/app/soapbox/features/verification/registration.tsx
similarity index 87%
rename from app/soapbox/features/verification/registration.js
rename to app/soapbox/features/verification/registration.tsx
index b00be7ad0..9d87ae410 100644
--- a/app/soapbox/features/verification/registration.js
+++ b/app/soapbox/features/verification/registration.tsx
@@ -1,6 +1,7 @@
+import { AxiosError } from 'axios';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
@@ -8,6 +9,7 @@ import { fetchInstance } from 'soapbox/actions/instance';
 import snackbar from 'soapbox/actions/snackbar';
 import { createAccount } from 'soapbox/actions/verification';
 import { removeStoredVerification } from 'soapbox/actions/verification';
+import { useAppSelector } from 'soapbox/hooks';
 
 import { Button, Form, FormGroup, Input } from '../../components/ui';
 
@@ -20,11 +22,11 @@ const Registration = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const isLoading = useSelector((state) => state.verification.get('isLoading'));
-  const siteTitle = useSelector((state) => state.instance.title);
+  const isLoading = useAppSelector((state) => state.verification.get('isLoading') as boolean);
+  const siteTitle = useAppSelector((state) => state.instance.title);
 
   const [state, setState] = React.useState(initialState);
-  const [shouldRedirect, setShouldRedirect] = React.useState(false);
+  const [shouldRedirect, setShouldRedirect] = React.useState<boolean>(false);
   const { username, password } = state;
 
   const handleSubmit = React.useCallback((event) => {
@@ -33,7 +35,7 @@ const Registration = () => {
     // TODO: handle validation errors from Pepe
     dispatch(createAccount(username, password))
       .then(() => dispatch(logIn(intl, username, password)))
-      .then(({ access_token }) => dispatch(verifyCredentials(access_token)))
+      .then(({ access_token }: any) => dispatch(verifyCredentials(access_token)))
       .then(() => dispatch(fetchInstance()))
       .then(() => {
         setShouldRedirect(true);
@@ -47,7 +49,7 @@ const Registration = () => {
           ),
         );
       })
-      .catch((error) => {
+      .catch((error: AxiosError) => {
         if (error?.response?.status === 422) {
           dispatch(
             snackbar.error(