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

View File

@ -1,9 +1,8 @@
import React, { useState } from 'react'
import axios from 'axios'
import React, { useState, } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import ReCAPTCHA from "react-google-recaptcha";
import { useHistory } from "react-router-dom";
import { Service, NewUser } from '../Services/service';
import Header from './Header';
@ -34,10 +33,10 @@ type RegistrationBody = {
password: string;
recaptcha: string;
}
const RegistrationForm = () => {
const RegistrationForm = (props: ServiceProps) => {
const [email, setEmail] = useState(undefined);
const [lastName, setLastname] = useState(undefined)
const [firstname, setFirstname] = useState(undefined);
const [firstName, setFirstname] = useState(undefined);
const [password, setPassword] = useState(undefined);
const [recaptchaToken, setRecaptchaToken] = useState(undefined);
const [errorMsg, setErrorMsg] = useState(undefined);
@ -47,33 +46,21 @@ const RegistrationForm = () => {
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
// @Todo: Movo to a type ...
const payload = JSON.stringify(
const user: NewUser =
{
email: email,
firstName: firstname,
lastName: lastName,
firstname: firstName,
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);
});
// Call Service ...
props.service.registerNewUser(
user,
() => history.push("/c/user/registrationSuccess"),
(msg) => setErrorMsg(msg)
);
}
return (
@ -107,11 +94,14 @@ const RegistrationForm = () => {
}
const RegistationFormPage = (props: any) => {
type ServiceProps = {
service: Service
}
const RegistationFormPage = (props: ServiceProps) => {
return (
<div>
<Header type='only-signin' />
<RegistrationForm />
<RegistrationForm service={props.service} />
<Footer />
</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 }