Merged heads

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

@@ -1,19 +1,40 @@
 //@flow
-import React from 'react';
+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 InputField from "../../components/forms/InputField"
-import SubmitButton from "../../components/buttons/SubmitButton"
-import type { Group } from "../types/Group"
 export interface Props {
-  loading?: boolean,
-  submitForm: Group => void
+  t: string => string;
+  submitForm: Group => void;
 }
 
 export interface State {
-  group: Group
+  group: Group;
 }
 
 class GroupForm extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      group: {
+        name: "",
+        description: "",
+        _embedded: {
+          members: []
+        },
+        _links: {},
+        members: [],
+        type: "",
+      }
+    };
+  }
+  onSubmit = (event: Event) => {
+    event.preventDefault();
+    this.props.submitForm(this.state.group);
+  };
 
   isValid = () => {
     return true;
@@ -25,21 +46,43 @@ class GroupForm extends React.Component<Props, State> {
   }
 
   render() {
-    const { loading } = this.props;
+    const { t } = this.props;
     return (
-      // TODO: i18n
-      <form onSubmit={this.submit}>
-      <InputField label="Name" errorMessage="Invalid group name" onChange={()=>{}} validationError={false}/>
-      <InputField label="Description" errorMessage="Invalid group description" onChange={()=>{}} validationError={false} />
-      <SubmitButton
-          disabled={!this.isValid()}
-          loading={loading}
-          label="Submit"
+      <form onSubmit={this.onSubmit}>
+        <InputField
+          label={t("group.name")}
+          errorMessage=""
+          onChange={this.handleGroupNameChange}
+          validationError={false}
         />
+        <InputField
+          label={t("group.description")}
+          errorMessage=""
+          onChange={this.handleDescriptionChange}
+          validationError={false}
+        />
+        <SubmitButton label={t("group-form.submit")} />
       </form>
-    )
+    );
   }
 
+  handleGroupNameChange = (name: string) => {
+    this.setState({
+      group: {
+        ...this.state.group,
+        name
+      }
+    });
+  };
+
+  handleDescriptionChange = (description: string) => {
+    this.setState({
+      group: {
+        ...this.state.group,
+        description
+      }
+    });
+  };
 }
 
-export default GroupForm;
+export default translate("groups")(GroupForm);