Bootstrapped validation for groups

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

@@ -0,0 +1,92 @@
+//@flow
+import React from "react";
+
+import InputField from "../../components/forms/InputField";
+import { SubmitButton } from "../../components/buttons";
+import { translate } from "react-i18next";
+import type { Group } from "../types/Group";
+import * as validator from "./groupValidation"
+
+type Props = {
+  t: string => string,
+  submitForm: Group => void
+}
+
+type State = {
+  group: Group,
+  nameValidationError: boolean,
+  descriptionValidationError: boolean
+}
+
+class GroupForm extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      group: {
+        name: "",
+        description: "",
+        _embedded: {
+          members: []
+        },
+        _links: {},
+        members: [],
+        type: "",
+      },
+      nameValidationError: false,
+      descriptionValidationError: false
+    };
+  }
+
+  onSubmit = (event: Event) => {
+    event.preventDefault();
+    this.props.submitForm(this.state.group);
+  };
+
+  isValid = () => {
+    const group = this.state.group;
+    return !(this.state.nameValidationError || this.state.descriptionValidationError || group.name);
+  }
+
+  submit = (event: Event) => {
+    event.preventDefault();
+    if (this.isValid) {
+      this.props.submitForm(this.state.group)
+    }
+  }
+
+  render() {
+    const { t } = this.props;
+    return (
+      <form onSubmit={this.onSubmit}>
+        <InputField
+          label={t("group.name")}
+          errorMessage="group name invalid"
+          onChange={this.handleGroupNameChange}
+          validationError={this.state.nameValidationError}
+        />
+        <InputField
+          label={t("group.description")}
+          errorMessage=""
+          onChange={this.handleDescriptionChange}
+          validationError={this.state.descriptionValidationError}
+        />
+        <SubmitButton label={t("group-form.submit")} />
+      </form>
+    );
+  }
+
+  handleGroupNameChange = (name: string) => {
+    this.setState({
+      nameValidationError: !validator.isNameValid(name),
+      group: {...this.state.group, name}
+    });
+  };
+
+  handleDescriptionChange = (description: string) => {
+    this.setState({
+      group: {...this.state.group, description }
+    });
+  };
+}
+
+export default translate("groups")(GroupForm);