Implemented error handling for creating groups

scm-ui/src/groups/components/GroupForm.js

@@ -9,7 +9,8 @@ import * as validator from "./groupValidation";
 
 type Props = {
   t: string => string,
-  submitForm: Group => void
+  submitForm: Group => void,
+  loading?: boolean
 };
 
 type State = {
@@ -53,7 +54,7 @@ class GroupForm extends React.Component<Props, State> {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, loading } = this.props;
     return (
       <form onSubmit={this.onSubmit}>
         <InputField
@@ -68,7 +69,7 @@ class GroupForm extends React.Component<Props, State> {
           onChange={this.handleDescriptionChange}
           validationError={false}
         />
-        <SubmitButton label={t("group-form.submit")} />
+          <SubmitButton label={t("group-form.submit")} loading={loading}/>
       </form>
     );
   }

scm-ui/src/groups/containers/AddGroup.js

@@ -5,25 +5,32 @@ import Page from "../../components/layout/Page";
 import { translate } from "react-i18next";
 import GroupForm from "../components/GroupForm";
 import { connect } from "react-redux";
-import { createGroup } from "../modules/groups";
+import { createGroup, isCreateGroupPending, getCreateGroupFailure, createGroupReset } from "../modules/groups";
 import type { Group } from "../types/Group";
 import type { History } from "history";
 
 type Props = {
   t: string => string,
   createGroup: (group: Group, callback?: () => void) => void,
-  history: History
+  history: History,
+  loading?: boolean,
+  error?: Error,
+  resetForm: () => void,
 };
 
 type State = {};
 
 class AddGroup extends React.Component<Props, State> {
+
+  componentDidMount() {
+    this.props.resetForm();
+  }
   render() {
-    const { t } = this.props;
+    const { t, loading, error } = this.props;
     return (
-      <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")}>
+      <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")} error={error}>
         <div>
-          <GroupForm submitForm={group => this.createGroup(group)} />
+          <GroupForm submitForm={group => this.createGroup(group)} loading={loading}/>
         </div>
       </Page>
     );
@@ -40,12 +47,20 @@ class AddGroup extends React.Component<Props, State> {
 const mapDispatchToProps = dispatch => {
   return {
     createGroup: (group: Group, callback?: () => void) =>
-      dispatch(createGroup(group, callback))
+      dispatch(createGroup(group, callback)),
+      resetForm: () => {
+        dispatch(createGroupReset());
+      }
   };
 };
 
 const mapStateToProps = state => {
-  return {}
+  const loading = isCreateGroupPending(state);
+  const error = getCreateGroupFailure(state);
+  return {
+    loading,
+    error
+  };
 };
 
 export default connect(