From b10360fe6f1b2b7ee1232216f7c944f5cd452b43 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Wed, 3 Feb 2021 17:53:37 -0800
Subject: [PATCH] Improve error handling

---
 packages/webapp/src/client/index.ts           | 25 ++++++++++---------
 .../webapp/src/client/rest-client/index.ts    | 24 ++++++++++++++++--
 .../components/forgot-password-page/index.tsx |  2 +-
 .../src/components/form/input/index.tsx       |  4 +--
 .../components/registration-page/index.tsx    |  8 +++---
 5 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/packages/webapp/src/client/index.ts b/packages/webapp/src/client/index.ts
index 92a7456d..546bbed6 100644
--- a/packages/webapp/src/client/index.ts
+++ b/packages/webapp/src/client/index.ts
@@ -42,23 +42,24 @@ export const parseResponseOnError = (response: any): ErrorInfo => {
 
         switch (status) {
             case 401:
-            //    this.authFailed();
+                //    this.authFailed();
                 break;
             default:
                 if (data) {
-                    result = {};
                     // Set global errors ...
-                    if (data.globalErrors) {
-                        let msg:string;
-                        let errors = data.globalErrors;
-                        if (errors.length > 0) {
-                            result.msg = errors[0];
-                        }
+                    result = {};
+                    let globalErrors = data.globalErrors;
+                    if (globalErrors && globalErrors.length > 0) {
+                        result.msg = globalErrors[0];
                     }
 
                     // Set field errors ...
-                    if (data.fieldErrors) {
-                        result.fields = new Map<string, string>();
+                    if (data.fieldErrors && Object.keys(data.fieldErrors).length > 0) {
+                        result.fields = data.fieldErrors;
+                        if (!result.msg) {
+                            const key = Object.keys(data.fieldErrors)[0];
+                            result.msg = data.fieldErrors[key];
+                        }
                     }
 
                 } else {
@@ -76,7 +77,7 @@ export const parseResponseOnError = (response: any): ErrorInfo => {
 }
 
 interface Client {
-    createMap(rest: { name: string; description?: string | undefined }) 
+    createMap(rest: { name: string; description?: string | undefined })
     deleteLabel(label: string): Promise<unknown>;
     registerNewUser(user: NewUser): Promise<void>;
     resetPassword(email: string): Promise<void>;
@@ -87,7 +88,7 @@ interface Client {
     duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
     loadMapInfo(id: number): Promise<BasicMapInfo>;
     changeStarred(id: number): Promise<void>;
-    
+
 }
 
 
diff --git a/packages/webapp/src/client/rest-client/index.ts b/packages/webapp/src/client/rest-client/index.ts
index 53f69d47..72ab8d55 100644
--- a/packages/webapp/src/client/rest-client/index.ts
+++ b/packages/webapp/src/client/rest-client/index.ts
@@ -13,13 +13,32 @@ export default class RestClient extends MockClient {
     }
     
     fetchAllMaps(): Promise<MapInfo[]> {
-        console.log("Fetching  maps from server")
+        // https://app.wisemapping.com/c/restful/maps/
+        
+        // const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
+        //     axios.post(this.baseUrl + '/service/users/',
+        //         JSON.stringify(user),
+        //         { headers: { 'Content-Type': 'application/json' } }
+        //     ).then(response => {
+        //         // All was ok, let's sent to success page ...;
+        //         success();
+        //     }).catch(error => {
+        //         const response = error.response;
+        //         const errorInfo = parseResponseOnError(response);
+        //         reject(errorInfo);
+        //     });
+        // }
+        // return new Promise(handler);
+        // https://app.wisemapping.com/c/restful/maps/
+
+
+        // console.log("Fetching  maps from server")
         return Promise.resolve([]);
     }
 
     registerNewUser(user: NewUser): Promise<void> {
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
-            axios.post(this.baseUrl + '/service/users',
+            axios.post(this.baseUrl + '/service/users/',
                 JSON.stringify(user),
                 { headers: { 'Content-Type': 'application/json' } }
             ).then(response => {
@@ -33,6 +52,7 @@ export default class RestClient extends MockClient {
         }
         return new Promise(handler);
     }
+
     resetPassword(email: string): Promise<void> {
 
         const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index e9b49c61..e9849cd1 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -50,7 +50,7 @@ const ForgotPassword = () => {
 
       <form onSubmit={handleOnSubmit}>
         <Input type="email" name="email" label={{ id: "forgot.email", defaultMessage: "Email" }}
-          autoComplete="email" onChange={e => setEmail(e.target.value)} />
+          autoComplete="email" onChange={e => setEmail(e.target.value)} error={error}/>
 
         <SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
       </form>
diff --git a/packages/webapp/src/components/form/input/index.tsx b/packages/webapp/src/components/form/input/index.tsx
index 6796da09..09f9106a 100644
--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/packages/webapp/src/components/form/input/index.tsx
@@ -22,14 +22,14 @@ const Input = (props: InputProps) => {
     const name = props.name;
     const value = props.value;
     const onChange = props.onChange ? props.onChange : () => { };
-    const fieldError = Boolean(error?.fields?.get(name));
+    const fieldError = error?.fields?.[name];
     const required = props.required != undefined ? props.required : true;
     const fullWidth = props.fullWidth != undefined ? props.required : true;
 
     return (
         <TextField name={name} type={props.type} label={intl.formatMessage(props.label)}
             value={value} onChange={onChange}
-            error={fieldError} helperText={fieldError}
+            error={Boolean(fieldError)} helperText={fieldError}
             variant="outlined" required={required} fullWidth={fullWidth} margin="dense"/>
 
     );
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index 8b056c55..a8dee267 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -72,16 +72,16 @@ const RegistrationForm = () => {
           <GlobalError error={error} />
 
           <Input name="email" type="email" onChange={handleOnChange} label={{ id: "registration.email", defaultMessage: "Email" }}
-            autoComplete="email" />
+            autoComplete="email" error={error}/>
 
           <Input name="firstname" type="text" onChange={handleOnChange} label={{ id: "registration.firstname", defaultMessage: "First Name" }}
-            autoComplete="given-name" />
+            autoComplete="given-name" error={error}/>
 
           <Input name="lastname" type="text" onChange={handleOnChange} label={{ id: "registration.lastname", defaultMessage: "Last Name" }}
-            autoComplete="family-name" />
+            autoComplete="family-name" error={error}/>
 
           <Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
-            autoComplete="new-password" />
+            autoComplete="new-password" error={error}/>
 
           <div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
             <ReCAPTCHA