mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Refactor service class.
This commit is contained in:
parent
09ed5a39d8
commit
98ebbaceee
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
44
packages/login/src/services/Service.ts
Normal file
44
packages/login/src/services/Service.ts
Normal 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 }
|
Loading…
Reference in New Issue
Block a user