Convert all of the login components into hook based ones

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,112 +1,91 @@
-import * as React from 'react';
-import { RouteComponentProps, StaticContext } from 'react-router';
-import { connect } from 'react-redux';
-import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
-import NetworkErrorMessage from '@/components/NetworkErrorMessage';
-import MessageBox from '@/components/MessageBox';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationState } from '@/state/types';
+import useRouter from 'use-react-router';
+import { StaticContext } from 'react-router';
+import FlashMessageRender from '@/components/FlashMessageRender';
 
-type State = Readonly<{
-    isLoading: boolean;
-    errorMessage?: string;
-    code: string;
-}>;
+export default () => {
+    const [ code, setCode ] = useState('');
+    const [ isLoading, setIsLoading ] = useState(false);
 
-class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps<{}, StaticContext, { token: string }>, State> {
-    state: State = {
-        code: '',
-        isLoading: false,
-    };
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { history, location: { state } } = useRouter<{}, StaticContext, { token?: string }>();
 
-    componentDidMount () {
-        const { state } = this.props.location;
-        if (!state || !state.token) {
-            this.props.history.replace('/login');
-        }
+    if (!state || !state.token) {
+        return history.replace('/login');
     }
 
-    onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.value.length > 6) {
-            e.target.value = e.target.value.substring(0, 6);
-            return e.preventDefault();
+    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.value.length <= 6) {
+            setCode(e.target.value);
         }
-
-        this.setState({ code: e.target.value });
     };
 
-    submit = (e: React.FormEvent<HTMLFormElement>) => {
+    const submit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
-        this.setState({ isLoading: true }, () => {
-            loginCheckpoint(this.props.location.state.token, this.state.code)
-                .then(response => {
-                    if (response.complete) {
-                        // @ts-ignore
-                        window.location = response.intended || '/';
-                    }
-                })
-                .catch(error => {
-                    console.error(error);
-                    this.setState({ errorMessage: httpErrorToHuman(error), isLoading: false });
-                });
-        });
+        setIsLoading(true);
+        clearFlashes();
+
+        loginCheckpoint(state.token!, code)
+            .then(response => {
+                if (response.complete) {
+                    // @ts-ignore
+                    window.location = response.intended || '/';
+                }
+            })
+            .catch(error => {
+                console.error(error);
+                addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
+                setIsLoading(false);
+            });
     };
 
-    render () {
-        return (
-            <React.Fragment>
-                <h2 className={'text-center text-neutral-100 font-medium py-4'}>
-                    Device Checkpoint
-                </h2>
-                <NetworkErrorMessage message={this.state.errorMessage}/>
-                <LoginFormContainer onSubmit={this.submit}>
-                    <MessageBox type={'warning'}>
-                        This account is protected with two-factor authentication. A valid authentication token must
-                        be provided in order to continue.
-                    </MessageBox>
-                    <div className={'mt-6'}>
-                        <label htmlFor={'authentication_code'}>Authentication Code</label>
-                        <input
-                            id={'authentication_code'}
-                            type={'number'}
-                            autoFocus={true}
-                            className={'input'}
-                            onChange={this.onChangeHandler}
-                        />
-                    </div>
-                    <div className={'mt-6'}>
-                        <button
-                            type={'submit'}
-                            className={'btn btn-primary btn-jumbo'}
-                            disabled={this.state.isLoading || this.state.code.length !== 6}
-                        >
-                            {this.state.isLoading ?
-                                <span className={'spinner white'}>&nbsp;</span>
-                                :
-                                'Continue'
-                            }
-                        </button>
-                    </div>
-                    <div className={'mt-6 text-center'}>
-                        <Link
-                            to={'/login'}
-                            className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
-                        >
-                            Return to Login
-                        </Link>
-                    </div>
-                </LoginFormContainer>
-            </React.Fragment>
-        );
-    }
-}
-
-const mapDispatchToProps = {
-    pushFlashMessage,
-    clearAllFlashMessages,
+    return (
+        <React.Fragment>
+            <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+                Device Checkpoint
+            </h2>
+            <FlashMessageRender/>
+            <LoginFormContainer onSubmit={submit}>
+                <div className={'mt-6'}>
+                    <label htmlFor={'authentication_code'}>Authentication Code</label>
+                    <input
+                        id={'authentication_code'}
+                        type={'number'}
+                        autoFocus={true}
+                        className={'input'}
+                        value={code}
+                        onChange={onChangeHandler}
+                    />
+                </div>
+                <div className={'mt-6'}>
+                    <button
+                        type={'submit'}
+                        className={'btn btn-primary btn-jumbo'}
+                        disabled={isLoading || code.length !== 6}
+                    >
+                        {isLoading ?
+                            <span className={'spinner white'}>&nbsp;</span>
+                            :
+                            'Continue'
+                        }
+                    </button>
+                </div>
+                <div className={'mt-6 text-center'}>
+                    <Link
+                        to={'/login'}
+                        className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                    >
+                        Return to Login
+                    </Link>
+                </div>
+            </LoginFormContainer>
+        </React.Fragment>
+    );
 };
-
-export default connect(null, mapDispatchToProps)(LoginCheckpointContainer);