add message for showing errors

IMGIITRoorkee · Jul 17, 2020 · 8b46ea0 · 8b46ea0
1 parent eb776c0
commit 8b46ea0
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/src/components/team/add-member-details.js b/src/components/team/add-member-details.js
@@ -13,6 +13,7 @@ import {
   Loader,
   Modal,
   Image,
+  Message,
 } from 'semantic-ui-react'
 
 import styles from '../../css/team/add-member-details.css'
@@ -71,6 +72,7 @@ class AddMemberDetails extends Component {
       prevUploadedFileN: null,
       errorHandle: false,
       errorShortBio: false,
+      errorMessage: '',
       errorUrl: false,
       techSkillsOptions: [],
       socialLinksOptions: [],
@@ -285,6 +287,8 @@ class AddMemberDetails extends Component {
         })
         .catch(function(response) {
           //handle error
+          window.scrollTo(0,0)
+          that.setState({ errorMessage: response.response.data })
           if (response.response.data.handle != null) {
             that.setState({ errorHandle: true })
           }
@@ -343,6 +347,7 @@ class AddMemberDetails extends Component {
     }
 
     if (this.state.loaded) {
+      const { errorHandle, errorShortBio, errorMessage } = this.state
       return (
         <div>
           <Container styleName="common.margin">
@@ -351,6 +356,21 @@ class AddMemberDetails extends Component {
                 ? 'Add Member Details'
                 : 'Modify Member Details'}
             </Header>
+            {( errorHandle || errorShortBio) && (
+              <Message error>
+                <Message.Header>There was some errors with your submission</Message.Header>
+                    {
+                      Object.keys(errorMessage).forEach(function(field) {
+                        const errors = errorMessage[field];
+                        errors.forEach(err =>
+                          (
+                            <p> {field} : {err} </p>
+                          )
+                        )
+                      })
+                    }
+                </Message>
+            )}
             <Form>
               <Form.Field required>
                 <label>Handle Name</label>
@@ -363,11 +383,6 @@ class AddMemberDetails extends Component {
                   }}
                   value={this.state.handle}
                 />
-                {this.state.errorHandle && (
-                  <Label color="red" pointing>
-                    This Handle already exists
-                  </Label>
-                )}
               </Form.Field>
 
               <Form.Field
@@ -382,11 +397,6 @@ class AddMemberDetails extends Component {
                 }}
                 value={this.state.shortBio}
               />
-              {this.state.errorShortBio && (
-                <Label color="red" pointing>
-                  Maximum 255 characters allowed
-                </Label>
-              )}
             </Form>
 
             <Segment attached="top" styleName="styles.headingBox">