login redirect with functional component

class componennts don't work O__O

vocodes/src/App.tsx

@@ -3,7 +3,7 @@ import './App.scss';
 
 import React from 'react';
 import { ApiConfig } from './v1/api/ApiConfig';
-import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
+import { BrowserRouter, Route, Link, Switch, useHistory } from "react-router-dom";
 import { MigrationTopNav } from './migration/MigrationTopNav';
 import { NewVocodesContainer } from './v2/NewVocodesContainer';
 import { OldVocodesContainer } from './v1/OldVocodesContainer';

vocodes/src/v2/NewVocodesContainer.tsx

@@ -10,6 +10,7 @@ import { ProfileComponent } from './profile/ProfileComponent';
 import { TtsModelListComponent } from './tts_model/TtsModelListComponent';
 import { W2lTemplateListComponent } from './w2l_template_list/W2lTemplateListComponent';
 import { ProfileDataComponent } from './profile_data/ProfileDataComponent';
+import { LoginFunctionalComponent } from './login/LoginFunctionalComponent';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -50,7 +51,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/login">
-              <LoginComponent 
+              <LoginFunctionalComponent
                 sessionWrapper={this.props.sessionWrapper}
                 querySessionAction={this.props.querySessionAction}
               />

vocodes/src/v2/login/LoginComponent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ApiConfig } from '../../v1/api/ApiConfig';
-import { Mode } from '../../AppMode';
+import { useHistory, withRouter } from "react-router-dom";
+import { History } from 'history'
 import { SessionWrapper } from '../../session/SessionWrapper';
 
 enum FieldTriState {
@@ -12,6 +13,7 @@ enum FieldTriState {
 interface Props {
   sessionWrapper: SessionWrapper,
   querySessionAction: () => void,
+  history: History
 }
 
 interface State {
@@ -39,6 +41,15 @@ class LoginComponent extends React.Component<Props, State> {
     };
   }
 
+  // react-router with stateful components
+  // https://stackoverflow.com/a/60335152
+  routingFunction = (param: any) => {
+    this.props.history.push({
+        pathname: `/target-path`,
+        state: param
+    });
+  }
+
   handleUsernameOrEmailChange = (ev: React.FormEvent<HTMLInputElement>) => {
     ev.preventDefault();
 
@@ -89,6 +100,13 @@ class LoginComponent extends React.Component<Props, State> {
       if (res.success) {
         console.log('querying new session');
         this.props.querySessionAction();
+
+        console.log('..... go home')
+        //const history = useHistory();
+        //history.push("/");
+        //history.push("/");
+
+        this.routingFunction(undefined);
       }
     })
     .catch(e => {

vocodes/src/v2/login/LoginFunctionalComponent.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { SessionWrapper } from '../../session/SessionWrapper';
+import { useHistory, withRouter } from "react-router-dom";
+import { ApiConfig } from '../../v1/api/ApiConfig';
+
+enum FieldTriState {
+  EMPTY_FALSE,
+  FALSE,
+  TRUE,
+}
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+  querySessionAction: () => void,
+}
+
+function LoginFunctionalComponent(props: Props) {
+  let history = useHistory();
+
+  const [password, setPassword] = useState('')
+  const [usernameOrEmail, setUsernameOrEmail] = useState('')
+  const [usernameOrEmailValid, setUsernameOrEmailValid] = useState(FieldTriState.EMPTY_FALSE)
+  const [usernameOrEmailInvalidReason, setUsernameOrEmailInvalidReason] = useState('')
+
+  if (props.sessionWrapper.isLoggedIn()) {
+    history.push('/');
+  }
+
+  const handleUsernameOrEmailChange = (ev: React.FormEvent<HTMLInputElement>) => {
+    ev.preventDefault();
+    const usernameOrEmailValue  = (ev.target as HTMLInputElement).value;
+    setUsernameOrEmail(usernameOrEmailValue);
+    return false;
+  };
+
+  const handlePasswordChange = (ev: React.FormEvent<HTMLInputElement>) => {
+    ev.preventDefault();
+    const passwordValue = (ev.target as HTMLInputElement).value;
+    setPassword(passwordValue);
+    return false;
+  };
+
+  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+    ev.preventDefault();
+
+    const api = new ApiConfig();
+    const endpointUrl = api.login();
+    
+    const request = {
+      username_or_email: usernameOrEmail,
+      password: password,
+    }
+
+    fetch(endpointUrl, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify(request),
+    })
+    .then(res => res.json())
+    .then(res => {
+      console.log('login response', res)
+      if (res.success) {
+        console.log('querying new session');
+        props.querySessionAction();
+        history.push('/');
+      }
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+
+    return false;
+  }
+
+  return (
+    <div>
+      <h1 className="title is-1"> Login </h1>
+
+      <p></p>
+
+      <form onSubmit={handleFormSubmit}>
+        <div className="field">
+          <label className="label">Username or Email</label>
+          <div className="control has-icons-left has-icons-right">
+            <input className="input" type="text" placeholder="Username or Email" value={usernameOrEmail} onChange={handleUsernameOrEmailChange} />
+            <span className="icon is-small is-left">
+              <i className="fas fa-user"></i>
+            </span>
+            <span className="icon is-small is-right">
+              <i className="fas fa-check"></i>
+            </span>
+          </div>
+          {/*<p className="help"></p>*/}
+        </div>
+
+        <div className="field">
+          <label className="label">Password</label>
+          <div className="control has-icons-left has-icons-right">
+            <input className="input" type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
+            <span className="icon is-small is-left">
+              <i className="fas fa-envelope"></i>
+            </span>
+            <span className="icon is-small is-right">
+              <i className="fas fa-exclamation-triangle"></i>
+            </span>
+          </div>
+          {/*<p className="help"></p>*/}
+        </div>
+
+        <br />
+
+        <div className="field is-grouped">
+          <div className="control">
+            <button className="button is-link is-large">Login</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export { LoginFunctionalComponent };