Changed frontend according to new API error structure

adavijit · Mar 5, 2020 · 09e144b · 09e144b
1 parent d0e714e
commit 09e144b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 21 deletions.
diff --git a/front-end/src/components/Login/index.jsx b/front-end/src/components/Login/index.jsx
@@ -17,7 +17,8 @@ class Login extends Component {
       password: "",
       isAuthenticated: false,
       exists: false,
-      hidden: true
+      errors: {},
+      commonError: null
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -38,7 +39,10 @@ class Login extends Component {
       username,
       password
     };
-
+    this.setState({
+      errors: {},
+      commonError: null
+    })
 
     userLogin(user)
       .then(res => {
@@ -56,10 +60,11 @@ class Login extends Component {
           this.props.history.push("/", this.state);
         }
     }).catch(error => {
+        const len = Object.keys(error.data).length;
         this.setState({
-          hidden: false
+          errors: len > 0 ? error.data : {},
+          commonError: len <= 0 ? error.message : null
         });
-        this.props.history.push("/sign-in");
     })
   }
 
@@ -70,7 +75,7 @@ class Login extends Component {
   }
 
   render() {
-    const { username, password, exists, hidden } = this.state;
+    const { username, password, exists, commonError, errors } = this.state;
     const isEnabled = username && password;
 
     return (
@@ -80,9 +85,9 @@ class Login extends Component {
         <h2 className="signInHeading">Sign In</h2>
         <Divider style={{ marginBottom: '20px'}}/>
 
-        {!exists ? (
+        {!exists && commonError ? (
 
-          <Alert severity="error" hidden={hidden}>Sorry! User not found..</Alert>
+          <Alert severity="error">{ commonError }</Alert>
         ) : null}
         <form onSubmit={this.handleSubmit} autoComplete="off">
           <TextField
@@ -93,6 +98,8 @@ class Login extends Component {
             fullWidth
             margin="normal"
             variant="outlined"
+            error={!!errors.username}
+            helperText={errors.username}
           />
           <br />
           <TextField
@@ -104,6 +111,8 @@ class Login extends Component {
             margin="normal"
             type="password"
             variant="outlined"
+            error={!!errors.password}
+            helperText={errors.password}
           />
           <div style={{ textAlign: 'left', marginTop: '30px'}}>
             <Button

diff --git a/front-end/src/components/Register/index.jsx b/front-end/src/components/Register/index.jsx
@@ -21,7 +21,7 @@ class Register extends Component {
       birth: "",
       isAuthenticated: false,
       error: "",
-      hidden: true
+      errors: {},
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -45,17 +45,13 @@ class Register extends Component {
       birth,
       email
     };
+    this.setState({
+      error: "",
+      errors: {}
+    });
 
     userRegister(user)
       .then(res => {
-        if (res.data.error) {
-          this.setState({
-            error: res.data.error,
-            hidden: false
-          });
-          this.props.history.push("/sign-up");
-          return console.warn(res.data.error);
-        }
         createUser(res.data.userSaved);
         const { token } = res.data;
         console.log(token);
@@ -70,7 +66,13 @@ class Register extends Component {
           });
           this.props.history.push("/", this.state);
         }
-      });
+      }).catch(error => {
+        const len = Object.keys(error.data).length;
+        this.setState({
+          error: len > 0 ? error.data[Object.keys(error.data)[0]] : error.message,
+          errors: len > 0 ? error.data : {}
+        });
+    })
   }
 
   handleChange(key, event) {
@@ -146,9 +148,9 @@ class Register extends Component {
       username,
       password,
       exists,
-      hidden,
       error,
-      email
+      email,
+      errors
     } = this.state;
     const isEnabled = name && email && username && password;
     return (
@@ -157,9 +159,9 @@ class Register extends Component {
 
          <h2 className="signInHeading">Sign Up</h2>
           <Divider style={{ marginBottom: '20px'}}/>
-          {!exists ? (
+          {!exists && error ? (
 
-          <Alert severity="error" hidden={hidden}>{error}</Alert>
+          <Alert severity="error">{error}</Alert>
         ) : null}
           <form onSubmit={this.handleSubmit} autoComplete="off">
             <PersonalDetails
@@ -168,12 +170,14 @@ class Register extends Component {
               name={name}
               email={email}
               birth={birth}
+              errors={errors}
             />
             <UserDetails
               step={step}
               handleChange={this.handleChange}
               username={username}
               password={password}
+              errors={errors}
             />
             <div className={step > 1 ? "buttons" : ""}>
               {this.prevBtn(isEnabled)}
@@ -204,6 +208,7 @@ function PersonalDetails(props) {
         fullWidth
         margin="normal"
         variant="outlined"
+        error={!!props.errors.name}
       />
       <br />
       <TextField
@@ -215,6 +220,7 @@ function PersonalDetails(props) {
         fullWidth
         margin="normal"
         variant="outlined"
+        error={!!props.errors.email}
       />
       <br />
       <TextField
@@ -228,6 +234,7 @@ function PersonalDetails(props) {
         }}
         margin="normal"
         variant="outlined"
+        error={!!props.errors.birth}
       />
       <br />
     </Fragment>
@@ -249,6 +256,7 @@ function UserDetails(props) {
         fullWidth
         margin="normal"
         variant="outlined"
+        error={!!props.errors.username}
       />
       <br />
       <TextField
@@ -260,6 +268,7 @@ function UserDetails(props) {
         margin="normal"
         type="password"
         variant="outlined"
+        error={!!props.errors.password}
       />
       <br />
     </Fragment>

diff --git a/front-end/src/services/http.js b/front-end/src/services/http.js
@@ -6,4 +6,35 @@ import axios from "axios"
  */
 const http = axios.create();
 
+http.interceptors.response.use(
+  function(response) {
+    return response;
+  },
+  function(error) {
+    let extractedErrors = {};
+    const errorObj = {};
+    let errorMsg = 'Unexpected error occured.';
+    if (!(error && error.response)) {
+      errorMsg = 'Can not reach the server at the moment.';
+    } else if (error.response.data) {
+      if (
+        error.response.data.errors &&
+        Object.keys(error.response.data.errors).length > 0
+      ) {
+        extractedErrors = error.response.data.errors;
+      } 
+      if (error.response.data.message) {
+        errorMsg = error.response.data.message;
+      }
+    }
+
+    errorObj.data = extractedErrors;
+    errorObj.message = errorMsg;
+    if (error && error.response && error.response.status) {
+      errorObj.status = error.response.status;
+    }
+    return Promise.reject(errorObj);
+  }
+);
+
 export default http;