Refactor service class.

This commit is contained in:
Paulo Gustavo Veiga 2020-12-06 14:54:37 -08:00
parent 09ed5a39d8
commit 98ebbaceee
3 changed files with 74 additions and 33 deletions

View File

@ -1,5 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import LoginPage from './components/LoginPage'; import LoginPage from './components/LoginPage';
import { Service, RestService } from './services/Service';
import { RegistrationSuccessPage, RegistationFormPage } from './components/RegistrationPage'; import { RegistrationSuccessPage, RegistationFormPage } from './components/RegistrationPage';
import { IntlProvider } from 'react-intl' import { IntlProvider } from 'react-intl'
@ -38,6 +40,9 @@ const App = () => {
fetchData(); fetchData();
}, []); }, []);
// Create Service object...
const service: Service = new RestService('http://localhost:8080', () => { console.log("401 error")});
return messages ? ( return messages ? (
<IntlProvider locale={locale} defaultLocale='en' messages={messages}> <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
<Router> <Router>
@ -46,7 +51,9 @@ const App = () => {
<Redirect to="/c/login" /> <Redirect to="/c/login" />
</Route> </Route>
<Route path="/c/login" component={LoginPage} /> <Route path="/c/login" component={LoginPage} />
<Route path="/c/user/registration" component={RegistationFormPage} /> <Route path="/c/user/registration">
<RegistationFormPage service={service}/>
</Route>
<Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} /> <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
</Switch> </Switch>
</Router> </Router>

View File

@ -1,9 +1,8 @@
import React, { useState } from 'react' import React, { useState, } from 'react'
import axios from 'axios'
import { FormattedMessage, useIntl } from 'react-intl' import { FormattedMessage, useIntl } from 'react-intl'
import ReCAPTCHA from "react-google-recaptcha"; import ReCAPTCHA from "react-google-recaptcha";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { Service, NewUser } from '../Services/service';
import Header from './Header'; import Header from './Header';
@ -34,10 +33,10 @@ type RegistrationBody = {
password: string; password: string;
recaptcha: string; recaptcha: string;
} }
const RegistrationForm = () => { const RegistrationForm = (props: ServiceProps) => {
const [email, setEmail] = useState(undefined); const [email, setEmail] = useState(undefined);
const [lastName, setLastname] = useState(undefined) const [lastName, setLastname] = useState(undefined)
const [firstname, setFirstname] = useState(undefined); const [firstName, setFirstname] = useState(undefined);
const [password, setPassword] = useState(undefined); const [password, setPassword] = useState(undefined);
const [recaptchaToken, setRecaptchaToken] = useState(undefined); const [recaptchaToken, setRecaptchaToken] = useState(undefined);
const [errorMsg, setErrorMsg] = useState(undefined); const [errorMsg, setErrorMsg] = useState(undefined);
@ -47,33 +46,21 @@ const RegistrationForm = () => {
const handleSubmit = async (event: React.FormEvent) => { const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault(); event.preventDefault();
const user: NewUser =
{
email: email,
firstname: firstName,
lastname: lastName,
password: password,
recaptcha: recaptchaToken
};
// @Todo: Movo to a type ... // Call Service ...
const payload = JSON.stringify( props.service.registerNewUser(
{ user,
email: email, () => history.push("/c/user/registrationSuccess"),
firstName: firstname, (msg) => setErrorMsg(msg)
lastName: lastName,
password: password,
recaptcha: recaptchaToken
}
); );
await axios.post("http://localhost:8080/service/user",
payload,
{ headers: { 'Content-Type': 'application/json' } }
).then(response => {
// All was ok, let's sent to success page ...
history.push("/c/user/registrationSuccess");
}).catch(error => {
// Handle error ...
const data = error.response;
let errorMsg = intl.formatMessage({ id: "registration.unexpected", defaultMessage: "Unexpected error. Please, try latter." })
if (data != null) {
let errorMsg = Object.values(data.fieldErrors)[0] as string;
}
setErrorMsg(errorMsg);
});
} }
return ( return (
@ -107,11 +94,14 @@ const RegistrationForm = () => {
} }
const RegistationFormPage = (props: any) => { type ServiceProps = {
service: Service
}
const RegistationFormPage = (props: ServiceProps) => {
return ( return (
<div> <div>
<Header type='only-signin' /> <Header type='only-signin' />
<RegistrationForm /> <RegistrationForm service={props.service} />
<Footer /> <Footer />
</div> </div>
); );

View File

@ -0,0 +1,44 @@
import axios from 'axios'
type NewUser =
{
email: string;
firstname: string;
lastname: string;
password: string;
recaptcha: string;
}
interface Service {
registerNewUser(user: NewUser, onSuccess: () => void, onError: (msg: string) => void): void;
}
class RestService implements Service {
private baseUrl: string;
private authFailed: () => void
constructor(baseUrl: string, authFailed: () => void) {
this.baseUrl = baseUrl;
}
async registerNewUser(user: NewUser, onSuccess: () => void, onError: (msg: string) => void) {
await axios.post(this.baseUrl + '/service/user',
JSON.stringify(user),
{ headers: { 'Content-Type': 'application/json' } }
).then(response => {
// All was ok, let's sent to success page ...
onSuccess();
}).catch(error => {
const data = error.response;
// let errorMsg = intl.formatMessage({ id: "registration.unexpected", defaultMessage: "Unexpected error. Please, try latter." })
let msg = 'Unexpected error. Please, try latter';
if (data != null) {
msg = Object.values(data.fieldErrors)[0] as string;
}
onError(msg);
});
}
}
export { Service, RestService, NewUser }