Convert all of the login components into hook based ones

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,111 +1,96 @@
-import * as React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import login from '@/api/auth/login';
 import { httpErrorToHuman } from '@/api/http';
-import NetworkErrorMessage from '@/components/NetworkErrorMessage';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationState } from '@/state/types';
+import useRouter from 'use-react-router';
 
-type State = Readonly<{
-    errorMessage?: string;
-    isLoading: boolean;
-    username?: string;
-    password?: string;
-}>;
+export default () => {
+    const [ username, setUsername ] = useState('');
+    const [ password, setPassword ] = useState('');
+    const [ isLoading, setLoading ] = useState(false);
+    const { history } = useRouter();
 
-export default class LoginContainer extends React.PureComponent<RouteComponentProps, State> {
-    state: State = {
-        isLoading: false,
-    };
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
 
-    submit = (e: React.FormEvent<HTMLFormElement>) => {
+    const submit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
-        const { username, password } = this.state;
+        setLoading(true);
+        clearFlashes();
 
-        this.setState({ isLoading: true }, () => {
-            login(username!, password!)
-                .then(response => {
-                    if (response.complete) {
-                        // @ts-ignore
-                        window.location = response.intended || '/';
-                        return;
-                    }
+        login(username!, password!)
+            .then(response => {
+                if (response.complete) {
+                    // @ts-ignore
+                    window.location = response.intended || '/';
+                    return;
+                }
 
-                    this.props.history.replace('/login/checkpoint', {
-                        token: response.confirmationToken,
-                    });
-                })
-                .catch(error => this.setState({
-                    isLoading: false,
-                    errorMessage: httpErrorToHuman(error),
-                }, () => console.error(error)));
-        });
+                history.replace('/login/checkpoint', { token: response.confirmationToken });
+            })
+            .catch(error => {
+                console.error(error);
+
+                setLoading(false);
+                addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
+            });
     };
 
-    canSubmit () {
-        if (!this.state.username || !this.state.password) {
-            return false;
-        }
+    const canSubmit = () => username && password && username.length > 0 && password.length > 0;
 
-        return this.state.username.length > 0 && this.state.password.length > 0;
-    }
-
-    // @ts-ignore
-    handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
-        [e.target.id]: e.target.value,
-    });
-
-    render () {
-        return (
-            <React.Fragment>
-                <h2 className={'text-center text-neutral-100 font-medium py-4'}>
-                    Login to Continue
-                </h2>
-                <NetworkErrorMessage message={this.state.errorMessage}/>
-                <LoginFormContainer onSubmit={this.submit}>
-                    <label htmlFor={'username'}>Username or Email</label>
+    return (
+        <React.Fragment>
+            <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+                Login to Continue
+            </h2>
+            <FlashMessageRender/>
+            <LoginFormContainer onSubmit={submit}>
+                <label htmlFor={'username'}>Username or Email</label>
+                <input
+                    id={'username'}
+                    autoFocus={true}
+                    required={true}
+                    className={'input'}
+                    onChange={e => setUsername(e.target.value)}
+                    disabled={isLoading}
+                />
+                <div className={'mt-6'}>
+                    <label htmlFor={'password'}>Password</label>
                     <input
-                        id={'username'}
-                        autoFocus={true}
+                        id={'password'}
                         required={true}
+                        type={'password'}
                         className={'input'}
-                        onChange={this.handleFieldUpdate}
-                        disabled={this.state.isLoading}
+                        onChange={e => setPassword(e.target.value)}
+                        disabled={isLoading}
                     />
-                    <div className={'mt-6'}>
-                        <label htmlFor={'password'}>Password</label>
-                        <input
-                            id={'password'}
-                            required={true}
-                            type={'password'}
-                            className={'input'}
-                            onChange={this.handleFieldUpdate}
-                            disabled={this.state.isLoading}
-                        />
-                    </div>
-                    <div className={'mt-6'}>
-                        <button
-                            type={'submit'}
-                            className={'btn btn-primary btn-jumbo'}
-                            disabled={this.state.isLoading || !this.canSubmit()}
-                        >
-                            {this.state.isLoading ?
-                                <span className={'spinner white'}>&nbsp;</span>
-                                :
-                                'Login'
-                            }
-                        </button>
-                    </div>
-                    <div className={'mt-6 text-center'}>
-                        <Link
-                            to={'/password'}
-                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
-                        >
-                            Forgot password?
-                        </Link>
-                    </div>
-                </LoginFormContainer>
-            </React.Fragment>
-        );
-    }
-}
+                </div>
+                <div className={'mt-6'}>
+                    <button
+                        type={'submit'}
+                        className={'btn btn-primary btn-jumbo'}
+                        disabled={isLoading || !canSubmit()}
+                    >
+                        {isLoading ?
+                            <span className={'spinner white'}>&nbsp;</span>
+                            :
+                            'Login'
+                        }
+                    </button>
+                </div>
+                <div className={'mt-6 text-center'}>
+                    <Link
+                        to={'/password'}
+                        className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                    >
+                        Forgot password?
+                    </Link>
+                </div>
+            </LoginFormContainer>
+        </React.Fragment>
+    );
+};