From f2df1d26e1504140e39c21b7cfcbe03ec3d30e78 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 26 May 2021 11:56:58 -0400 Subject: [PATCH] login redirect with functional component class componennts don't work O__O --- vocodes/src/App.tsx | 2 +- vocodes/src/v2/NewVocodesContainer.tsx | 3 +- vocodes/src/v2/login/LoginComponent.tsx | 20 ++- .../src/v2/login/LoginFunctionalComponent.tsx | 126 ++++++++++++++++++ 4 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 vocodes/src/v2/login/LoginFunctionalComponent.tsx diff --git a/vocodes/src/App.tsx b/vocodes/src/App.tsx index 0e9f1fa7e6..180f9a7f82 100644 --- a/vocodes/src/App.tsx +++ b/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'; diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index c2e2c10795..791572b99c 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/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 { - diff --git a/vocodes/src/v2/login/LoginComponent.tsx b/vocodes/src/v2/login/LoginComponent.tsx index ba0caa3a25..656cfee58a 100644 --- a/vocodes/src/v2/login/LoginComponent.tsx +++ b/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 { }; } + // 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) => { ev.preventDefault(); @@ -89,6 +100,13 @@ class LoginComponent extends React.Component { 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 => { diff --git a/vocodes/src/v2/login/LoginFunctionalComponent.tsx b/vocodes/src/v2/login/LoginFunctionalComponent.tsx new file mode 100644 index 0000000000..8d125a0a18 --- /dev/null +++ b/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) => { + ev.preventDefault(); + const usernameOrEmailValue = (ev.target as HTMLInputElement).value; + setUsernameOrEmail(usernameOrEmailValue); + return false; + }; + + const handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + const passwordValue = (ev.target as HTMLInputElement).value; + setPassword(passwordValue); + return false; + }; + + const handleFormSubmit = (ev: React.FormEvent) : 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 ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) +} + +export { LoginFunctionalComponent };