Refactor service class.

packages/login/src/app.tsx

@@ -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>

packages/login/src/components/RegistrationPage.tsx

@@ -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>
   );

packages/login/src/services/Service.ts

@@ -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 }